Typeface pairing

Search
×

Some thoughts on combining typefaces.

I’ve noticed a surge recently in the number of websites and articles dedicated to “helping you find the perfect font pairing,” or showcasing preset type pairings for people to use. There have been a few promising to use ‘AI’ to pair typefaces for you. Even Adobe has been getting involved, launching a new service providing hand-picked collections of Typekit fonts for specific use cases. Some of these resources are quite good, although many (particularly anything using ‘AI’) are completely useless.

The fundamental problem, of which these resources are a symptom, is that hardly anyone understands the principles behind typeface pairing. That’s understandable — typography can be as impenetrable as it is intricate. But it irks me how readily people will provide type pairing presets, but not teach people how to make their own. They are selling fish, when they could be teaching fishing.



The basics.

Take a look at this image (credit Asado666 on Reddit):


If all the cans were facing different directions, you wouldn’t notice. If they all faced forward, you wouldn’t notice. The human brain is hardwired to recognise patterns, and to notice when those patterns are broken. Because most of the cans are facing forward, your brain has recognised a pattern. Because one of them breaks that pattern, it sticks out like a sore thumb. The goal of typography is to go unnoticed, which means your options are to either have a pattern and stick to it, or make sure there isn’t a pattern at all. Contrast, or subtlety. No half measures.

Pairing two typefaces in the same family — say, PT Serif and PT Sans — is a safe bet, because the typefaces will naturally be harmonious. They will likely have the same width, weight, tension, and optical sizing. In most cases, all that really changes is the presence of serifs, and the contrast (zero-contrast serifs look weird, so designers typically add some to the serif faces in a family). If you’re unclear on what some of these terms mean, there’s a glossary later in this article.

Pairing typefaces from different families is harder, because you’ll have to identify their features manually. The first step is simply to decide whether you want a harmonious pairing, or a contrasting one. If you’re going for harmony, start by choosing one typeface which you want to use, and then, for the other, look for faces with similar features to your first, but which have at least one point of difference. I usually choose a headline or title typeface first, which fully embodies the ’look’ I’m going for, then find a body typeface which shares features, but is a little more toned-down.


Neue Helvetica works well alongside Franklin Gothic, since their widths, curve tensions, and overall letter constructions are very similar. They’re not carbon-copies though: Helvetica is more rigidly uniform, with every stroke ending at either a vertical or horizontal line, and very closed counters. Franklin takes many of these elements and dials them back, introducing off-angles and open counters which help with readability.

Avant Garde and Avenir are a somewhat harmonious combination for the same reason. Avant Garde has a powerful, distinctive geometric style which comes across well in short bursts, however quickly becomes overpowering over longer sentences or paragraphs. Avenir is similar, though more conservative — its skeletons are more conventional, with more open counters and looser letterspacing; this makes it far more comfortable to read, but keeps it stylistically similar enough not to clash.

If you’re pairing typefaces which contrast each other, then the same rules work in reverse: keep most features different, but with one or two points of similarity. You want the faces to be clearly distinct from one another, such that even the most typographically-uneducated person would be able to tell; but there also needs to be a certain level of similarity, or they’ll feel too disparate and the pairing will seem accidental. A single common feature, perhaps two, should be enough to make the reader feel that although there is great diversity between the faces being used, they are part of a set; they belong together.

The typefaces I used for B-Side are Eurostile Extended and Americana, both published by Linotype. They work alongside each other because they share almost no similarities: Eurostile is a low-contrast, square sanserif face; Americana is high-contrast, with circular curves and sharp serifs. There is no confusion or ambiguity between them. And yet, they are both very wide, and overall their weights are similar, so they share enough commonality to be comfortable together.

I’m not much of a typesetter, professionally, so my examples aren’t as deep or as rationalised as some. If this is something you’d like to read more on, I cannot stress enough how much I recommend this Medium article by Bethany Heck, now Medium’s own head of design. It changed the way I think about typography.



The properties of type.

There’s more to a typeface than whether it’s a serif or a sans, bold or italic. This is, incidentally, why the AI-driven pairing systems don’t work: they pair based on things like weight and serifs, but they ignore a whole bunch of other facets of a typeface. The first step to understanding why typeface pairings work (or don’t) is understanding the myriad ways in which typefaces can vary. Here’s a (non-exhaustive) list of some of those ways.

Weight

The thickness of the strokes which form each letter — in other words, how bold the letters are.

Width

How wide or narrow (condensed) the letters are. Note how, in this example, the weight increases slightly as the width does. Widening the letter opens up a lot of white space around and inside it, so the designer has compensated by slightly thickening the strokes of the letter. Without this compensation, the wide would look lighter than the condensed when set at the same size.

Contrast

The difference in weight between the thinnest and thickest parts of each letter.

Contrast model

The mechanism by which contrast occurs. A flexible, pointed-nibbed pen will expand when pushed harder against the paper, drawing a thicker line. A broad-nibbed pen or brush will produce a thicker line at some angles than others. A typeface drawn based on calligraphy or writing will adopt aspects of the tool which made the writing.

Skeleton

The ’inside’ shape of each letter — what form it takes overall, its most general proportions, and which curves go where. If you were writing the letter with a pen, the skeleton is the path which the centre of the nib traces.

Serifs

Whether the letters have serifs, and what the serifs look like. There is a huge variety of serif shapes and constructions — I wrote my dissertation on attempts to classify them — and understanding what they contribute to a pairing can only come with practice. It's also worth noting that there is a small grey area between serif and sans typefaces, and the actual category some faces fit into is ambiguous. All that being said, serifs alone will rarely break a design. Experiment with them.

Curve tension

Whether the curves are gentle and circular, or whether they are tighter and squarer. It's worth noting that type designers almost never use perfect circles: a very slightly squarer curve, counter-intuitively, will appear more circular than a perfect circle.

Optical sizing

The size at which the typeface was intended to be used. A face intended for display at large sizes may have higher contrast, smoother curves, and sharper angles. A face for small captions will likely have lower contrast, less flowing curves, and ink traps where strokes meet.

Slant angle

The angle at which the letters slant, if the typeface is oblique or italic. This can be backwards (“ritalic”), although it’s uncommon.

Italic

Although the terms are often confused, italic letters are different in construction from conventional latin shapes. Latin letters which are slanted are known as oblique; it is possible for a typeface to be italic but not slanted.

Letterspacing

How close the letters are to each other overall. This is not the same as kerning, which is the manual adjustment of specific pairs of letters.

X-Height

The height of the lowercase x relative to the capital and ascender heights. A larger x-height will result in a typeface “looking bigger” on the page.