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

Press Checks in the Age of Web Type

Erik Vorhes
August 04, 2012

Press Checks in the Age of Web Type

This was presented as a part of TypeCon2012: MKE SHIFT. I might try to write up a narrative to go with the slides, but for now, enjoy links to some resources referenced in the talk:

• Bibliography and the Sociology of Texts: http://j.mp/df-mckenzie
• The Web Fountes: http://the.webfount.es/
• Web Font Specimen: http://webfontspecimen.com/
• Typecast: http://beta.typecastapp.com/
• Gridset: http://gridsetapp.com/
• Ffffallback: http://ffffallback.com/
• Color Oracle: http://colororacle.org/
• xScope: http://xscopeapp.com/
• WebFont Loader: https://github.com/typekit/webfontloader
• TypeCon: http://www.typecon.com/

Update: I’ve heard that there is audio of the talk. I’ll include it here once it’s available.

Erik Vorhes

August 04, 2012
Tweet

More Decks by Erik Vorhes

Other Decks in Design

Transcript

  1. Press Checks
    in the age of
    Web Type
    Erik Vorhes · TypeCon2012: mke shift

    View Slide

  2. Every society rewrites its past,
    every reader rewrites its texts,
    and, if they have any continuing
    life at all, at some point every
    printer redesigns them.”
    — D.F. McKenzie, Bibliography and the Sociology of Texts

    View Slide

  3. View Slide

  4. Newton MessagePad 2100 screenshot courtesy Grant Hutchinson: http://flic.kr/p/bzK9Hp

    View Slide

  5. Newton MessagePad 2100 screenshot courtesy Grant Hutchinson: http://flic.kr/p/bzK9Hp

    View Slide

  6. View Slide

  7. Photo courtesy Luke Dorny: http://flic.kr/p/2SchtC

    View Slide

  8. Photo courtesy Scott Boms: http://flic.kr/p/a4GhwF

    View Slide

  9. Photo courtesy Corey Holms: http://flic.kr/p/pqZy3

    View Slide

  10. View Slide

  11. really?

    View Slide

  12. really.
    not

    View Slide

  13. View Slide

  14. Image not to scale. See: https://twitter.com/Zerofee/status/231759450036396032
    “Type rendering beautifully in
    “Win7, as ever *sarcasm*”
    — @Zerofee, August 4, 2012, 7:32 a.m.

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. .pre%ie9%opacity-{
    --background:-white;
    --filter:-alpha(opacity=100);
    }
    .pre%ie9%opacity-{
    --background:-transparent;
    --filter:-alpha(opacity=100);
    }

    View Slide

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

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. xScope
    http://xscopeapp.com
    Color Oracle
    http://colororacle.org

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. enough practice!

    View Slide

  31. View Slide

  32. View Slide

  33. //-Load-webfonts-by-using-JavaScript!
    WebFont.load({
    --custom:-{
    ----families:-'Vista-Sans-Web',
    ----urls:-'/css/fonts.css'
    --}
    });
    WebFont loader: https://github.com/typekit/webfontloader

    View Slide

  34. .banner-{
    --h1,-h2-{
    ----font%family:-"Vista-Sans-Web",-"Lucida-Grande";
    --}
    --h1-{
    ----font%size:-(13em/16);
    ----.wf%active-&-{
    ------font%size:-(14em/16);
    ----}
    --}
    --h2-{
    ----font%size:-(32em/16);
    ----line%height:-(37/32);
    ----margin%bottom:-(7em/32);
    ----padding%top:-(6em/32);
    ----.wf%active-&-{
    ------font%size:-(36em/16);
    ------line%height:-(37/36);
    ------margin%bottom:-(7em/36);
    ------padding%top:-(6em/36);
    ----}
    --}
    }

    View Slide

  35. View Slide

  36. View Slide

  37. Thanks!
    Press Checks in the Age of Web Type
    TypeCon2012: mke shift
    August 4, 2012
    Erik Vorhes · @erikvorhes

    View Slide