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

Realizing the Expressive Potential of Fonts on the Web

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.

Sean McBride

May 08, 2013
Tweet

More Decks by Sean McBride

Other Decks in Design

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

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  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

  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. 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

  41. None
  42. None
  43. None
  44. CoreText DirectWrite GDI + ClearType GDI + Standard

  45. Page Size ??? Kb

  46. None
  47. Fallback fonts Aa Aa

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

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

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

  68. Original Idea DESIGN SYSTEM Magazine Spread DESIGN SYSTEM ?

  69. None
  70. None
  71. None
  72. Web font demo

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