Typography for the Web: Webinar Recap and Resources
Web typography, simplified, decoded, deconstructed. That was the focus of our sixth “Breakthroughs” webinar, featuring Tim Brown, type manager at Typekit and author of the great blog Nice Web Type. Thanks to cross-browser support for CSS @font-face—and font services such as Typekit that make licensing and implementing distinct typefaces easy to do—typographic customization and control are at web designers’ fingertips like never before.
No longer are designers confined and constricted by the curse of too few typefaces. No longer do we have to design with one hand behind our backs. As Tim mentioned, designers had been forced to design to technological constraints and kludgy workarounds first, rather than focusing our design talents and skills on the content and user experience of reading that content. But with services like Typekit, Web Type, Fontdeck and many others, designers are able to meet web standards and aesthetic standards simultaneously. We can focus on creating content that is readable, functional, searchable, accessible and, yes, beautiful. Because beauty matters and is an important part of the user experience.
We discussed the history of web type and then gave Tim the floor to show his clear and instructive demo, which reiterated elements covered in past webinars of this series; namely HTML5, CSS3 and responsive design techniques. He explained elements that support typographic control: the ability to create paragraph indents, for example, and the aside tag, which makes for a more seamless integration of pull quotes, contextual references, and navigation elements in an HTML structure. Good typography doesn’t exist in a vacuum of typefaces alone—it takes a system to create good typography. And part of this system is structure.
On a macro level, Tim repeatedly referred to our ability to, through good typography and design, enhance our designs with content conceived from the ground up. Starting with the strategic selection of typefaces that cascade throughout the layout, we can infuse meaning into designs in ways that weren't possible with limited typefaces and differentiate our websites from others.
Tim also spoke about how effortless it now is to use typefaces legally—difficult to do before type services came around, so even designers who wanted to license fonts could not. And of course, paying for fonts is the right thing to do—type designers deserve to be paid for their work—so web-font services make doing the right thing easy. For designers, clients and users, it’s a win-win situation.
In addition to the links provided, AIGA members can log in to watch the archive of this webinar.
Demos created by Tim Brown for AIGA
- Demo in Georgia and Helvetica
- Demo in Adobe Caslon and Franklin Gothic Condensed
- Demo from scratch, designed with Caslon and Franklin Gothic in mind
Additional web font services
- Direct from foundries: FontFont, Process Type Foundry, ARS Type
- Font Bureau’s RE faces via Webtype
- Fontdeck—Tim notes: “interesting stuff re: expert subsetting, and the guys behind it (Rich Rutter, Jon Tan) have taught us a lot about web typography for years”
- Google Fonts—Tim notes: “The pros: lots of people are trying web fonts who otherwise might not. The cons: read Matthew Butterick’s comment here
- WebINK—Tim notes: “I’ve heard good things about their Photoshop plugin, and Thomas Phinney often presents about what we can look forward to in CSS3.
Web dev resources
- Via Nice Web Type: How to use CSS @font-face
- Coda, text editor and FTP program for Mac
- Via A Book Apart HTML5 for web designers
- Eric Meyer’s reset stylesheet
- Via Kyle Fox: Typekit Tweaker
- Modular Scale
- CSS Tricks
Articles, videos and tutorials
- Via Smashing Magazine: “Review of Popular Web Font Embedding Services”
- Via Jeff Veen, founder of Typekit: “Building Typekit on relationships”
- Ethan Marcotte for Typekit: “Sizing the legible letter”
- Eric Meyer: “Unitless line-heights”
- Eric Meyer for A List Apart: “Prefix or Posthack”
- WebTypography.net: The Elements of Typographic Style Applied to the Web
- Ellen Lupton’s book Thinking With Type (PA Press)
- Tim Brown for 8Faces: “8 steps to beautiful paragraph text on the web”
- Via A List Apart: “More Meaningful Typography”
- From Build 2010: “More Perfect Typography” by Tim Brown (video)
- Don’t Fear the Internet, basic HTML and CSS tutorials for non-web designers