{"id":5954,"date":"2021-02-26T18:22:53","date_gmt":"2021-02-26T18:22:53","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=5954"},"modified":"2021-08-20T18:47:06","modified_gmt":"2021-08-20T18:47:06","slug":"lesson-3-typography","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2021\/02\/26\/lesson-3-typography\/","title":{"rendered":"Typography | Intro to Typography"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Artboard-1.png\" alt=\"\" class=\"wp-image-7089\" width=\"95\" height=\"19\"\/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-1024x341.png\" alt=\"\" class=\"wp-image-7278\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-1536x512.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/07\/typography-banner-2048x683.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Fonts are an integral part of graphic design. Behind every bit of text that you see \u2013 on websites, billboards, and even your phone&#8217;s keyboard \u2013 lives a designer who spent time choosing the perfect font that fits the texts&#8217; setting and function. This lesson will teach you about the origins of typography and the basic functions of different types of fonts. <\/p>\n\n\n\n<p><strong>By the end of this training you will:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Learn about popular fonts (and find out why they are popular!)<\/li><li>Identify types of fonts (serif, sans serif, etc.) and font emphases (bold, italics, etc.)<\/li><li>Download fonts<\/li><li>Pair fonts<\/li><\/ul>\n\n\n\n<p>Let&#8217;s get started!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Brief History of Typography<\/strong><\/h1>\n\n\n\n<p>Before Gutenberg created the development of moveable type and the printing press, everything was written by quill and ink on varnished animal skin bounded in books. Our look at typography will go from this point forward.<\/p>\n\n\n\n<p>Here&#8217;s a fun visual overview of the development of typography before reading the timeline below.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The History of Typography - Animated Short\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/wOgIkxAfJsk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1400s:<\/strong> Guttenberg invented moveable type: hand-carved letters on metal blocks and a press to roll ink over the metal raised letters. The font he created was known as a blackletter.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1470: <\/strong>Jenson invented the Roman type, inspired by the Roman text on their architecture. It was more readable than previous fonts, like blackletter.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1501:<\/strong> Manutius created italics.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1700s:<\/strong> Different variations of the serifs were being experimented with by Caslon and Baskerville (aka the names of the fonts now).<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1816: <\/strong>Caslon IV created Sans Serif.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1920s:<\/strong> Goudy was the world&#8217;s first full-time type designer.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>1957:<\/strong> Miedinger created Helvetica.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Present:<\/strong> We have new fonts coming out all the time, thanks to the internet!<\/li><\/ul>\n\n\n\n<div style=\"height:58px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Anatomy of Letters<\/strong><\/h2>\n\n\n\n<p>Typography is complex and nuanced, with lots of rules, and a lot of vocabulary. A good starting point is taking a look at the anatomy of letter:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"876\" height=\"424\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Anatomy-of-Typography.png\" alt=\"\" class=\"wp-image-5992\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Anatomy-of-Typography.png 876w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Anatomy-of-Typography-300x145.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Anatomy-of-Typography-768x372.png 768w\" sizes=\"auto, (max-width: 876px) 100vw, 876px\" \/><\/figure><\/div>\n\n\n\n<p>You&#8217;ll need to know: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>serif\/sans-serif<\/li><li>bracket<\/li><li>stem <\/li><li>terminal<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><span class=\"has-inline-color has-vivid-red-color\"><strong>Serifs<\/strong><\/span> are the little extensions on either end of a letter known as brackets. <strong><span class=\"has-inline-color has-vivid-red-color\">Brackets<\/span><\/strong> come in different styles, but when added to any letter, they make that letter serif. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/04-Serifs-01-1024x396.jpg\" alt=\"\" class=\"wp-image-5995\" width=\"549\" height=\"211\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/04-Serifs-01-1024x396.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/04-Serifs-01-300x116.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/04-Serifs-01-768x297.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/04-Serifs-01.jpg 1200w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">Sans Serifs<\/span><\/strong> are letters that do not have brackets (serifs) on their ends. <em>Sans <\/em>means &#8220;without,&#8221; so think of it as &#8220;without serifs\/brackets.&#8221;<\/li><li>A <strong><span class=\"has-inline-color has-vivid-red-color\">terminal<\/span><\/strong> is the end of a stroke in a letter that does not include a serif. For instance, some typefaces feature ball terminals on letters or a tapered ending. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/image24.png\" alt=\"\" class=\"wp-image-5996\" width=\"193\" height=\"173\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/image24.png 556w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/image24-300x270.png 300w\" sizes=\"auto, (max-width: 193px) 100vw, 193px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">S<\/span><\/strong><span class=\"has-inline-color has-vivid-red-color\"><b>tem<\/b><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">s<\/span><\/strong> are the straight vertical lines that make up a letter, however, if that line drops below or above the x-height or like the letter &#8220;p&#8221; or &#8220;d&#8221; then they are called a descender or ascender respectively. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-1.png\" alt=\"\" class=\"wp-image-5998\" width=\"372\" height=\"153\"\/><\/figure><\/div>\n\n\n\n<p>Here,  the unhighlighted parts are the arm (angled up) and leg (angled down).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-2.png\" alt=\"\" class=\"wp-image-5999\" width=\"89\" height=\"88\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-2.png 225w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-2-150x150.png 150w\" sizes=\"auto, (max-width: 89px) 100vw, 89px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Spacing of Letters and Words<\/strong><\/h2>\n\n\n\n<p>Now that we know the parts of a letter, how do we fit them together? We do it in 3 big general ways. Leading, Kerning, and Tracking. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"479\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/LEADING-1.png\" alt=\"\" class=\"wp-image-6194\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/LEADING-1.png 568w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/LEADING-1-300x253.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">Leading<\/span><\/strong> is a term that comes from traditional letterpress. When creating a paragraph of text out of text blocks one would insert a thick slug of lead between lines to space sentences out vertically. <\/li><\/ul>\n\n\n\n<figure class=\"wp-block-gallery aligncenter columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"360\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Screen-Shot-2021-03-01-at-10.54.32-AM.png\" alt=\"\" data-id=\"6007\" data-full-url=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Screen-Shot-2021-03-01-at-10.54.32-AM.png\" data-link=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/02\/26\/lesson-3-typography\/screen-shot-2021-03-01-at-10-54-32-am\/\" class=\"wp-image-6007\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Screen-Shot-2021-03-01-at-10.54.32-AM.png 402w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Screen-Shot-2021-03-01-at-10.54.32-AM-300x269.png 300w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"330\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/A.Leading-2.jpg\" alt=\"\" data-id=\"6005\" data-full-url=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/A.Leading-2.jpg\" data-link=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/02\/26\/lesson-3-typography\/a-leading-2\/\" class=\"wp-image-6005\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/A.Leading-2.jpg 385w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/A.Leading-2-300x257.jpg 300w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><figcaption class=\"blocks-gallery-item__caption\"><br><\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Leading between letters that are too tight or too far apart can ruin a viewer&#8217;s ability to read text smoothly. Use tighter leading for Headers and looser leading for Body text. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/preview-gallery-Kerning-1.png\" alt=\"\" class=\"wp-image-6135\" width=\"530\" height=\"466\"\/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">Kerning<\/span><\/strong> is the spacing between letters within a word. You don&#8217;t want to adjust all the letters in a word at once. Highlight the two letters where you see an unusually too wide or too narrow of a gap and just adjust that area. They should optically look like they have equal spacing between all letters in a word.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-2-1.png\" alt=\"\" class=\"wp-image-6012\" width=\"193\" height=\"232\"\/><\/figure><\/div>\n\n\n\n<p><strong>BONUS TIP:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-3.png\" alt=\"\" class=\"wp-image-6013\" width=\"300\" height=\"313\"\/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">Ligatures<\/span><\/strong> are something that every designer should be aware of. In traditional letterpress, some letters when put together in a word would look extremely spaced out. To solve this problem some typeface had double letters like &#8220;ff&#8221; or &#8220;fl&#8221;. Depending on the font you use, you may have to play around with kerning these letter pairs much closer than they are at default.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/preview-gallery-Tracking-1.png\" alt=\"\" class=\"wp-image-6136\" width=\"534\" height=\"453\"\/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span class=\"has-inline-color has-vivid-red-color\">Tracking<\/span><\/strong> is the spacing of all the letters in a word at once uniformly. This needs to be used very sparingly as too much can make text difficult to read and quickly skewed. &#8220;Tracking is generally used to fill a space that\u2019s larger or smaller than currently suits the type\u2019s parameters or to make a single word seem airy and impressive.&#8221; &#8211; <a href=\"https:\/\/creativemarket.com\/blog\/whats-the-difference-between-leading-kerning-and-tracking\">credit<\/a><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-4.png\" alt=\"\" class=\"wp-image-6016\" width=\"526\" height=\"177\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-4.png 386w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/download-4-300x101.png 300w\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" \/><\/figure><\/div>\n\n\n\n<div style=\"height:68px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Classic fonts and why they work, when to use them<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What\u2019s so great about a font?<\/strong><\/h2>\n\n\n\n<p>Typeface first became an integral part of design during the arts and crafts movement, when William Morris developed bold, visually aesthetic, symmetric typefaces to be used by his printing press. Not soon after this, modernism encouraged designers to think more abstract and create decorative fonts with more flourishes. Now, fonts fall anywhere on the spectrum from strictly readable to decorative.&nbsp;<\/p>\n\n\n\n<p>Fonts are used to\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Make a brand or design memorable&nbsp;<\/li><li>Evoke an emotion from the viewer&nbsp;<\/li><li>Contribute to the ~vibe~ and era of the design<\/li><\/ul>\n\n\n\n<p>Consider how Netflix has chosen fonts based on their television shows. The Stranger Things font, ITC Benguiat, ticks all three of these boxes. The show\u2019s popularity has made this font instantly recognized and associated with the TV show. The font also fits in well with the 80s time period that Stranger Things is set in, as during this time, bold serif fonts were very popular. In fact, this font was inspired by the font Stephen King novels used for the author\u2019s name. These key features combined with the coloring and animation of the typeface evoke an emotion in the viewer, transporting them into a small town mystery set in the 80s.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-StrangerThings.jpeg\" alt=\"\" class=\"wp-image-6029\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-StrangerThings.jpeg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-StrangerThings-300x159.jpeg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-StrangerThings-768x408.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Even without looking into the specifics of why a font was chosen, we can see the impact that fonts have on brand aesthetic and recognition. Something about these brand logos seems a little off\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-ComicSans.jpeg\" alt=\"\" class=\"wp-image-6030\" width=\"429\" height=\"218\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-ComicSans.jpeg 315w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-ComicSans-300x152.jpeg 300w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/figure>\n\n\n\n<p>Fonts give a brand a sense of uniqueness and allow them to stand apart from other brands. If everything were the same font, you\u2019d lose this element of differentiation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Choosing a Typeface<\/strong><\/h2>\n\n\n\n<p>There are five basic styles of typefaces.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Serif<\/h3>\n\n\n\n<p>Serif typefaces have extended features at the ends of character strokes. These typefaces are seen in traditional mediums such as newspapers, books, and scholarly journals. Serif typefaces give a brand a sense of tradition, structure, and refinement. Some common examples of serif typefaces are Times New Roman, Georgia, and Garamond.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2-1024x576.jpg\" alt=\"\" class=\"wp-image-6060\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Serifs-2.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Sans Serif<\/h3>\n\n\n\n<p>Sans serif typefaces do not have any extensions on characters. These typefaces are seen most in digital mediums. Sans serif typefaces give a brand a sense of modernity, cleanliness, and approachability. Some common examples of sans serif typefaces are Arial, Helvetica, and Geneva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2-1024x576.jpg\" alt=\"\" class=\"wp-image-6061\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-SansSerifs-2.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Script<\/h3>\n\n\n\n<p>Script typefaces are designed to imitate cursive or regular handwriting. These typefaces are used in conjunction with more readable serif or sans serif typefaces, intended to be more decorative than functional. Some common examples of script typefaces are Edwardian script, Lucida Calligraphy, and Papyrus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6-1024x576.jpg\" alt=\"\" class=\"wp-image-6071\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Script-6.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Monospace<\/h3>\n\n\n\n<p>Monospace typefaces feature characters that all take up exactly the same horizontal space, and the spacing in between the characters is symmetric as well. These typefaces are most commonly used in coding but have been seen in graphic design websites and advertising. Examples of monospace typefaces include Courier, Lucida Console, and Monaco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3-1024x576.jpg\" alt=\"\" class=\"wp-image-6070\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Monospace-3.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Display<\/h3>\n\n\n\n<p>Display typefaces feature more eccentric, abstract character designs and are intended to be used at large sizes for headings. These typefaces are used everywhere &#8212; billboards, print ads, website headings &#8212; but never in body text. Some examples of display typefaces are Broadway, Curlz, and Algerian.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4-1024x576.jpg\" alt=\"\" class=\"wp-image-6054\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Display-4.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This designer provides a list of his 10 favorite fonts and 9 least favorite fonts, explaining what he likes and dislikes about fonts:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"10 Fonts You MUST USE As A Designer\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/iniUd-NZ-T8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Using Font Emphases<\/h4>\n\n\n\n<p>Font emphases are the variations (in boldness, serif, italics, etc.) of a typeface within its font family. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"360\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Questa.png\" alt=\"\" class=\"wp-image-6038\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Questa.png 720w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Questa-300x150.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p>A few things to keep in mind when using font emphases:<\/p>\n\n\n\n<p><strong>Use them with strong intent<\/strong>. If you\u2019re using an emphasis on specific words, use it sparingly. If you bold half of the text, that boldness loses its meaning.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1-1024x576.jpg\" alt=\"\" class=\"wp-image-6064\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases1-1.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>True emphases &gt; Software emphases. <\/strong>If your chosen font has an emphasis typeface, always use that emphasis as opposed to your software\u2019s emphasis (hitting CMD\/CTRL + B). This font emphasis was created for a reason and will pair better with the regular version of your font. This is particularly important with italics, as the software italicization will simply slant all of your letters, whereas the font italic version may curve the letters to be more script-like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1-1024x576.jpg\" alt=\"\" class=\"wp-image-6065\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases2-1.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Watch the contrast. <\/strong>Be cautious when pairing the heaviest version of a font with the lightest version. Too sharp of a contrast between font emphases will make it more difficult for your readers\u2019 eyes to adjust between words.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1-1024x576.jpg\" alt=\"\" class=\"wp-image-6055\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1-1024x576.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1-300x169.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1-768x432.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1-1536x864.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/Lesson3-Emphases3-1.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to pair fonts<\/strong><\/h2>\n\n\n\n<p>From 99 Designs:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Combining two different fonts from the same family generally won\u2019t provide any contrast and the design is likely to feel boring or weak. But different weights of the same font can be used in harmony\u2014like a sans serif in a demi-bold paired with a light italic. A combination like this will have a subtler effect than one that utilizes two totally different fonts.<br><br>In any good font pairing, there should only be one font with a lot of \u201cpersonality.\u201d So, don\u2019t go overboard. If your logo uses a beautiful handwriting font, stick to something classic and clean for your second one. Two wildly interesting fonts will feel disconnected and out of sync with one another.<br><br>Finally, pay attention to legibility. A classic serif or clean sans serif can both work for long paragraphs of text, while a heavy sans serif will be better suited for headlines.&nbsp;<\/p><\/blockquote>\n\n\n\n<p>Web tools can help suggest or generate pairings to get you started:<br><a href=\"https:\/\/www.reliablepsd.com\/ultimate-google-font-pairings\/\">The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)<\/a> &#8212; <strong>SOO COOL<\/strong><br><a href=\"https:\/\/fontjoy.com\/\">Font Joy Pairing Generator<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to download fonts<\/strong><\/h2>\n\n\n\n<p>There are many free and paid typefaces available for you to download.<\/p>\n\n\n\n<p>The easiest way is to activate fonts via <a href=\"https:\/\/fonts.adobe.com\/\">Adobe Fonts<\/a> (through your Adobe CC account). The fonts are downloaded to the cloud and will be available to you on any desktop so long as you&#8217;re logged in Adobe.<\/p>\n\n\n\n<p><a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a> is another great resource because these free fonts can easily be added to any web design code, even when they aren&#8217;t a &#8220;standard&#8221; web font like Arial, Georgia, etc.<\/p>\n\n\n\n<p><br>Other free font download sites include: <a href=\"https:\/\/www.dafont.com\/\">DaFont<\/a>, <a href=\"https:\/\/www.fontsquirrel.com\/\">Font Squirrel<\/a>, <a href=\"https:\/\/www.1001freefonts.com\/\">1001 Free Fonts<\/a><br>Type foundries, companies who design fonts, are another good resource though usually cost money: <a href=\"https:\/\/pangrampangram.com\/\">Pangram<\/a>, <a href=\"https:\/\/klim.co.nz\/retail-fonts\/\">Klim<\/a>, <a href=\"https:\/\/creativemarket.com\/\">Creative Market<\/a><\/p>\n\n\n\n<p><strong>Required: <\/strong>Download these must-have fonts for STA design work, plus any other fun ones you see. <em>These may already be installed on your LAITS machine.<\/em><br>Helvetica<br><a href=\"https:\/\/utexas.box.com\/s\/7h4yyprkymajgyx8iprrxh05gkmxo3gq\">Benton Sans <\/a><br><a href=\"https:\/\/utexas.box.com\/s\/7h4yyprkymajgyx8iprrxh05gkmxo3gq\">GT Sectra<\/a><br><a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\">Roboto<\/a> and <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto+Condensed\">Roboto Condensed<\/a> and <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto+Slab\">Slab<\/a><br><a href=\"https:\/\/fonts.adobe.com\/fonts\/futura-pt\">Futura<\/a><br><a href=\"https:\/\/fonts.google.com\/specimen\/Open+Sans\">Open Sans<\/a><br><a href=\"https:\/\/fonts.google.com\/specimen\/Montserrat\">Montserrat<\/a><br><a href=\"https:\/\/fonts.google.com\/specimen\/Libre+Baskerville\">Libre Baskerville<\/a><br><strong>Only download fonts from Google and Adobe on your LAITS machines.<\/strong><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Activity<\/h1>\n\n\n\n<p>This is a short one where we want to hear your thoughts on type so far.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>On Basecamp, <strong>share 2-3 font pairings<\/strong> you like and why you think they work. They can be from the resources linked, a pairing you saw in the wild, or a pairing you made yourself.<\/li><li><strong>Share a font for each typeface <\/strong> outside of the required list. Why did you pick them, and what kind of ~ vibe ~ do they give off? Maybe you have a project in mind that they&#8217;d work well for? Let us know!<\/li><li>Share any other thoughts, questions, or ideas you had while reading through this lesson. <\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fonts are an integral part of graphic design. Behind every bit of text that you see \u2013 on websites, billboards, and even your phone&#8217;s keyboard \u2013 lives a designer who spent time choosing the perfect font that fits the texts&#8217; &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/02\/26\/lesson-3-typography\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":758,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711,200721,1],"tags":[],"class_list":["post-5954","post","type-post","status-publish","format-standard","hentry","category-basic-trainings","category-design-fundamentals","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/758"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=5954"}],"version-history":[{"count":52,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5954\/revisions"}],"predecessor-version":[{"id":7337,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5954\/revisions\/7337"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=5954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=5954"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=5954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}