{"id":114,"date":"2026-01-11T20:01:39","date_gmt":"2026-01-12T01:01:39","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&#038;p=114"},"modified":"2026-01-12T16:38:42","modified_gmt":"2026-01-12T21:38:42","slug":"chapter-4-type","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-4-type\/","title":{"raw":"Chapter 4 \u2022 Type","rendered":"Chapter 4 \u2022 Type"},"content":{"raw":"<h2>Specifying Type<\/h2>\r\nThe simplest way to specify type for your document is to use the font shorthand, which specifies (in the following order) bold, italic, point size, line leading (\"line-height\"), and font name:\r\n<pre>font: 14pt\/1.4em Georgia, serif;<\/pre>\r\n<h2>Giving the Fonts to Readers<\/h2>\r\nIf your design includes a particular font, you cannot assume that all readers have the font on their systems. Instead, you should give the font to readers using one of two methods:\r\n<ul>\r\n \t<li>link to the font file using the @font-face rule (code below) in the global\/embedded or .css style<\/li>\r\n \t<li>link to a Google Font (<a href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener\">fonts.google.com<\/a>); this links to the font outlines on Google's server and is the best way to assure your font is available<\/li>\r\n<\/ul>\r\n<pre>&lt;style&gt;\r\n  @font-face {\r\n    font-family: Georgia;\r\n    src: url(\"Georgia.ttf\"); \/* links to the TrueType font Georgia;\r\n  be sure to include the file in your document folder *\/\r\n} <em>other styles<\/em> \r\n&lt;\/style&gt;\r\n\r\n\/* Example of a link to a Google Font; the link would go before the &lt;style&gt; tag in the &lt;head&gt; *\/\r\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:\r\nital,wght@0,100..900;1,100..900&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\r\nIf you don't give the font to readers and they do not have the font on their systems, the type will appear as the browser default, usually Times Roman. To make sure your document appears in the font you intended, preflight your page in multiple browsers and\/or systems, before uploading to the web, and again after uploading. If you load a font with the @font-face rule and neglect to upload the font to your server, the font will likewise default to Times. (Times, incidentally, was designed for newspapers. The narrow characters maximum the number of words that can be printed with minimal paper and ink.)\r\n<h2>The Font Stack, Formats, and Styles<\/h2>\r\nAs a precaution, you should include a list of additional fonts (\u201cfont stack\u201d) in which you would like to see your text displayed, in the event your first choice doesn't work for some reason. The font-stack should end in a generic specification, such as serif, sans-serif, monospace, cursive, or fantasy.\r\n\r\nFont files acceptable for the web include TrueType (.ttf), OpenType (.otf), and Web Open File Format (.woff).\r\n\r\nFont characteristics include color, type size (font-size), line leading (vertical spacing, line-height), italic (font-style), and bold (font-weight).\r\n\r\nMany fonts are copyrighted by the font designer and\/or publisher. When using a font for a commercial web site, it's important to verify that you have a license to use the font. Google Fonts however are licensed for commercial use.\r\n<h2>Design Effects with Fonts<\/h2>\r\nNumerous print-inspired \"interactive\" features can be created with type, as in the figure below. These include type with gradient or photo backgrounds, drop-caps, callouts, sidebars, and typographic ornaments. To see how the effects were created, examine the document with your browser's Web Inspector.\r\n\r\n[caption id=\"attachment_163\" align=\"aligncenter\" width=\"384\"]<a href=\"https:\/\/r3adams.github.io\/grc-365-new\/alice.html\"><img src=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-708x1024.jpg\" alt=\"\" width=\"384\" height=\"556\" class=\"wp-image-163\" style=\"border: 1px solid darkgray;box-shadow: 2px 3px 6px darkgray\" \/><\/a> This 2-page document shows some creative design effects that you can use with type.[\/caption]\r\n<h2>Reference Document<\/h2>\r\nHow-to Type: rich-adams.net &gt; Completed Tutorials &gt; Home &gt; <a href=\"https:\/\/adamsr12.github.io\/grc365\/how-to-type.html\" target=\"_blank\" rel=\"noopener\">How-to Type<\/a> (icon at bottom of page)","rendered":"<h2>Specifying Type<\/h2>\n<p>The simplest way to specify type for your document is to use the font shorthand, which specifies (in the following order) bold, italic, point size, line leading (&#8220;line-height&#8221;), and font name:<\/p>\n<pre>font: 14pt\/1.4em Georgia, serif;<\/pre>\n<h2>Giving the Fonts to Readers<\/h2>\n<p>If your design includes a particular font, you cannot assume that all readers have the font on their systems. Instead, you should give the font to readers using one of two methods:<\/p>\n<ul>\n<li>link to the font file using the @font-face rule (code below) in the global\/embedded or .css style<\/li>\n<li>link to a Google Font (<a href=\"https:\/\/fonts.google.com\" target=\"_blank\" rel=\"noopener\">fonts.google.com<\/a>); this links to the font outlines on Google&#8217;s server and is the best way to assure your font is available<\/li>\n<\/ul>\n<pre>&lt;style&gt;\r\n  @font-face {\r\n    font-family: Georgia;\r\n    src: url(\"Georgia.ttf\"); \/* links to the TrueType font Georgia;\r\n  be sure to include the file in your document folder *\/\r\n} <em>other styles<\/em> \r\n&lt;\/style&gt;\r\n\r\n\/* Example of a link to a Google Font; the link would go before the &lt;style&gt; tag in the &lt;head&gt; *\/\r\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:\r\nital,wght@0,100..900;1,100..900&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre>\n<p>If you don&#8217;t give the font to readers and they do not have the font on their systems, the type will appear as the browser default, usually Times Roman. To make sure your document appears in the font you intended, preflight your page in multiple browsers and\/or systems, before uploading to the web, and again after uploading. If you load a font with the @font-face rule and neglect to upload the font to your server, the font will likewise default to Times. (Times, incidentally, was designed for newspapers. The narrow characters maximum the number of words that can be printed with minimal paper and ink.)<\/p>\n<h2>The Font Stack, Formats, and Styles<\/h2>\n<p>As a precaution, you should include a list of additional fonts (\u201cfont stack\u201d) in which you would like to see your text displayed, in the event your first choice doesn&#8217;t work for some reason. The font-stack should end in a generic specification, such as serif, sans-serif, monospace, cursive, or fantasy.<\/p>\n<p>Font files acceptable for the web include TrueType (.ttf), OpenType (.otf), and Web Open File Format (.woff).<\/p>\n<p>Font characteristics include color, type size (font-size), line leading (vertical spacing, line-height), italic (font-style), and bold (font-weight).<\/p>\n<p>Many fonts are copyrighted by the font designer and\/or publisher. When using a font for a commercial web site, it&#8217;s important to verify that you have a license to use the font. Google Fonts however are licensed for commercial use.<\/p>\n<h2>Design Effects with Fonts<\/h2>\n<p>Numerous print-inspired &#8220;interactive&#8221; features can be created with type, as in the figure below. These include type with gradient or photo backgrounds, drop-caps, callouts, sidebars, and typographic ornaments. To see how the effects were created, examine the document with your browser&#8217;s Web Inspector.<\/p>\n<figure id=\"attachment_163\" aria-describedby=\"caption-attachment-163\" style=\"width: 384px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/r3adams.github.io\/grc-365-new\/alice.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-708x1024.jpg\" alt=\"\" width=\"384\" height=\"556\" class=\"wp-image-163\" style=\"border: 1px solid darkgray;box-shadow: 2px 3px 6px darkgray\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-708x1024.jpg 708w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-207x300.jpg 207w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-768x1111.jpg 768w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-1062x1536.jpg 1062w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-65x94.jpg 65w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-225x326.jpg 225w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page-350x506.jpg 350w, https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-content\/uploads\/sites\/449\/2026\/01\/design-effects-page.jpg 1396w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/a><figcaption id=\"caption-attachment-163\" class=\"wp-caption-text\">This 2-page document shows some creative design effects that you can use with type.<\/figcaption><\/figure>\n<h2>Reference Document<\/h2>\n<p>How-to Type: rich-adams.net &gt; Completed Tutorials &gt; Home &gt; <a href=\"https:\/\/adamsr12.github.io\/grc365\/how-to-type.html\" target=\"_blank\" rel=\"noopener\">How-to Type<\/a> (icon at bottom of page)<\/p>\n","protected":false},"author":6,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-114","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":14,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/114\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/114\/revisions\/118"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/114\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=114"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=114"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}