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

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
  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 “
  3. None
  4. Newton MessagePad 2100 screenshot courtesy Grant Hutchinson: http://flic.kr/p/bzK9Hp

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

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

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

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

  10. None
  11. really?

  12. really. not

  13. None
  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.
  15. None
  16. None
  17. None
  18. None
  19. .pre%ie9%opacity-{ --background:-white; --filter:-alpha(opacity=100); } .pre%ie9%opacity-{ --background:-transparent; --filter:-alpha(opacity=100); }

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

  21. None
  22. None
  23. None
  24. None
  25. None
  26. xScope http://xscopeapp.com Color Oracle http://colororacle.org

  27. None
  28. None
  29. None
  30. enough practice!

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

  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); ----} --} }
  35. None
  36. None
  37. Thanks! Press Checks in the Age of Web Type TypeCon2012:

    mke shift August 4, 2012 Erik Vorhes · @erikvorhes