Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bringing Good Type to a New Medium

Sean McBride
October 22, 2013

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.

Sean McBride

October 22, 2013
Tweet

More Decks by Sean McBride

Other Decks in Design

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

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  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. None
  18. Type:Rider

  19. thousands of fonts

  20. 1993: no fonts

  21. 2008: 18 fonts

  22. None
  23. None
  24. None
  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

  36. None
  37. None
  38. None
  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

  43. None
  44. None
  45. None
  46. Page Size ??? Kb

  47. None
  48. Fallback fonts Aa Aa

  49. None
  50. None
  51. Hosted web font SERVICES help to make it easier

  52. None
  53. None
  54. None
  55. None
  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

  63. None
  64. None
  65. None
  66. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

  67. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?

  68. None
  69. None
  70. None
  71. None
  72. None
  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
  75. None
  76. Choosing typefaces

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  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”
  94. None
  95. None
  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

  100. None
  101. None
  102. Questions?

  103. sean@typekit.com @smcbride http://bit.ly/1ccB3dx