Bringing Good Type to a New Medium

This talk was given at Pocket Gems on 22 Oct 2013. It covers examples of using typography on the web, the differences between using type there vs. in print, the troubles with translating historic examples of design directly to new mediums, and some advice on how to do it better.

Transcript

1. Bringing GOOD TYPE to a NEW MEDIUM
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
18. Type:Rider
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. Using type on the web is DIFFERENT than using type in print!
33. Licensing Desktop Web Availability
34. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF
35. Rendering
39. Legibility Font Size Pixel Density Optical Sizes
40. 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.
41. 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.
42. 16px text on two different devices
46. Page Size ??? Kb
48. Fallback fonts Aa Aa
51. Hosted web font SERVICES help to make it easier
56. But, challenges remain.
57. On the web, we build LIVING THINGS instead of static artifacts
58. The web brings new RULES & POSSIBILITIES that we must respond to
59. Ideas Forms
60. Jonathan Hoefler Pivot: AIGA Design Conference 15 October 2011
61. Idea DESIGN SYSTEM Form
62. The NY Times DESIGN SYSTEM DESIGN SYSTEM
66. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form
67. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?
73. Elegance High-contrast type Photos / color Full use of page Idea PRINTED BOOK PERIODICAL STANDARD SIZE DESIGN SYSTEM
74. DESIGN SYSTEM Elegance High-contrast type Photos / color Full use of page
76. Choosing typefaces
90. from TypeTogether
91. from Phil’s Fonts / Darden
92. Responsive design
93. 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”
96. abookapart.com
97. Fluid layout Flexible images Media queries Responsive design
98. 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.
99. An example
102. Questions?
103. sean@typekit.com @smcbride http://bit.ly/1ccB3dx