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.

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 “
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
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
11. really?
12. really. not
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.
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; }
26. xScope http://xscopeapp.com Color Oracle http://colororacle.org
30. enough practice!
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); ----} --} }
37. Thanks! Press Checks in the Age of Web Type TypeCon2012: mke shift August 4, 2012 Erik Vorhes · @erikvorhes