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

Meet the New Web Typography: Same as the Old Web Typography

Erik Vorhes
October 07, 2011

Meet the New Web Typography: Same as the Old Web Typography

My brief-ish talk for the AIGA Chicago event on October 6, 2011, “The New Web Typography.”

A little context:

1. The same typographic “rules” that held for type on the web before webfonts are still in effect.

2. “Font stacks” were a pain, but tracking down which webfonts are available where can be just as difficult.

3. Webfonts let us do fun things that we couldn’t do when we couldn’t know that a visitor had the same installed fonts.

4. At VSA we test type in as many browsers and operating systems as we can — including dealing with the suckage of how IE8 and earlier mishandle opacity.

5. Opentype support in browsers promises the ability to use real type to create logos and word marks.

6. For now, we need to settle for tools that help us achieve some of those effects (when we need them).

7. But webfonts are still in their infancy (as is the web itself). We have a long way to go — and need to keep pushing.

Erik Vorhes

October 07, 2011
Tweet

More Decks by Erik Vorhes

Other Decks in Design

Transcript

  1. Meet the new
    web typography
    same as the old.
    web typography.
    *
    *Okay, not really!

    View Slide

  2. senior developer
    VSA Partners
    http://www.vsapartners.com
    managing editor
    Typedia
    http://typedia.com
    Erik Vorhes

    View Slide

  3. Typography

    View Slide

  4. There are a lot of rules.
    Or rather, guiding principles.
    Set your text at a reasonable size. Use an appropriate line-length. Apply a line-height that works with the length of your line and
    with your choice of type. Give your text plenty of breathing room. Ensure sufficient contrast between the text and its background.
    Yada yada yada. Small caps don’t look so hot. (In other words, ignore how this paragraph is set. ;)

    View Slide

  5. •Set your text at a reasonable size.
    •Use an appropriate line-length.
    •Apply a line-height that works with the length of your line and
    with your choice of type.
    •Give your text plenty of breathing room.
    •Ensure sufficient contrast between the text & its background.
    •Yada yada yada.
    •Small caps don’t look so hot.
    Respect your readers!

    View Slide

  6. Type

    View Slide

  7. .cascade  {
           font-­‐family:
           'Sarcastic  Robot',
           'Anonymous  Pro',
           Consolas,  'Panic
           Sans',  'Andale
           Mono',  Menlo,
           Monaco,  Courier,
           'Courier  New',
           monospace,  serif;
    }

    View Slide

  8. Azuro Web (FontShop, Typekit)
    Rosewood Std (Adobe, Typekit)
    Rosewood Std Fill (Adobe, Typekit)
    http://opisthenar.com
    h1  {
           position:  relative;
           font-­‐family:  rosewood-­‐
           std,  serif;
    }
    h1:after  {
           position:  absolute;
           top:  -­‐0.018em;
           left:  0;
           z-­‐index:  -­‐1;
           font-­‐family:  rosewood-­‐
           std-­‐fill,  serif;
           content:  'Opisthenar';
    }

    View Slide

  9. http://drasty.com/
    wider screen
    Herb (JAF, Typekit)
    Fedra Serif Screen (Typotheque)
    narrower screen
    Herb Condensed (JAF, Typekit)
    Fedra Serif Screen (Typotheque)

    View Slide

  10. What we (try to)
    do at VSA

    View Slide

  11. Benton Sans (Font Bureau, Webtype)
    Preview in IE8 (ClearType), IE9 (DirectWrite), and Safari (OS X Core Text).

    View Slide

  12. h1  {
           font-­‐family:  herb,  serif;
           font-­‐weight:  bold;
    }
    /*  Artificial  bold‽
     *  Uh,  we're  only  loading
     *  font-­‐weight:  normal.  OOPS.
     */
    http://drbl.in/bcPd

    View Slide

  13. .pre-­‐ie9-­‐opacity  {
           background:  white;
           filter:  alpha(opacity=100);
    }
    .pre-­‐ie9-­‐opacity  {
           background:  transparent;
           filter:  alpha(opacity=100);
    }

    View Slide

  14. Smile and grin
    at the change

    View Slide

  15. “Zapfino” rendered in Safari

    View Slide

  16. “Zapfino” rendered in Firefox

    View Slide

  17. http://www.typotheque.com

    View Slide

  18. View Slide

  19. View Slide

  20. Thanks!
    Erik Vorhes
    http://erik.vorh.es
    @erikvorhes
    “The New Web Typography” · AIGA Chicago · 6 October 2011

    View Slide