$30 off During Our Annual Pro Sale. View Details »

CCA Web Fonts Talk - 2013.09.17

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.

Sean McBride

September 17, 2013
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. a RENAISSANCE in
    WEB TYPOGRAPHY

    View Slide

  2. SEAN
    McBRIDE
    Product Developer
    User Experience Web Developer

    View Slide

  3. ?

    View Slide

  4. Let’s look at some
    GREAT
    WORK

    View Slide

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

    View Slide

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

    View Slide

  16. 600 years of typography

    View Slide

  17. thousands
    of
    fonts

    View Slide

  18. 1993:
    no fonts

    View Slide

  19. 2008:
    18 fonts

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. Is there a BETTER way?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Works in modern browsers!

    View Slide

  28. GREAT!
    End of story?

    View Slide

  29. No

    View Slide

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

    View Slide

  31. Licensing
    Desktop Web
    Availability

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  36. Rendering

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. CoreText DirectWrite
    GDI + ClearType GDI + Standard

    View Slide

  41. Legibility
    Font
    Size
    Pixel
    Density
    Optical
    Sizes

    View Slide

  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.

    View Slide

  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.

    View Slide

  44. 16px text on two different devices

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. Page Size
    ??? Kb

    View Slide

  49. View Slide

  50. Fallback fonts
    Aa Aa

    View Slide

  51. View Slide

  52. View Slide

  53. Hosted web font
    SERVICES
    help to make it easier

    View Slide

  54. View Slide

  55. View Slide

  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

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. But, challenges remain.

    View Slide

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

    View Slide

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

    View Slide

  63. Ideas Forms

    View Slide

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

    View Slide

  65. Idea DESIGN
    SYSTEM
    Form

    View Slide

  66. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    DESIGN
    SYSTEM
    New
    Form

    View Slide

  71. Original
    Idea
    DESIGN
    SYSTEM
    Magazine
    Spread
    DESIGN
    SYSTEM
    ?

    View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. Responsive design

    View Slide

  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”

    View Slide

  78. Fluid layout
    Flexible images
    Media queries
    Responsive design

    View Slide

  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.

    View Slide

  80. An example

    View Slide

  81. View Slide

  82. View Slide

  83. Questions?

    View Slide

  84. View Slide