Typography Fundamentals

Transcript

1. Typography Fundamentals Presented by Steve Hickey — fresh tilled soil fresh tilled soil Typography Fundamentals
2. fresh tilled soil Typography Fundamentals 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.
3. fresh tilled soil Typography Fundamentals 01 Letterform, Text, Hierarchy & CHoice Typographic building blocks
4. fresh tilled soil Typography Fundamentals Letterform — Anatomy Bahpfesff stem crossbar bowl serif ascender descender counter terminal finial spine ligature
5. fresh tilled soil Typography Fundamentals Letterform — Anatomy Bxhy descender height baseline x height cap height ascender height overhang
6. fresh tilled soil Typography Fundamentals Letterform — Classification Aao Aao Aao modern serif — Bodoni transitional serif — Baskerville humanist serif — Garamond
7. fresh tilled soil Typography Fundamentals Letterform — Classification Aao Aao geometric sans-serif — Futura transitional sans-serif — Helvetica humanist sans-serif — Gill Sans Aao
8. fresh tilled soil Typography Fundamentals Letterform — Punctuation -–— hyphen en dash em dash The sentence spanned lines 2–8 in an unbrok- en stream — onward it swept. “” '' ˝ smart quotes dumb quotes “Look at Donny’s pet! An 8´ 7˝ tall ostrich!” primes Here’s a second line so that I can make a point. Hyphens are - En dashes are – Em dashes are — Double smart quotes are “ and ” Single smart quotes are ‘ and ’ Primes are ′ ! Nobody likes dumb quotes. They’re called dumb for a reason.
9. fresh tilled soil Typography Fundamentals Text — Size Size has the greatest effect on readability of text and must be considered carefully. 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. 28px text /* different units for setting type size */ ! p { font-size: 1em; } ! p { font-size: 100%; } ! p { font-size: 16px; } ! p { font-size: 16pt; } 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. 36px 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. 20px text
10. fresh tilled soil Typography Fundamentals Text — Line-Height Line-height is the distance from baseline to baseline in a block of 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. 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. 28px text 1em line-height 28px text 1.2em line-height /* line-height as multiple of text size */ ! p { font-size: 1em; line-height: 1.6; }
11. fresh tilled soil Typography Fundamentals Text — Measure Measure is calculated in characters or words per line in a paragraph. 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. 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. approx. 60 characters per line approx. 30 characters per line /* width of paragraph set by container */ ! .container { width: 66%; } ! .container p { font-size: 1em; line-height: 1.6; width: 100%; }
12. fresh tilled soil Typography Fundamentals Text — Alignment Text alignment has multiple options that affect readability. left aligned center aligned right aligned 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. 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. 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. 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; } ! p.text-align-center { text-align: center; } ! p.text-align-justified { text-align: justified; }
13. fresh tilled soil Typography Fundamentals Text — 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. 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. text with normal tracking text with 10% 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.” Frederic Goudy /* all caps and letterspaced headers */ ! h1, h2, h3, h4, h5, h6 { text-transform: uppercase; letter-spacing: 0.25em; }
14. fresh tilled soil Typography Fundamentals Text — Kerning un-kerned pairing Tyson Tyson kerned pairing Kerning is an adjustment of the space 
 between two characters. /* ligatures/kerning in some browsers */ ! h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } ! /* control spacing with Kerning.JS */ ! #kern-me { -letter-kern: 1px 1px 0 0 0 1px 0 2px; }
15. fresh tilled soil Typography Fundamentals 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: Use 50 to 75 characters or 12 words per line. 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: Left-aligned, or justified if you have a high level of control.
16. fresh tilled soil Typography Fundamentals Text — How To Make It Sing A good block of text looks grey if you un-focus your eyes a bit.
17. fresh tilled soil Typography Fundamentals Hierarchy — Scale Scale differences are the quickest way to create an obvious hierarchy. 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. 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. 28px heading 28px text 45px heading 28px text A Heading For This Text Block A Heading For This Text Block body { font-size: 100%; } /* usually 16px */ ! p { font-size: 1.75em; } /* 28px @ 100% */ ! h1 { font-size: 2.8125em; } /* 45px @ 100% */ ! h2 { font-size: 2.625em; } /* 42px @ 100% */
18. fresh tilled soil Typography Fundamentals Hierarchy — Using a Modular Scale A modular scale can help you create a full system of typographic hierarchy. 24px @ 1:1.618
 29px @ 1:1.618 generated by http://modularscale.com 76px heading Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 ! 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. 63px heading 47px heading 39px heading 29px heading 24px text 29px line-height 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% */
