Nice Web Type

Guide to web typesetting

Choosing type

Type as an atomic unit can lead to all kinds of good (and easier) choices in full designs. I like to start by identifying emotions, then do some sketching, and then choose typefaces.

Where to get fonts

The webfonts.info wiki has been a good resource for a long time. Especially check out: FontFont, Process Type Foundry, Font Bureau (Webtype), Typotheque, and Typekit — especially: Adobe, FontFont, Exljbris, Just Another Foundry, Mark Simonson Studio, Porchez Typofonderie, and TypeTogether.

Looking at type

Specimens first, then sample content, then specimens again, then begin typesetting. Use Cinch on OS X for easy split-screen. Web Font Specimen for body text evaluation.

I like Pinboard for bookmarking, and I keep a "Paused" folder in my bookmarks bar (Session Buddy for Chrome is probably a better system, if you’re a Chrome user). Also, Amazon lists.

Pairing typefaces

See On Web Typography by Jason Santa Maria for ALA, and H&FJ’s Four Ways to Mix Fonts.

Starting point markup/style

Very little to get going (see HTML5 for Web Designers). Reset styles are important, I like HTML5 Boilerplate.

CSS @font-face

Great intro at ALA, CSS @ Ten. Nice Web Type’s How to use CSS @font-face walks through Paul Irish’s bulletproof syntax and use of the Font Squirrel generator. For organizing font files, keep them with CSS.

Layout

Use a framework if you like. I used 960.gs for all of these Nice Web Type likes examples. Gridulator is cool. Use modular scales to build from type out, rather than boxes in.

Styling text

Boilerplate comes with demo elements, so cover your bases by making sure all kinds of markup are styled. Richard Rutter’s The Elements of Typographic Style Applied to the Web touches on many important details.

FOUT & Fallbacks

WebFont Loader by Typekit & Google, built into Typekit. Series of recent posts by Sean McBride on how to use it with Typekit: overview, Controlling the FOUT, Fallback Fonts and Styles. 4D CSS.

Tim Brown · @nicewebtype · tim (at) nicewebtype (dot) com