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

CCA Web Fonts Talk - 2013.09.17

B3604665479456ed6fc1d7c5d932e03b?s=47 Sean McBride
September 17, 2013

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.

B3604665479456ed6fc1d7c5d932e03b?s=128

Sean McBride

September 17, 2013
Tweet

More Decks by Sean McBride

Other Decks in Design

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

  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. thousands of fonts

  18. 1993: no fonts

  19. 2008: 18 fonts

  20. None
  21. None
  22. None
  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

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

  45. None
  46. None
  47. None
  48. Page Size ??? Kb

  49. None
  50. Fallback fonts Aa Aa

  51. None
  52. None
  53. Hosted web font SERVICES help to make it easier

  54. None
  55. None
  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
  57. None
  58. None
  59. None
  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

  67. None
  68. None
  69. None
  70. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

  71. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?

  72. None
  73. None
  74. None
  75. None
  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

  81. None
  82. None
  83. Questions?

  84. sean@typekit.com @smcbride