19. fresh tilled soil Typography Fundamentals Hierarchy — Color Color changes are another way to establish a difference in hierarchy. 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. 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. same color as text contrasting color A Heading For This Text Block A Heading For This Text Block p { color: black; } ! h1, h2, h3, h4, h5, h6 { color: blue; }
20. fresh tilled soil Typography Fundamentals Hierarchy — Value Changing the value, or relative lightness/ darkness, will set two elements apart. 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. 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. same value as text contrasting value A Heading For This Text Block A Heading For This Text Block p { color: rgb(128, 128, 128); } ! h1, h2, h3, h4, h5, h6 { color: rgb(0, 0, 0); }
21. fresh tilled soil Typography Fundamentals Hierarchy — Style A different style is an effective way to set visual distinctiveness. 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. 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. same style as text contrasting style A Heading For This Text Block A Heading For This Text Block p { font-weight: normal; } ! h1, h2, h3, h4, h5, h6 { font-weight: bold; }
22. fresh tilled soil Typography Fundamentals Hierarchy — Placement The placement of text also helps to determine hierarchy. 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. 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. same alignment as text contrasting placement A Heading For This Text Block A Heading For This Text Block p { margin: 0 0 1em 0; } ! h1, h2, h3, h4, h5, h6 { margin: 0 0 2em -1em; }
23. fresh tilled soil Typography Fundamentals 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.
24. fresh tilled soil Typography Fundamentals Choice — Features Some typefaces have extensive style options. Helvetica Neue Bold Helvetica Neue Medium Helvetica Neue Regular Helvetica Neue Light Helvetica Neue Ultralight Helvetica Neue Bold Italic Helvetica Neue Italic Helvetica Neue Light Italic Helvetica Neue Ultralight Italic
25. fresh tilled soil Typography Fundamentals Choice — Features Others have multiple types of numbers, which can be vital for certain projects. monospaced, uppercase monospaced, lowercase proportionally spaced, uppercase proportionally spaced, lowercase
26. fresh tilled soil Typography Fundamentals Choice — Features Not all projects call for just a Latin language character set. latin abcdefghijklmnopqrstuvwxyz cyrillic greek абвгдеёжзийклмнопрстуфхцчшщъыьэюя αβγδεζηθικλμνξοπρσςτυφχψω
27. fresh tilled soil Typography Fundamentals 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. Bodoni with Futura the quick brown fox jumped over the lazy Helvetica with Garamond Baskerville with Univers the quick brown fox jumped over the lazy the quick brown fox jumped over the lazy
28. fresh tilled soil Typography Fundamentals Choice — Personality The character of the typeface you use can completely change a word’s meaning. sophisticated sophisticated classy classy sweet sweet
29. fresh tilled soil Typography Fundamentals Examples — Minimalissimo.com
30. fresh tilled soil Typography Fundamentals Examples — WalkaboutNYC.com
31. fresh tilled soil Typography Fundamentals Examples — Mailchimp.Com/2012
32. fresh tilled soil Typography Fundamentals Examples — Hlvticons.ch
33. fresh tilled soil Typography Fundamentals Examples — ElliotJayStocks.com
34. fresh tilled soil Typography Fundamentals Examples — co-opbranding.com
35. fresh tilled soil Typography Fundamentals Examples — blackestate.co.nz
36. fresh tilled soil Typography Fundamentals 02 Implementing Type On The Web The good, the bad & the ugly
37. fresh tilled soil Typography Fundamentals 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)
38. fresh tilled soil Typography Fundamentals 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.
39. fresh tilled soil Typography Fundamentals The State of Web Type Print-quality type is becoming possible on the web. Embrace it or fall behind.
40. fresh tilled soil Typography Fundamentals 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; }
41. fresh tilled soil Typography Fundamentals 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
42. fresh tilled soil Typography Fundamentals 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.
43. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals 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/
44. fresh tilled soil Typography Fundamentals 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'>
45. fresh tilled soil Typography Fundamentals 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; }
46. fresh tilled soil Typography Fundamentals 03 Resources The good, the bad & the ugly
47. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals Resources Thinking With Type thinkingwithtype.com =
48. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals Resources The Elements of Typographic Style webtypography.net =
49. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals Resources practicaltypography.com
50. fresh tilled soil Typography Fundamentals fresh tilled soil Typography Fundamentals Resources ia.net/blog