CCA Web Fonts Talk - 2013.09.17

Gave this talk to a group of sophomore Interaction Design students at CCA in San Francisco. Covering web fonts, their relation to the history of typography, and the differences and opportunities in how we can use typography on the web.

Transcript

1. a RENAISSANCE in WEB TYPOGRAPHY
2. SEAN McBRIDE Product Developer User Experience Web Developer
3. ?
4. Let’s look at some GREAT WORK
14. http://lostworldsfairs.com/moon/ http://narrowdesign.com/ http://diehlgroup.com/ http://www.lbvd.com/ http://evening-edition.com/ http://read.shapeofdesignbook.com/ http://www.offscreenmag.com/ http://www.nytimes.com/pages/opinion/index.html http://www.newyorker.com/
15. But it wasn’t ALWAYS this way...
16. 600 years of typography
17. thousands of fonts
18. 1993: no fonts
19. 2008: 18 fonts
23. Is there a BETTER way?
24. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
25. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style: normal; }
26. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 { font-family: 'Awesome Font', 'Georgia', serif; }
27. Works in modern browsers!
28. GREAT! End of story?
29. No
30. How is type on the web DIFFERENT than type in print?
31. Licensing Desktop Web Availability
32. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF
33. 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
34. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); }
35. @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'); }
36. Rendering
40. CoreText DirectWrite GDI + ClearType GDI + Standard
41. Legibility Font Size Pixel Density Optical Sizes
42. If my poor Flatland friend retained the vigour of mind which he enjoyed when he began to compose these Memoirs, I should not now need to represent him in this preface, in which he desires, rstly, to return his thanks to his readers and critics in Spaceland, whose appreciation has, with unexpected celerity, required a second edition of his work; secondly, to apologize forcertain errors and misprints (for which, however, he is not entirely responsible); and, thirdly, to explain one or two misconceptions. But he is not the Square he once was. If my poor Flatland friend retained the vigour of mind which he enjoyed when he began to compose these Memoirs, I should not now need to represent him in this preface, in which he desires, rstly, to return his thanks to his readers and critics in Spaceland, whose appreciation has, with unexpected celerity, required a second edition of his work; secondly, to apologize forcertain errors and misprints (for which, however, he is not entirely responsible); and, thirdly, to explain one or two misconceptions. But he is not the Square he once was.
43. Flatland friend retained the vigour of mind which he enjoyed whe ompose these Memoirs, I should not now need to represent him i which he desires, rstly, to return his thanks to his readers and cri whose appreciation has, with unexpected celerity, required a sec his work; secondly, to apologize forcertain errors and misprints (fo e is not entirely responsible); and, thirdly, to explain one or two tions. But he is not the Square he once was.
44. 16px text on two different devices
48. Page Size ??? Kb
50. Fallback fonts Aa Aa
53. Hosted web font SERVICES help to make it easier
56. @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
60. But, challenges remain.
61. On the web, we build LIVING THINGS instead of static artifacts
62. The web brings new RULES & POSSIBILITIES that we must respond to
63. Ideas Forms
64. Jonathan Hoefler Pivot: AIGA Design Conference 15 October 2011
65. Idea DESIGN SYSTEM Form
66. The NY Times DESIGN SYSTEM DESIGN SYSTEM
70. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form
71. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?
76. Responsive design
77. 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”
78. Fluid layout Flexible images Media queries Responsive design
79. 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.
80. An example
83. Questions?
84. sean@typekit.com @smcbride