The non-typographer’s guide to practical typeface selection
~ 23 March 2005 ~
Warning: This article contains nothing nearly as meaty and complex as my dissertation about chiasmi from a few weeks back. But I promised I’d follow up with a more detailed report of my five minutes of fame at SXSW 2005, so here she goes.
Let’s be frank right off the bat: I don’t presume to be a typographer, or even anything close to an expert with a replete knowledge of typography and its history. Instead, I take a more practical approach to typeface selection, given the environment I’m generally in rarely requires that I need to complicate the process further.
My apologies beforehand (have I prefaced this article with enough disclaimers already?) if you find I disappoint you with the simplicity of the process. But at the end of the day, this is the magic formula:
- Make a list of those “familiar” typefaces that you trust and know will work well in a variety of projects
- Supplement that list with a list of “unfamiliar” typefaces that address any specific objectives for the project at hand
- Test each typeface at small and large sizes
- Test both caps and lowercase
Disclaimers now aside, let’s discuss the process in detail.
This process primarily applies to web design, but I use a similar process for print design. And we’re speaking not of text rendered as HTML, but rather text rendered as images or using techniques such as sIFR. If you’d rather cut to the chase and see where all of this is headed, view this mock-up:
1. Selecting “familiar” typefaces:
Don’t reinvent the wheel here. Start with faces you’re familiar with and have trusted in previous projects. If you’re a newbie, go with faces others have trusted in previous projects. Fact is, my base set of typefaces doesn’t consist of much other than typefaces that have already been used by others for years, even centuries. Garamond, Frutiger, Edwardian Script, Trade Gothic, and so on.
I honestly believe typeface selection is one of the most transparent ways of detecting good — and bad — design. You can tell plenty about a designer merely by the typefaces he/she chooses. So you’d be wise to start with trusted faces, and you’d be even wiser to know something about the history of each typeface. Frutiger, for example, was designed by Adrian Frutiger in 1968 for the new Charles de Gaulle Airport. (update: see Spiekermann’s comment) That tells me Frutiger is probably a very legible typeface at a variety of sizes, among other things.
Then, over the years, I’ve added newer typefaces, such Trajan Pro, Avenir, Fette Engschrift, and Bickham Script Pro. But even then, many of these newer faces still find their roots in classic typography.
2. Selecting “unfamiliar” typefaces:
This part of the process is by far the most challenging. Yet it’s often the most enjoyable. Much like color selection, photography selection, and the like, here you attempt to understand the project’s needs and then choose typefaces that may address those needs.
But where to seek out the unfamiliar gems? I tend eavesdrop on conversations between the heavy hitters, for starters. Typographica, Typophile Forums, and Typographer.org are generally at the top of the list. I find the “what’s hot” and “what’s not” discussions to be invaluable. Here’s a sampling:
- Typographica: Our Favorite Fonts of 2004
- Typophile Forums: 20 fonts every graphic designer should know how to use
- Typophile Forums: Overused Typefaces
- Typophile Forums: Underused Typefaces
Of course, it’s always a guilty pleasure to break away from the forums and frequent foundries like House Industries and Letterhead Fonts. And lists like this one make the pleasure even more accessible.
Finally, if all else fails, you just might invite someone else to pull the cart for you. Veer provides such a service (see Research Requests) and it’s likely there are others offering similar services. After submitting a request, you’ll be provided a lightbox with a variety of faces hand-picked according to your project needs, much like Jon Parker’s picks for the Design Eye panel, as well as Jason Woolley’s picks for a recent client project.
3. Test small and large sizes:
This step is crucial for determining which faces will work well at large sizes (e.g. headlines), which will work well at small sizes (e.g. button text), and which will work well at both sizes. For example, Avenir works extremely well in headlines but thins out when used in nav buttons at small sizes. Frutiger, on the other hand, tends to work well at both sizes.
4. Test caps and lowercase:
A simple step, but again, important for determining how the typeface performs at small and large sizes.
5. Game over:
When it’s all said and done, you’ll end up with something like this sample typeface worksheet. Or you can skip the worksheet altogether and test each typeface on the fly right there in Photoshop, or by using online tools provided by a variety of typeface vendors, such as MyFonts.com’s test drive feature or Veer’s Flont tool. From there, pick the typeface (or two) that suits the project best, and never look back.
So there it is. The non-typographer’s guide to practical typeface selection. Did I deliver according to expectations? Or did I fall short and disappoint? Either way, you can’t say I didn’t warn you.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.