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:

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. (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:

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.

28 Comments

Veer: Visual Elements for Creatives.
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.

1 BigA ~ 23 March 2005 at 01:27 AM

Very insightful - even to a typophobe such as myself ;)

2 Stephen Coles ~ 23 March 2005 at 02:43 AM

Nice ideas, Cameron. A bit of horn-tooting follows, but I hope it’s a helpful resource:

Like MyFonts, FontShop has multi-font search and sample showings that generate a URL for your custom text. This way you can browse by category, designer, or foundry and once you’ve found a listing you like, take the custom URL to email or chat. Also works especially well for font name searches (“Which Bodoni should I spec for the Cameron Moll logo?”) and listing the members of a font family (“Which weight of VAG works best for The Donut Pusher bakery?”).

Once you dig down to the font detail level you get a renderer that lets you see glyphs at up to 388 pt (almost a requirement for typefaces with details like Emigre’s Missionary).

After settling on a font, you can drag the custom GIF anywhere you want for comping or client approval.

3 Ross Riley ~ 23 March 2005 at 04:23 AM

What no comic sans in your repertoire? ;)

4 Stephen Coles ~ 23 March 2005 at 04:25 AM

Oh, and get the Indie Fonts books. They provide the best way to browse print samples of quality, underused type.

5 Scott ~ 23 March 2005 at 05:52 AM

Great, useful article.

I definitely agree with Cameron on detecting good and bad design in part on the type choices made. Unfortunately, I’ve seen and been involved in projects where there’s been poor typeface selections made and that were out of my control to change. It’s tough to try to salvage these projects sometimes, it doesn’t matter what the design looks like.

There’s a really nice new research feature on the Font Shop website and hopefully we’ll see more tools for identifying faces in the future.

I find it useful to try to get sample books from the myriad of font foundaries out there. Many offer free catalogs and others ask for a small cost but you’ll usually get a bit more for it. I find it’s usually easier to start by flipping through a book than searching on the web for fonts.

6 Cameron Moll ~ 23 March 2005 at 06:34 AM

Stephen, Scott - Funny thing, I almost added a link last minute to FontShop to also demonstrate the fact that one can get individual weights of typefaces such as the lovely Paralucent without needing to purchase the entire family. So thanks for the additional heads up re: multi-font searches.

7 Cameron Moll ~ 23 March 2005 at 06:40 AM

Scott - Also agreed regarding searching through type in print (catalogs, books, etc). I should have included something of the sort. However, I’ve also found that I immediately have access to how the typeface will perform at small and large sizes when testing online, as mentioned earlier. Saves a bit of time in that regard, as I’ve often found faces I like in print, only to find they perform poorly in small sizes on screen.

8 Jeremy Boles ~ 23 March 2005 at 07:50 AM

When I choose fonts I’m familiar with I tend to choose ones that shipped with my Powerbook. I’m not sure if it is because these really are fonts I’m familiar with, I’m really cheap (I hope that is not the case,) or that I’m still relatively new at choosing typefaces.

Things like Flont over at Veer have really helped me in projects lately.

Execelent article.

9 Yannick L. ~ 23 March 2005 at 07:51 AM

Cameron, you definitely delivered. Thanks a bunch. Really good article. It will help me greatly on my next project.

10 Jason G ~ 23 March 2005 at 08:16 AM

I too enjoyed the article. Maybe you could get even more basic in future articles maybe?

For example, you stated that through research, you decided that Frutiger was a good type face for a specific design…why?

How did you come to that decision. I mean, I have an idea, since I have to choose what fonts to use in my designs, but I’d surely love to hear what your method is when you select a font (besides what you mentioned in this article).
Am I babbling or does thins make sense?

11 Cameron Moll ~ 23 March 2005 at 09:23 AM

Makes sense, Jason. I gave up at midnight before wrapping up with “How to select a winner.” I’ll have to defer to the less exhausted on that one…

12 Ray McKenzie ~ 23 March 2005 at 09:38 AM

Cameron,

You said “here you attempt to understand the project’s needs and then choose typefaces that may address those needs”. This is something I’ve never really understood. How does one go about selecting a type face/s that would be best for any given project? Are we going on gut feeling… “this or that type face looks best here”. Or are there some basic guidelines (rule of thumb kinda stuff) that roughly dictates what you should use and where?

13 dotsara ~ 23 March 2005 at 10:44 AM

Ahhh, the Indie Fonts books are wonderful. I keep mine at my desk here at work (even though I’m mostly restricted to Trade Gothic and Meta [different projects!] these days). Definitely worth the purchase.

@ Ray: I’ve no idea if there really are guidelines, but I think Cameron’s point about knowing a little about the font itself may help. e.g. knowing how the font has been used (if you’re looking at a well-known one like… Helvetica), might assist in your decision.

14 Mike ~ 23 March 2005 at 10:51 AM

Stellar article. Definitely bookmarking this one.

