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.

Transcript

1. realizing the expressive potential of
   FONTS ON THE
   WEB
   

   View Slide

2. #AdobeMAX #webfonts
   @smcbride
   

   View Slide

3. SEAN
   McBRIDE
   Product Developer
   User Experience Web Developer
   

   View Slide

4. ?
   

   View Slide

5. Let’s look at some
   GREAT
   WORK
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

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/
    

    View Slide

17. But it wasn’t
    ALWAYS
    this way...
    

    View Slide

18. 600 years of typography
    

    View Slide

19. thousands
    of
    fonts
    

    View Slide

20. 1993:
    no fonts
    

    View Slide

21. 2008:
    18 fonts
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Is there a BETTER way?
    

    View Slide

26. @font-face {
    font-family: 'Awesome Font';
    src: url('awesome-font.woff');
    }
    

    View Slide

27. @font-face {
    font-family: 'Awesome Font';
    src: url('awesome-font.woff');
    font-weight: 400;
    font-style: normal;
    }
    

    View Slide

28. @font-face {
    font-family: 'Awesome Font';
    src: url('awesome-font.woff');
    }
    h1 {
    font-family: 'Awesome Font',
    'Georgia', serif;
    }
    

    View Slide

29. Works in modern browsers!
    

    View Slide

30. GREAT!
    End of story?
    

    View Slide

31. No
    

    View Slide

32. How is type on the web
    DIFFERENT
    than type in print?
    

    View Slide

33. Licensing
    Desktop Web
    

    View Slide

34. Formats
    Ag
    EOT
    Ag
    SVG
    Ag
    OTF/TTF
    Ag
    WOFF
    

    View Slide

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
    

    View Slide

36. @font-face {
    font-family: 'Awesome Font';
    src: url('awesome-font.woff');
    }
    

    View Slide

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 */
    }
    

    View Slide

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 */
    }
    

    View Slide

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');
    }
    

    View Slide

40. Rendering
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. CoreText DirectWrite
    GDI + ClearType GDI + Standard
    

    View Slide

45. Page Size
    ??? Kb
    

    View Slide

46. View Slide

47. Fallback fonts
    Aa Aa
    

    View Slide

48. View Slide

49. View Slide

50. Hosted web font
    SERVICES
    help to make it easier
    

    View Slide

51. View Slide

52. View Slide

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
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. But, challenges remain.
    

    View Slide

58. On the web, we build
    LIVING
    THINGS
    instead of static artifacts
    

    View Slide

59. The web brings new
    RULES &
    POSSIBILITIES
    that we must respond to
    

    View Slide

60. Ideas Forms
    

    View Slide

61. Jonathan
    Hoefler
    Pivot: AIGA Design Conference
    15 October 2011
    

    View Slide

62. Idea DESIGN
    SYSTEM
    Form
    

    View Slide

63. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    DESIGN
    SYSTEM
    New
    Form
    

    View Slide

68. Original
    Idea
    DESIGN
    SYSTEM
    Magazine
    Spread
    DESIGN
    SYSTEM
    ?
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. Web font demo
    

    View Slide

73. View Slide

74. View Slide

75. sean@typekit.com
    @smcbride
    

    View Slide

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

    View Slide

77. sean@typekit.com
    @smcbride
    

    View Slide