CCA Web Fonts Talk - 2012.10.01

This is a talk I gave at California College of the Arts on 2012.10.01 to a class of design students. I was invited by Kimberly Cullen. We covered some current examples of web fonts in use, the history of typography on the web, how web fonts work, and how type on the web is different than in print. We also did some live examples using several different font services.

Transcript

1. a RENAISSANCE in WEB TYPOGRAPHY Tuesday, October 2, 12
2. SEAN McBRIDE Engineer & Web Developer User Experience Web Developer Tuesday, October 2, 12
3. ? Tuesday, October 2, 12
4. Tuesday, October 2, 12
5. Tuesday, October 2, 12
6. Tuesday, October 2, 12
7. Tuesday, October 2, 12
8. Tuesday, October 2, 12
9. Tuesday, October 2, 12
10. Tuesday, October 2, 12
11. Tuesday, October 2, 12
12. Tuesday, October 2, 12
13. Tuesday, October 2, 12
14. Tuesday, October 2, 12
15. But it wasn’t ALWAYS this way... Tuesday, October 2, 12
16. 600 years of typography Tuesday, October 2, 12
17. thousands of fonts Tuesday, October 2, 12
18. 1993: no fonts Tuesday, October 2, 12
19. 2008: 18 fonts Tuesday, October 2, 12
20. Tuesday, October 2, 12
21. Tuesday, October 2, 12
22. Tuesday, October 2, 12
23. Tuesday, October 2, 12
24. Tuesday, October 2, 12
25. Is there a BETTER way? Tuesday, October 2, 12
26. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October 2, 12
27. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October 2, 12
28. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October 2, 12
29. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style: normal; } Tuesday, October 2, 12
30. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Awesome Font'; src: url('awesome-font-bold.woff'); font-weight: 700; font-style: normal; } Tuesday, October 2, 12
31. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
32. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
33. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
34. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
35. Works in modern browsers today! Tuesday, October 2, 12
36. GREAT! End of story? Tuesday, October 2, 12
37. Tuesday, October 2, 12
38. Tuesday, October 2, 12
39. How is type on the web DIFFERENT than type in print? Tuesday, October 2, 12
40. Licensing Desktop Web Tuesday, October 2, 12
41. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF Tuesday, October 2, 12
42. 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 Tuesday, October 2, 12
43. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October 2, 12
44. @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 */ } Tuesday, October 2, 12
45. @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 */ } Tuesday, October 2, 12
46. @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'); } Tuesday, October 2, 12
47. @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'); } <script src="http://use.typekit.com/xxxxxxx.js"></script> <script>try{Typekit.load();}catch(e){}</script> Tuesday, October 2, 12
48. Rendering Tuesday, October 2, 12
49. Tuesday, October 2, 12
50. Tuesday, October 2, 12
51. Tuesday, October 2, 12
52. CoreText DirectWrite GDI + ClearType GDI + Standard Tuesday, October 2, 12
53. Tuesday, October 2, 12
54. Page Size ??? Kb Tuesday, October 2, 12
55. Tuesday, October 2, 12
56. Rendering Speed ??? seconds Tuesday, October 2, 12
57. Fallback fonts Aa Aa Tuesday, October 2, 12
58. Tuesday, October 2, 12
59. Tuesday, October 2, 12
60. Always Connected Tuesday, October 2, 12
61. Let’s see it in an EXAMPLE Tuesday, October 2, 12
62. Tuesday, October 2, 12
63. Tuesday, October 2, 12
64. Tuesday, October 2, 12
65. seanmcb.com/sxsw2012 typekit.com/gallery blog.typekit.com/category/sites-we-like typekit.com edgefonts.com Tuesday, October 2, 12
66. Questions? Tuesday, October 2, 12
67. @smcbride sean@typekit.com Tuesday, October 2, 12