Typo London 2012 - A Renaissance in Web Typography

Web fonts are enabling incredible new design. In the last few years, we’ve seen an explosion of great work fueled by these new tools. Web fonts are improving the web by allowing a broader range of expressiveness. As designers, we can finally access the full spectrum of typographic emotion without sacrificing accessibility, maintainability, and performance. In this talk, we’ll look at examples of great work, explore the history of typography on the web, dig into @font-face and CSS, and discuss some of the unique constraints and challenges of using web fonts.

Transcript

1. a RENAISSANCE in WEB TYPOGRAPHY Thursday, October 18, 12
2. #typo12 #webtype @smcbride Thursday, October 18, 12
3. SEAN McBRIDE Engineer & Web Developer User Experience Web Developer Thursday, October 18, 12
4. ? Thursday, October 18, 12
5. Let’s look at some GREAT WORK Thursday, October 18, 12
6. Thursday, October 18, 12
7. Thursday, October 18, 12
8. Thursday, October 18, 12
9. Thursday, October 18, 12
10. Thursday, October 18, 12
11. Thursday, October 18, 12
12. Thursday, October 18, 12
13. Thursday, October 18, 12
14. Thursday, October 18, 12
15. Thursday, October 18, 12
16. http://lostworldsfairs.com/moon/ http://narrowdesign.com/ http://diehlgroup.com/ http://www.lbvd.com/ http://impressapenguin.com/ http://evening-edition.com/ http://shapeofdesignbook.com/introduction.html http://www.offscreenmag.com/ http://www.nytimes.com/pages/opinion/index.html http://www.newyorker.com/ Thursday, October 18, 12
17. But it wasn’t ALWAYS this way... Thursday, October 18, 12
18. 600 years of typography Thursday, October 18, 12
19. thousands of fonts Thursday, October 18, 12
20. 1993: no fonts Thursday, October 18, 12
21. 2008: 18 fonts Thursday, October 18, 12
22. Thursday, October 18, 12
23. Thursday, October 18, 12
24. Thursday, October 18, 12
25. Thursday, October 18, 12
26. Is there a BETTER way? Thursday, October 18, 12
27. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Thursday, October 18, 12
28. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style: normal; } Thursday, October 18, 12
29. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; } Thursday, October 18, 12
30. Works in modern browsers today! Thursday, October 18, 12
31. GREAT! End of story? Thursday, October 18, 12
32. No Thursday, October 18, 12
33. How is type on the web DIFFERENT than type in print? Thursday, October 18, 12
34. Licensing Desktop Web Thursday, October 18, 12
35. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF Thursday, October 18, 12
36. EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE 9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome Thursday, October 18, 12
37. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Thursday, October 18, 12
38. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE 5-8 */ src: local('☺'), /* sneaky trick for IE */ url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */ url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */ url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */ } Thursday, October 18, 12
39. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE9 Compat Modes */ src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */ url('awesome-font.woff') format('woff'), /* Modern Browsers */ url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ } Thursday, October 18, 12
40. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } Thursday, October 18, 12
41. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } http://use.typekit.net/abc1def.js Thursday, October 18, 12
42. Rendering Thursday, October 18, 12
43. Thursday, October 18, 12
44. Thursday, October 18, 12
45. Thursday, October 18, 12
46. CoreText DirectWrite GDI + ClearType GDI + Standard Thursday, October 18, 12
47. Thursday, October 18, 12
48. Page Size ??? Kb Thursday, October 18, 12
49. Thursday, October 18, 12
50. Fallback fonts Aa Aa Thursday, October 18, 12
51. Thursday, October 18, 12
52. Thursday, October 18, 12
53. Hosted web font SERVICES help to make it easier Thursday, October 18, 12
54. Thursday, October 18, 12
55. Thursday, October 18, 12
56. But, challenges remain. Thursday, October 18, 12
57. On the web, we build LIVING THINGS instead of static artifacts Thursday, October 18, 12
58. The web brings new RULES & POSSIBILITIES that we must respond to Thursday, October 18, 12
59. Ideas Forms Thursday, October 18, 12
60. Jonathan Hoefler Pivot: AIGA Design Conference 15 October 2011 Thursday, October 18, 12
61. Idea DESIGN SYSTEM Form Thursday, October 18, 12
62. The NY Times DESIGN SYSTEM DESIGN SYSTEM Thursday, October 18, 12
63. Thursday, October 18, 12
64. Thursday, October 18, 12
65. Thursday, October 18, 12
66. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form Thursday, October 18, 12
67. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ? Thursday, October 18, 12
68. Thursday, October 18, 12
69. Thursday, October 18, 12
70. Thursday, October 18, 12
71. Thursday, October 18, 12
72. Thursday, October 18, 12
73. @font-face Thursday, October 18, 12
74. from TypeTogether Thursday, October 18, 12
75. from Phil’s Fonts / Darden Thursday, October 18, 12
76. Thursday, October 18, 12
77. responsive design Thursday, October 18, 12
78. responsive design “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.” John Allsopp, “A Dao of Web Design” Thursday, October 18, 12
79. Fluid layout Flexible images Media queries Responsive design Thursday, October 18, 12
80. Fluid layout The layout should adjust to the width of the canvas. At a basic level, this means using relative units (like percentages) instead of relying exclusively on absolute units, like pixels. Thursday, October 18, 12
81. Flexible images Images (both content and backgrounds) should adjust to the available space. This might be as simple as scaling an image up or down, or as complex as swapping an image at certain sizes. Thursday, October 18, 12
82. Media queries This is the tool that allows us to target different CSS styles at different canvas sizes. The point at which you apply or remove additional styles is referred to as a “breakpoint”. Thursday, October 18, 12
83. Media queries @media screen and (max-width: 400px) { .heading h2 { font-size: 2em; } } Thursday, October 18, 12
84. 1024px breakpoint Before After Thursday, October 18, 12
85. 640px breakpoint Before / After Thursday, October 18, 12
86. Thursday, October 18, 12
87. Thursday, October 18, 12
88. Thursday, October 18, 12
89. seanmcb.com/get-the-look typekit.com/gallery blog.typekit.com/category/sites-we-like Thursday, October 18, 12
90. @smcbride sean@typekit.com bit.ly/typo12-webtype Thursday, October 18, 12