Redesign: Looking at Letters

If climate change and insufficient retirement savings show us anything, it is that the human mind has difficulty imagining exponential consequences. The same idea can also apply to more harmless environments like typography. This lack of cumulative imagination is one of the things that makes it difficult for most people to choose typefaces. Create a new document, put two fonts beside one another, and… what are we looking at? Helvetica? Roboto? San Francisco? What’s the difference here? A little swoopy thing on the l? The g has ears? What the hell?

I sympathize with the confusion. Looking at typefaces can sometimes feel like the Check and Double Check games in old Highlights magazines, where you’re challenged to find the five differences in two nearly identical illustrations. But, the outcome is the same for both the magazine illustrations and typefaces: once the differences are pointed out, you can’t unsee them. With that in mind, let’s take a look at some fonts to see how the design of individual letters exponentially accumulate to create the voice of a typeface.

Example 1: Detail and proportion

Let’s start by looking at two typefaces that would look similar to many untrained eyes. (If you have experience with typography and know classifications, don’t howl at me just yet. You’ll understand why I’ve picked these two in a bit.)

Take a look below at Basis Grotesque and Avenir. What do you see? There’s no wrong or right here—only description.

Basis Grotesque from Colophon Foundry (top) and Avenir from Monotype (bottom). Set at equal sizes.

Avenir’s letters are lighter—thinner strokes, meaning less black in the letterforms. For the most part, it’s round and even, and shorter than Basis (compare the proportional height of the a to the l in “Call” in each typeface). Avenir is more open—look at the top half of the a’s in each typeface. See how Basis pinches closed while Avenir does not?

Basis ends many of its letters in interesting and quirky ways—the s is serpentine, and the lowercase a curls in on itself like a scared caterpillar. This overextension of the stroke creates closure and is especially apparent in the lowercase g:

Basis Grotesque from Colophon Foundry (left) and Avenir from Monotype (right). Set at equal sizes.

Let’s draw some conclusions. After looking at the example letters above, which typeface do you think would feel more distinctive as a paragraph? It’s tempting to pick Basis and presume that the quirks of individual letters would accumulate and become even more noticeable as the text gets longer, but…

Basis Grotesque from Colophon Foundry (top) and Avenir from Monotype (bottom). Set at equal sizes.

My bet is that most people would identify Avenir as the more “flavorful” typeface in a paragraph context. An unexpected inversion has happened. The typeface with traditional letter shapes (Avenir) reads more distinctively than the typeface with quirks in its design (Basis). Basis’s oddities become less noticeable when typeset smaller, and the proportions of Avenir (it’s roundness, it’s size contrast between upper- and lowercase letters) go further in establishing the typeface’s fingerprint and impacting the text’s atmosphere.

Neither situation is better or worse. Avenir and Basis Grotesque can both be used for headlines or running body text, which means the inverted tensions they produce are opportunities. With Basis, you get a quirky headline with mostly normal looking body text. With Avenir, you have a generic looking headline with a slightly more distinctive atmosphere in the body copy. These are the advantages and tradeoffs that an experienced designer considers when creating a typographic palette.

(And, a quick little aside here—I actually don’t like the atmosphere of Avenir that much. It’s a famous and well-crafted typeface, but there’s something about its tone that disagrees with my eye. It’s like Paul Valéry said: taste is comprised of a thousand distastes. To each their own.)

Example 2: You can get with this or you can get with that

How about we reproduce a common situation in my design practice: I’ve decided on a typographic direction, and now I must choose between a handful of typefaces with similar atmosphere. How?

Let’s take a look at two typefaces that have a tighter visual relationship than the ones presented in Example 1. Below we have Source Sans and the previously mentioned National 2:

Source Sans from Adobe Type (top) and National 2 from Klim Type (bottom). Set at equal sizes.

Hopefully you’ve taken the experience of Exercise 1 and applied it to what you see here. Pretty similar skeletons between the two, huh? Beyond that, Source Sans is more reserved in all ways: it’s narrower and more space efficient, it’s terminals have less flare (check out the l’s), and it’s lowercase characters aren’t quite as tall. National 2 occupies more space, and uses that space to hold some design details which give the characters some tasteful and expressive flavor. Check out the leg on the R and the ear on the g:

Source Sans from Adobe Type (left) and National 2 from Klim Type (right). Set at equal sizes.

