Web Typography

An introduction to some basic principles (with particular attention to micro-typography) and the current state of typography on the web. Talk given to students reading for an MA in Web Design & Content Planning at Greenwich University.

Transcript

1. Web Typography Richard Rutter Web Typography Evangelist, Fontdeck.com Talk Web Design 2012, University of Greenwich
2. We are all typographers!
3. informationarchitects.jp/en/the-web-is-all-about-typography-period/
8. From Mark Boulton’s “Designing layouts that think for you”
9. From Mark Boulton’s “Designing layouts that think for you”
10. From Mark Boulton’s “Designing layouts that think for you”
11. From Mark Boulton’s “Designing layouts that think for you”
12. From Mark Boulton’s “Designing layouts that think for you”
13. From Mark Boulton’s “Designing layouts that think for you”
14. Defaut line-height and margins
15. Rhythmic line-height and margins
16. "
17. "It's a flippin' pangolin!"
18. “It’s a flippin’ pangolin!”
19. opening double quote “ closing double quote ” opening single quote ‘ closing single quote ’ en dash – em dash — minus − multiplication × ellipsis … “ ” ‘ ’ – — − × …
20. wordpress.org/extend/plugins/wp-typography/
21. ffi
22. Calibri         0123abcdefigHJKlmnopQRStuv Cambria         0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv
23. Calibri         0123abcdefigHJKlmnopQRStuv Cambria         0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv fi
24. fine affluent
25. fine affluent
26. h1 { text-rendering: optimizeLegibility; }
27. marketplace.veer.com/merch/vpr0001260
28. Kerning on (top) and off (bottom)
29. Kerning table for Baskerville 1757
30. ¶∂
31. When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.” Elements of Typographic Style by Robert Bringhurst “
33. col.ly/s/842
34. Font Linking
35. @font-face { font-family: "Clarendon"; src: url("clarendon-nar-eb.woff"); }
36. Browser File types supported Internet Explorer 4 Embedded OpenType (EOT) Internet Explorer 9 EOT, WOFF Safari 3.1 TrueType, OpenType, SVG Safari 5 TrueType, OpenType, SVG, WOFF Opera 10 TrueType, OpenType Opera 11.10 TrueType, OpenType, WOFF Firefox 3.1 TrueType, OpenType Firefox 3.6 TrueType, OpenType, WOFF Chrome 4 TrueType, OpenType, SVG Chrome 6 TrueType, OpenType, SVG, WOFF Mobile Safari iOS 3.2 SVG Mobile Safari iOS 4.2 SVG, TTF Mobile Safari iOS 5 SVG, TTF, WOFF Browser support for Webfonts
37. @font-face { font-family: "Clarendon Narrow Extrabold"; src: url(clarendon-nar-eb.eot); src: url(clarendon-nar-eb.eot?iefix) format(eot), url(clarendon-nar-eb.woff) format(woff), url(clarendon-nar-eb.ttf) format(truetype), url(clarendon-nar-eb.svg#font) format(svg); font-weight: 800; }
38. ´
39. astonmartin.com
40. avios.com
41. www.lannasport.se
42. stuff.tv
43. tradeshift.com/enterprise
44. Ultra light Light Regular Bold Black Ultra black Adelle Adelle Adelle Adelle Adelle Adelle
45. Light Regular SemiBold Bold ExtraBold Heavy Adelle Adelle Adelle Adelle Adelle Adelle
46. h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: bold; }
47. h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: 200; }
48. 100 Ultra Light, Extra Light 200 Light, Thin 300 Book 400 Normal, Regular 500 Medium 600 Demi Bold, Semi Bold 700 Bold 800 Black, Extra Bold 900 Ultra Bold, Fat, Heavy Values for font-weight property
49. www.truphone.com
50. citizenmusician.org
51. nikebetterworld.com
52. fontdeck.com/typefaces/nonlatin/greek
53. fontdeck.com/font/lagoon/regular
54. fontdeck.com/font/digohweli/regular
55. ff fl ffl fi ffi ff fl ffl fi ffi fb fj fk ti ty
57. QUICHE ch stf ck OO I E
59. affloat fine fjords a oa n fjords
60. ✂ ajestic
61. Quiz game key !ui" #$m% &%'
62. 0123456789 
63. Lining Old Style Proportional 409,280 , Proportional 367,112 , Proportional 155,068 , Proportional 171,792 , Tabular , , Tabular , , Tabular , , Tabular , ,
64. 1 ½
65. Final space shu le.
66. Final NASA space shu le.
67. Final NASA space shu le.
68. Final space shu le.
69. N
70. font-feature-settings
71. h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; }
72. h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; }
73. h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; -webkit-font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; }
74. In the Government formed in response to a perceived threat om the ’s Sputnik program. absorbed the -year-old , along with the and many of ’s early space programs.
75. Magneta Expert Subset
76. <p>In <span class="numbers">1958</span> the <abbr class="smallcaps">US</abbr> Government formed <abbr class="smallcaps">NASA</abbr> in response to a perceived threat from the <abbr class="smallcaps">USSR</abbr>’s Sputnik program. <abbr class="smallcaps">NASA</abbr> absorbed the <span class="numbers">46</abbr>-year-old <abbr class="smallcaps">NACA</abbr>, along with the <abbr class="smallcaps">JPL</abbr> and many of <abbr class="smallcaps">ARPA</abbr>’s early space programs.</p>
77. p { font-family: "Magneta Book", Georgia, serif; } .numbers, .smallcaps { font-family: "Magneta Book Subset", "Magneta Book", Georgia, serif; }
79. fontdeck.com/typeface/magnetaexpertsubset
80. 2012.ampersandconf.com
81. fontdeck.com/typeface/trilogyfatfaceexpertsubset
82. ele- phant-
83. Hyphenation in the Gutenberg Bible
85. p { hyphens: auto; }
86. p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
88. ˇ
89. Richard Rutter, Fontdeck.com @clagnut http://speakerdeck.com/u/clagnut/