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.

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