Hoverblog: The non-typegrapher's guide to typefaces

Comments | Main >

The non-typegrapher's guide to typefaces | 3.27.2005

A few months ago, I wrote about the fact that there were only a handful of typefaces (out of tens of thousands) that a designer really uses on a regular basis. Thanks to cameron moll, I've found a great article on how to choose the correct typefaces for any project.

Let’s be frank (or Scout) right off the bat: I don’t presume to be a typographer (but I kind of am), or even anything close to an expert with a replete knowledge of typography (which I kind of have) 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:
Sample typeface worksheet (GIF, 76 KB)

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. Typeface selection is one of the most transparent ways of detecting good — and bad — design.

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. 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. Check out the my listing of other intersting and useful(less) type foundaries here.

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.

posted at 3:23 AM

0 Comments: