Realizing the Expressive Potential of Fonts on the Web

My presentation about web fonts, Typekit, and design given at Adobe MAX in LA on May 8, 2013.

Transcript

1. realizing the expressive potential of FONTS ON THE WEB
2. #AdobeMAX #webfonts @smcbride
3. SEAN McBRIDE Product Developer User Experience Web Developer
4. ?
5. Let’s look at some GREAT WORK
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/
17. But it wasn’t ALWAYS this way...
18. 600 years of typography
19. thousands of fonts
20. 1993: no fonts
21. 2008: 18 fonts
25. Is there a BETTER way?
26. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
27. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style: normal; }
28. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; }
29. Works in modern browsers!
30. GREAT! End of story?
31. No
32. How is type on the web DIFFERENT than type in print?
33. Licensing Desktop Web
34. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF
35. 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
36. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
37. @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 */ }
38. @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 */ }
39. @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'); }
40. Rendering
44. CoreText DirectWrite GDI + ClearType GDI + Standard
45. Page Size ??? Kb
47. Fallback fonts Aa Aa
50. Hosted web font SERVICES help to make it easier
53. @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 http://use.edgefonts.net/droid-sans.js
57. But, challenges remain.
58. On the web, we build LIVING THINGS instead of static artifacts
59. The web brings new RULES & POSSIBILITIES that we must respond to
60. Ideas Forms
61. Jonathan Hoefler Pivot: AIGA Design Conference 15 October 2011
62. Idea DESIGN SYSTEM Form
63. The NY Times DESIGN SYSTEM DESIGN SYSTEM
67. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form
68. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?
72. Web font demo
75. sean@typekit.com @smcbride
76. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Take the SESSION SURVEY on the MAX COMPANION app 76 …for your chance to WIN one of these e-books from Adobe Press Every survey you submit enters your name to win the daily grand prize - an Apple® iPod Nano®.
77. sean@typekit.com @smcbride