Typography Fundamentals
30 likes9,893 views
The document discusses typography fundamentals, including: - The anatomy and classification of letterforms - Factors that affect readability of text like size, line height, measure, alignment, tracking, and kerning - Methods for creating a typographic hierarchy using scale, color, value, style, placement - Considerations for choosing typefaces like available features, pairing typefaces, and personality conveyed - Examples of well-designed websites that demonstrate good typography principles - A section on implementing type on the web and the state of web typography
Typography Fundamentals
- 1. Typography Fundamentals Presented by Steve Hickey — fresh tilled soil fresh tilled soil Typography Fundamentals
- 2. Objective My objectives today are to impart a basic understanding of the fundamental rules of good typography and to show everyone how they fit into user interface and web product design. fresh tilled soil Typography Fundamentals
- 3. Letterform, Text, Hierarchy & CHoice 01 Typographic building blocks fresh tilled soil Typography Fundamentals
- 4. Letterform — Anatomy ligature terminal Bahpfesff stem ascender counter crossbar spine finial bowl serif descender fresh tilled soil Typography Fundamentals
- 5. Letterform — Anatomy ascender height cap height Bxhy overhang x height baseline descender height fresh tilled soil Typography Fundamentals
- 6. Letterform — Classification Aao Aao Aao humanist serif — Garamond fresh tilled soil transitional serif — Baskerville modern serif — Bodoni Typography Fundamentals
- 7. Letterform — Classification Aao Aao Aao humanist sans-serif — Gill Sans fresh tilled soil transitional sans-serif — Helvetica geometric sans-serif — Futura Typography Fundamentals
- 8. Letterform — Punctuation -–— “” '' ˝ hyphen smart quotes fresh tilled soil en dash The sentence spanned lines 2–8 in an unbroken stream — onward it swept. Hyphens are En dashes are – Em dashes are — em dash dumb quotes primes “Look at Donny’s pet! An 8´ 7˝ tall ostrich!” Here’s a second line so that I can make a point. Double smart quotes are “ and ” Single smart quotes are ‘ and ’ Primes are ′ ! Nobody likes dumb quotes. They’re called dumb for a reason. Typography Fundamentals
- 9. Text — Size Size has the greatest effect on readability of text and must be considered carefully. 20px text A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. /* different units for setting type size */ ! p { font-size: 1em; } ! 28px text A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { font-size: 100%; } ! p { font-size: 16px; } ! 36px text fresh tilled soil A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { font-size: 16pt; } Typography Fundamentals
- 10. Text — Line-Height Line-height is the distance from baseline to baseline in a block of text. 28px text 1em line-height A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. /* line-height as multiple of text size */ ! p { font-size: 1em; line-height: 1.6; } 28px text 1.2em line-height fresh tilled soil A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. Typography Fundamentals
- 11. Text — Measure Measure is calculated in characters or words per line in a paragraph. approx. 60 characters per line A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. /* width of paragraph set by container */ ! .container { width: 66%; } ! .container p { approx. 30 characters per line fresh tilled soil A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. font-size: 1em; line-height: 1.6; width: 100%; } Typography Fundamentals
- 12. Text — Alignment Text alignment has multiple options that affect readability. left aligned A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. right aligned A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. /* default is left aligned */ ! p.text-align-left { text-align: left; } ! p.text-align-right { text-align: right; } ! center aligned A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. justified A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p.text-align-center { text-align: center; } ! p.text-align-justified { text-align: justified; } fresh tilled soil Typography Fundamentals
- 13. Text — Tracking Tracking is an adjustment of the space between all characters in a block of text. “Anyone who would letterspace the lowercase would shag sheep.” text with normal tracking A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. Frederic Goudy /* all caps and letterspaced headers */ ! h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.25em; } text with 10% tracking fresh tilled soil A worker climbs to the top of the crate. The search lig hts are tra ine d on the door. The riflemen throw the bolts on their rifles and crack their stun g uns, sending arcs of current cracking throug h the a ir. Typography Fundamentals
- 14. Text — Kerning Kerning is an adjustment of the space between two characters. un-kerned pairing Tyson /* ligatures/kerning in some browsers */ ! h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } ! /* control spacing with Kerning.JS */ kerned pairing fresh tilled soil Tyson ! #kern-me { -letter-kern: 1px 1px 0 0 0 1px 0 2px; } Typography Fundamentals
- 15. Text — How To Make It Sing All of these traits must be balanced in a block of text. There are no absolute rules as to what works, but there are guidelines. Font-size: Start around 16px/1em for web type. It needs to be larger than print. Line-Height: Use a multiple of 1.3 to 1.6 times the font size. Measure: Kerning: Larger text makes errors more obvious, requiring custom kerning. Tracking: Use default in the lowercase, space it out a bit in the uppercase. Alignment: fresh tilled soil Use 50 to 75 characters or 12 words per line. Left-aligned, or justified if you have a high level of control. Typography Fundamentals
- 16. Text — How To Make It Sing A good block of text looks grey if you un-focus your eyes a bit. fresh tilled soil Typography Fundamentals
- 17. Hierarchy — Scale Scale differences are the quickest way to create an obvious hierarchy. 28px heading 28px text A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. body { font-size: 100%; } /* usually 16px */ ! p { font-size: 1.75em; } /* 28px @ 100% */ ! h1 { 45px heading 28px text fresh tilled soil A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. font-size: 2.8125em; } /* 45px @ 100% */ ! h2 { font-size: 2.625em; } /* 42px @ 100% */ Typography Fundamentals
- 18. Hierarchy — Using a Modular Scale A modular scale can help you create a full system of typographic hierarchy. Heading Level 1 24px @ 1:1.618 29px @ 1:1.618 63px heading Heading Level 2 generated by http://modularscale.com 47px heading Heading Level 3 39px heading Heading Level 4 29px heading Heading Level 5 76px heading 24px text 29px line-height ! A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. body { font-size: 100%; } /* usually 16px */ ! p { font-size: 1.5em; } /* 24px @ 100% */ ! h1 { font-size: 4.75em; } /* 76px @ 100% */ ! h2 { font-size: 3.9375em; } /* 63px @ 100% */ fresh tilled soil Typography Fundamentals
- 19. Hierarchy — Color Color changes are another way to establish a difference in hierarchy. same color as text contrasting color fresh tilled soil A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { color: black; } ! h1, h2, h3, h4, h5, h6 { color: blue; } A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. Typography Fundamentals
- 20. Hierarchy — Value Changing the value, or relative lightness/ darkness, will set two elements apart. same value as text contrasting value fresh tilled soil A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { color: rgb(128, 128, 128); } ! h1, h2, h3, h4, h5, h6 { color: rgb(0, 0, 0); } A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. Typography Fundamentals
- 21. Hierarchy — Style A different style is an effective way to set visual distinctiveness. same style as text contrasting style fresh tilled soil A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { font-weight: normal; } ! h1, h2, h3, h4, h5, h6 { font-weight: bold; } A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. Typography Fundamentals
- 22. Hierarchy — Placement The placement of text also helps to determine hierarchy. same alignment as text contrasting placement A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. p { margin: 0 0 1em 0; } ! h1, h2, h3, h4, h5, h6 { margin: 0 0 2em -1em; } A Heading For This Text Block A worker climbs to the top of the crate. The search lights are trained on the door. The riflemen throw the bolts on their rifles and crack their stun guns, sending arcs of current cracking through the air. fresh tilled soil Typography Fundamentals
- 23. Choice — Features The first step in choosing a typeface is to make sure it has all the features you need for what a project demands. ! High-quality typefaces feature a complete character set, a variety of weights and styles, several types of numbers, and can even go as far as supporting different languages. fresh tilled soil Typography Fundamentals
- 24. Choice — Features Some typefaces have extensive style options. Helvetica Neue Bold Helvetica Neue Bold Italic Helvetica Neue Medium Helvetica Neue Italic Helvetica Neue Regular Helvetica Neue Light Italic Helvetica Neue Light Helvetica Neue Ultralight Italic Helvetica Neue Ultralight fresh tilled soil Typography Fundamentals
- 25. Choice — Features Others have multiple types of numbers, which can be vital for certain projects. monospaced, uppercase monospaced, lowercase fresh tilled soil proportionally spaced, uppercase proportionally spaced, lowercase Typography Fundamentals
- 26. Choice — Features Not all projects call for just a Latin language character set. abcdefghijklmnopqrstuvwxyz latin абвгдеёжзийклмнопрстуфхцчшщъыьэюя cyrillic αβγδεζηθικλμνξοπρσςτυφχψω greek fresh tilled soil Typography Fundamentals
- 27. Choice — Pairing When pairing typefaces look for similar forms, but also look to create some contrast between them. If they’re too similar then there’s no point in using them both. the quick brown fox jumped over the lazy Bodoni with Futura the quick brown fox jumped over the lazy Helvetica with Garamond the quick brown fox jumped over the lazy Baskerville with Univers fresh tilled soil Typography Fundamentals
- 28. Choice — Personality The character of the typeface you use can completely change a word’s meaning. sophisticated sophisticated classy classy sweet s w e e t fresh tilled soil Typography Fundamentals
- 29. Examples — Minimalissimo.com fresh tilled soil Typography Fundamentals
- 30. Examples — WalkaboutNYC.com fresh tilled soil Typography Fundamentals
- 31. Examples — Mailchimp.Com/2012 fresh tilled soil Typography Fundamentals
- 32. Examples — Hlvticons.ch fresh tilled soil Typography Fundamentals
- 33. Examples — ElliotJayStocks.com fresh tilled soil Typography Fundamentals
- 34. Examples — co-opbranding.com fresh tilled soil Typography Fundamentals
- 35. Examples — blackestate.co.nz fresh tilled soil Typography Fundamentals
- 36. Implementing Type On The Web 02 The good, the bad & the ugly fresh tilled soil Typography Fundamentals
- 37. The State of Web Type The state of typography on the web is, in a word, frustrating. Many of the things I just showed you either can’t be done, or are very hard to do. (you’re welcome) fresh tilled soil Typography Fundamentals
- 38. The State of Web Type But they’re very important to know. Why? 1. You need to be able to work around your own limitations. 2.These techniques are creeping into specifications and plugins. 3.Many of your competitors will be using them to improve their products. fresh tilled soil Typography Fundamentals
- 39. The State of Web Type Print-quality type is becoming possible on the web. Embrace it or fall behind. fresh tilled soil Typography Fundamentals
- 40. Serving Web Fonts — Defaults There are certain fonts you can reasonably expect to be installed on most devices. To cover your bases you call them with a font stack in your css. h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; } ! p { font-family: 'Times New Roman', Georgia, serif; } fresh tilled soil Typography Fundamentals
- 41. Serving Web Fonts — Defaults These fonts are very basic. They work, and they’re consistent, but they aren’t great. Times New Roman Georgia Helvetica / Arial! Verdana fresh tilled soil Typography Fundamentals
- 42. Serving Web Fonts — @font-face and font Services To get something more interesting you can: • store font files on your site and use @font-face in css. • use a font service like Typekit or Google Web Fonts. fresh tilled soil Typography Fundamentals
- 43. Serving Web Fonts — @font-face I put together a SASS mixin for bulletproof @font-face that you can find here: http://codepen.io/cfarm/pen/arBLb @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compatability Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#MyWebFont') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; } ! p { font-family: 'MyWebFont', Helvetica, Arial, sans-serif; } Derived from this research http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ fresh tilled soil Typography Fundamentals
- 44. Serving Web Fonts — Font Services Typekit and Google Web Fonts allow you to serve a variety of fonts from their servers with a snippet of code in your html. <!-- Typekit embed code --> <script type="text/javascript" src="//use.typekit.net/ssj0eha.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> ! <!-- Google Web Fonts embed code --> <link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'> fresh tilled soil Typography Fundamentals
- 45. Serving Web Fonts — Font Services Then, you just add the typeface’s name to your font stacks in your css. h1, h2, h3, h4, h5, h6 { /* Google Web Fonts */ font-family: 'Gafata', Helvetica, Arial, sans-serif; } ! p { /* Typekit */ font-family: 'source-sans-pro', source-sans-pro, Arial, sans-serif; } fresh tilled soil Typography Fundamentals
- 46. Resources 03 The good, the bad & the ugly fresh tilled soil Typography Fundamentals
- 47. Resources Thinking With Type thinkingwithtype.com = fresh tilled soil Typography Fundamentals
- 48. Resources The Elements of Typographic Style webtypography.net = fresh tilled soil Typography Fundamentals
- 49. Resources practicaltypography.com fresh tilled soil Typography Fundamentals
- 50. Resources ia.net/blog fresh tilled soil Typography Fundamentals