I’d also like to echo Ray’s thoughts. This is a great process for choosing the actual typefaces but could you possibly shed some light on understanding the projects needs and how that relates to type.

Not neccessarily specifics, broad strokes would do. It would be great to hear your process in that regard.

15 Ryan Nichols ~ 23 March 2005 at 04:58 PM

Good article. I’ve always found those sample worksheets useful. Seeing a list of fonts like that helps you compare the differences between them, and flesh out *why* one works and another doesn’t. It really helps to learn how minor differences effect the emotional impact of a font. (warm, conservative, whimsical ect)

16 Carmelyne Thompson ~ 23 March 2005 at 08:14 PM

Very nice, Cameron. Don’t forget the aspects of contrast, repetition, alignment and positioning when it comes to typography. No, I am not a typography expert either. I’m with Cameron with the disclaimers on this.

17 nathan ~ 24 March 2005 at 10:45 AM

Windows font management/previewing is shameful,even with Adobe type manager pro, but here’s a free lightweight app that helps: Fontlist

It generates an HTML page with samples of all your installed fonts, it also generates full character sets.

18 Gil ~ 24 March 2005 at 12:02 PM

Knowing which typefaces to choose is a bit of an aquired trait. The only way to get good at it is by doing it (practice, practice, practice). Read up a bit on the history of type and printing just enough to get an idea of why you should not set text in Helvetica. Why serifs are supposed to make reading faster. The character of the text should be reflected in the typeface. If you were going to a funeral, you would probably not wear flashy colors. However, it is relative to your audience. If you were in China, you would probably wear white to a funeral. So… if you were designing an article on Renaissance artists, chances are you would look heavily towards Renaissance typefaces, more than not sans-serif, because they better represent the content.

That’s my 3 cents worth. Hope it makes sense.
Gil.

19 Gil ~ 24 March 2005 at 12:04 PM

by the way, this article from cameron is MORE than insightful for beginners. it is great advice. nice job, cameron.

20 ak ~ 25 March 2005 at 08:25 PM

speaking of fonts… check these beauties out:

http://www.secretonix.pt/ftf/catalogue/FTFmerlo.htm

21 Joe Clark ~ 27 March 2005 at 01:16 PM

Additionally, Cameron is hot-hot-hot.

22 Cameron Moll ~ 28 March 2005 at 06:04 AM

You crack me up, Joe.

23 erik spiekermann ~ 28 March 2005 at 11:50 AM

To be really boring:
Adrain Frutiger didn’t design a family of faces for Charles de Gaulle airport, but just the one weight for signage. That airport opened in 1976 (not 1968) when it was still called Roissy. Linotype then went and made Frutiger into the (almost) complete family and released it in the early 80s. I designed a condensed version (with Linotype’s license and Frutiger’s blessing) for Berlin Transit in 1990, called FF Transit. If Frutiger Condensed had been available in digital form at the time, i wouldn’t have bothered. We also did a “true” Italic (as opposed to a sloping Roman, which is what Frutiger himself always does), because we needed more distinction for a second level of information on our signs. Frutiger himself liked that Italic, but told me that he just didn’t do those himself. The new version from Linotype, Frutiger Next, now has true Italics! It’s nice to be right, now and again.

24 Dan D. ~ 28 March 2005 at 09:50 PM

Great stuff. Another aspect of typography that many people miss is the visual element to a typographic symbol. Such as:

This symbol is more than an ampersand. The curves of the symbol could also suggest that it is a woman sitting cross-legged on the floor…

While this shouldn’t be the dominant element on the page, it can certainly add some depth and impress your clients with your insight.

25 Jens Meiert ~ 30 March 2005 at 03:53 AM

Interesting points. And interesting comments (Gil, Erik).

26 Cameron Moll ~ 30 March 2005 at 09:38 AM

Correction appreciated, Erik.

27 Raj ~ 19 April 2005 at 02:06 PM

To be more boring still:

erik spiekermann wrote:
“…Charles de Gaulle airport… That airport opened in 1976 (not 1968) when it was still called Roissy.”

Apparently it still is called Roissy, at least by the French. As a former employee of the late, lamented Pan Am, the date of 1976 seemed too late to me, so some snooping turned up 1974 as the year CDG opened (and interesting history of the area as well).

www.adp.fr/webadp/a_cont01_an.nsf/ 0/41CCD5B446321E28C1256F9A00317D90/$File/Chap_9.pdf
http://en.wikipedia.org/wiki/Charles_de_Gaulle_International_Airport

for the mini-history:
www.adp.fr/webadp/a_cont01_an.nsf/$$Affich@ReadForm&cle=X3003103171D34732519394CDCD4125694C0065019B.html

28 Zeerus ~ 21 April 2005 at 07:39 AM

Hi Cameron,

I didn’t read the article in its entirety, but font choice is something major to me. While I’m not into paying for fonts, I usually just surf over to http://dafont.com for some nice looking free fonts. I just can’t see paying for fonts.

Hope that link’s useful to you.