Small changes like these go a long way in altering the feeling of a block of text. You can see Source Sans’ friendly but quieter nature and National 2’s controlled, galloping warmth once you apply the typefaces to longer texts:

Source Sans from Adobe Type (top) and National 2 from Klim Type (bottom). Set at equal sizes.

So how to choose here? Well, I think you go back to how the typeface will be used and consider the situational needs. I’d be more inclined to select Source Sans for denser interfaces or designs where there’s an abundance of tooltips and microcopy. It performs really well at teeny sizes. Source is also a better option where a more reserved sense of warmth is appropriate. It is a bit more introverted.

National 2 has more exuberance to my eye, so I’d swing this way if there was a chance to also use it for headlines. And as a contrast to Source’s subdued utility as an interface typeface, I’d use National 2 in spots where there’s a genuine and colloquial voice to the copy. (Although I have used National 2 in interfaces, too.) The distinction between the two typefaces, for me, is primarily one of expressive volume. How much is appropriate for the content and the context?

Of course, you can also pick by gut or chance once you’re certain you have a solid pool to choose from. Reasons can be arbitrary, and you need to leave room for whim. I once chose a typeface because I liked the 7. Sometimes one can overthink things.

Example 3: Ob-la-di, ob-la-da

I don’t really listen to song lyrics. Timbre and color matter much more to me in a song than words—forget the text, what’s the subtext and the information carried by the sounds? This is my personal preference with music, but I bring it up because the best typography metaphors are always musical. I see type as the timbre of written words.

In the same way you can sing sad words in a happy way, you can typeset them like that, too. This mismatch is also interesting to me, because when we are choosing typefaces for things like blogs—or any template, really—we are picking the tone of words without knowing the words themselves. It is singing a melody with nonsense sounds. Ob-la-di, ob-la-da, life goes on, yeah?

What will I be writing 6 months from now? No one can say. So how do we pick a typeface that establishes the tone without knowing the content? This, ultimately, is an unsolvable problem—you simply do your best.

I raise all this to show the natural limits of intent. The content won’t always be known, the interpretation of a typeface’s timbre won’t always be shared, communication is always imperfect and lossy. Best to take those first big steps in the right direction, whittle down the options, and commit to what feels right to you. No choice is bulletproof, and no amount of evidence is ever going to completely clarify or validate a choice. This is what makes these choices creative.

All of this is important to remember, because sometimes you’ll whittle your font options down to situations that seem like impossible choices. For instance, look at the following:

Untitled Sans from Klim Type (top) and Scto Grotesk A from Schick-Toikka (bottom)

I swear to god these are different typefaces. On top, (double checks notes) is Untitled Sans and on the bottom is Scto Grotesk A. I have spent hundreds of dollars on both of these typefaces and I do not regret one cent. I love both of them, and of course I do! They are so similar, it’d be ridiculous to like one and not the other.

How would you choose between them? Let’s take a closer look.

Untitled Sans from Klim Type (left) and Scto Grotesk A from Schick-Toikka (right)

OK, uhhh.

Untitled Sans from Klim Type (top) and Scto Grotesk A from Schick-Toikka (bottom)

Aha! There we go. Scto Grotesk has ever so slightly wider proportions. You put them side by side and…

Untitled Sans from Klim Type (left) and Scto Grotesk A from Schick-Toikka (right). Set at equal sizes.

It’s really difficult to articulate the distinctions between them, because any significant difference is indescribable. Words come up short. Untitled Sans is slightly more upright? Scto Grotesk is wider and smoother in color? It’s insufficient and barely makes sense. All you’re left with silliness: Untitled is a dark light gray, but Scto is a light dark gray. You see it, right? Please? Right?

Sometimes I jump into a new project and say “Untitled for this one, definitely.” Others obviously require Scto, how could anyone even consider using Untitled for this job? Unimaginable.

Distinctions like this seems preposterous. And I know it is. But it isn’t. It’s the same note, maybe even the same melody, but the timbre is different. And that difference sometimes means everything.

Typefaces begin as drawings with intent, become material for designers with justifications, then get applied to words to evoke timbre, color, and tone. Yet all of that heaviness falls away in conveyance—the words are read and the only thing left is a feeling. Thank god.

Get notable posts sent to your inbox