Better Letters

A brief history of screen typography, or how designers broke the web in the name of ‘good’ typography. Presented to Summer of Tech students, 1 August 2015.

Transcript

1. A brief history of screen typography. BETTER LETTERS
2. Or: how designers broke the web in
 the name of ‘good’ typography. BETTER LETTERS
6. Better Letters A brief history of screen typography. FIRST, THERE
 WAS THE WEB
8. <h1>My Title</h1> <font face="" size="" color="">My text.</font> <img src="mytext.gif">
9. Better Letters A brief history of screen typography. THEN,
 DESIGNERS
 RUINED IT
10. Cascading Style Sheets December 1996
11. <h1>My Title</h1> h1 { text-indent: –100em; overflow: hidden; background: url('mytext.gif'); }
12. My Title
13. My Title text-indent: –100em; overflow: hidden;
14. text-indent: –100em; overflow: hidden;
15. My Title background: url('mytext.gif');
16. Better Letters A brief history of screen typography. WHAT ABOUT?
17. Scalable Inman Flash Replacement sIFR
18. ‘While sIFR gives us better typography today, it is clearly not the solution for the next 20 years.’ Mike Davidson
19. Fonts for the People Cufón
20. ‘Most font replacement techniques,
 including my own, were meant as
 stepping stones to @font-face.’ Simo Kinnunen
21. Better Letters A brief history of screen typography. WAIT A MINUTE
22. Supporting EOT since 1997 Internet Explorer 4
23. Better Letters A brief history of screen typography. SORRY,
 FOILED AGAIN!
24. Late 2007 @font-face
25. Better Letters A brief history of screen typography. HOPE YOU LIKE ACRONYMS
26. EOT TTF OTF SVG WOFF WOFF2 Formats
27. Real fonts! Standards compliant Legit (if licensed) More choice For
28. Better Letters A brief history of screen typography. ALL IS FORGIVEN
29. Rendering File size Licensing Against
36. Better Letters A brief history of screen typography. SHOW ME SOME CODE
37. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
38. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
39. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
40. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
41. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Regular.eot') format('embedded-opentype'), src: url('PitchWeb-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
42. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }
43. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }
44. @font-face { font-family: 'PitchWeb-Regular'; src: url('PitchWeb-Italic.eot') format('embedded-opentype'), src: url('PitchWeb-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }
45. Embedding CSS JavaScript Webfont Loader
46. Better Letters A brief history of screen typography. LET’S GO SHOPPING
47. Self-hosted
49. Hoefler & Co. Self-hosted
51. Hoefler & Co. Commercial Type Self-hosted
53. Hoefler & Co. Commercial Type Klim Type Foundry Self-hosted
55. Hoefler & Co. Commercial Type Klim Type Foundry LineTo Self-hosted
56. Self-hosted FontShop MyFonts Fontspring Fontstand* Hoefler & Co. Commercial Type Klim Type Foundry LineTo
58. Middlemen Typekit Fontdeck Webtype Google Fonts Fonts.com
59. Better Letters A brief history of screen typography. BE
 RESPONSIBLE
61. = 2.25 MB
62. Licensing Usually by weight Priced by visitors or page views Options for web and apps Plan ahead!
64. Better Letters A brief history of screen typography. TYPE TIPS
65. ‘Web design is 95% typography.’ Oliver Reichenstein October 2006
66. Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. "Shuffle" confirms officer's son - 6x4 BY NATHANIEL HORNBLOWER Example text
67. 1. Leading & Tracking Or: line-height & letter-spacing
68. line-height: 1; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.
69. line-height: 1.4; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.
70. letter-spacing: 0; BY NATHANIEL HORNBLOWER
71. letter-spacing: 0.2em; BY NATHAN IEL H ORNBLOWER
72. 2. Measure
73. No max-width set Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.
74. max-width: 27.5em; Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle.
75. 3. Quotes & Hyphens
76. "Shuffle" confirms officer's son - 6x4
77. Straight quotes "Shuffle" confirms officer's son - 6x4
78. Curly/smart quotes “Shuffle” confirms officer’s son - 6x4
79. Curly/smart quotes “Shuffle” confirms officer’s son - 6x4 &ldquo; &rdquo; &rsquo;
80. SmartQuotesForSmartPeople.com
81. Hyphen “Shuffle” confirms officer’s son - 6x4
82. En dash “Shuffle” confirms officer’s son – 6x4 &ndash;
83. Em dash “Shuffle” confirms officer’s son — 6x4 &mdash;
84. Letter ‘x’ “Shuffle” confirms officer’s son — 6x4
85. Multiplication sign “Shuffle” confirms officer’s son — 6×4 &times;
86. “Shuffle” confirms officer’s son — 6×4
87. 4. Ligatures
88. “Shuffle” confirms officer’s son — 6×4
89. Shuffle confirms officer
90. Shuffle confirms officer No ligatures
91. Shuffle confirms officer Common ligatures
92. 5. Display vs. Text
93. Shuffle Text face
94. Shuffle Display face Shuffle
95. Sh Display face Sh Text face
96. Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. "Shuffle" confirms officer's son - 6x4 BY NATHANIEL HORNBLOWER Example text
97. Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. BY NATHANIEL HORNBLOWER “Shuffle” confirms officer’s son — 6×4
98. Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle, mah home g-dizzle tempizzle stuff. Izzle pellentesque nibh yo mamma fo shizzle. Dang yippiyo tortizzle. “Shuffle” confirms officer’s son — 6×4 BY NATHAN IEL H ORNBLOWER
99. “Shuffle” confirms officer’s son — 6×4 BY NATHAN IEL H ORNBLOWER Lorizzle ipsizzle shizzle my nizzle crocodizzle sit amizzle, yo adipiscing that's the shizzle. Nullizzle pot velizzle, gizzle volutpizzle, suscipizzle crunk, gravida vizzle, crazy. Pellentesque hizzle pot. Sed erizzle. Shiznit izzle dolizzle mammasay mammasa mamma oo sa things tempizzle crunk. Mauris pellentesque nibh et izzle. That's the shizzle in tortor. Pellentesque eleifend rhoncizzle break it down. In hizzle shizzle my nizzle crocodizzle platea. Gangsta at get down get down crunk fo shizzle mah nizzle fo rizzle.
100. Better Letters A brief history of screen typography. THE END.