You finally chose a typeface that’s perfect for your next print or screen design project. Good job, but don’t break out the bubbly just yet. For many projects, one font isn’t enough to create visual interest and establish the information hierarchy. And when you have multiple typefaces, you want to be sure that they work well together.

During my years in the graphic arts business, I’ve seen plenty of typeface combinations—successful and unsuccessful. The more effective combinations usually rely on typographic principles. These principles are not scientific, rigid, or fail-safe; all of them can be broken, but they should all be understood.

1. Keep it simple—usually

A good principle to live by, whether you’re new to typography or a seasoned pro, is to keep it simple. Or to put it another way, don’t use too many fonts. Just as mixing too many colors on your palette will likely result in mud, mixing too many fonts on a page will probably result in a confused message (see Figure 1).

But the adage “Never use more than three typefaces on a page” is not an unassailable truth; rather, it’s a modernist principle that’s best applied in editorial design. While it may be true that most great pop songs use only three chords, some use more and some use less. So it goes with type.

Look at 19th century posters, and you’ll see that the Victorians used a lot more than three typefaces—they sometimes threw the whole type case at the job (see Figure 2). Today, many find this style charming and emulate it.

Figure 1 (far left) Using too many typefaces (combined with different sizes, weights, and styles) creates a chaotic look—and not in a good way.

Figure 2 (near left) The Victorians knew a thing or two about mixing many fonts. This is a reproduction of the poster that inspired John Lennon to write “Being for the Benefit of Mr. Kite.”

2. Vive la différence

Typeface combinations that are too similar can look like a mistake—as if you’d been experimenting with different fonts and had forgotten to clean up after yourself. For example, combining two neutral sans-serif fonts like Helvetica and Univers creates discord; readers will sense something awry even if they can’t name it (see Figure 3). Combining two slab-serif fonts like Clarendon and Rockwell, both of which are control freaks and want to run the show, will create unnecessary tension (see Figure 4).

As with any good comedy duo, there needs to be a straight man. If you have a typeface with a strong, extroverted personality, try combining it with something neutral, reserved, and trustworthy (see Figure 5).

Figure 3 Helvetica (a) and Univers (b) are not different enough to create contrast, but they are different enough to create discord.

Figure 4 Who’s in charge? Clarendon and Rockwell struggle for domination.

Figure 5 Here’s Clarendon (a) combined with Adobe Garamond (b); the latter is taking the straight-man role.

Figure 6 Combining fonts from the same typeface family, in this case Arno Pro, guarantees a stylistic match.

3. It’s a family affair

This may sound like a contradiction of the second technique, but another avenue to harmonious type combos is to stick with a single typeface family. Just be sure to choose a typeface family that comes in a variety of weights, styles, and widths. Extended typeface families with enough variation let you easily differentiate one level of hierarchy from the next, while at the same time assuring you that, like the Everly Brothers, the shared DNA of the family members means they can sing in perfect harmony (see Figure 6).

When choosing a typeface family—as well as the range of weights, styles, and width—consider the size of the available character set. Does it have distinct small caps? Are there different number styles? Extra ligatures? Foreign accents? You may want to opt for a font that packs these and other glyphs within a single font (see Figure 7). Adobe distinguishes these OpenType fonts with the word Pro at the end of the typeface’s name.

You can differentiate quite a bit even within the same font weight and size. You can use casing, indents, letter spacing, paragraph spacing, and paragraph rules to vary the look of the font.

It’s an informative exercise to work within the limitation of a single font. When you’ve exhausted the possibilities, introduce other members of the family, one by one—the different weights and/or styles—and different sizes (see Figure 8). It’s puritanical to say that the differentiation should be an either-or proposition (either bolder or bigger but not both), and that does not reflect the reality of contemporary book and magazine publishing, but working within such constraints makes you think about the changes you’re making and compels you to justify them.

Figure 7 (far left) Can your typeface do this? The extended character set of a Pro font boasts discretionary ligatures, different numbering styles, and stylistic alternates.

Figure 8 (near left) One size fits all: The text is all 10pt with a 12pt leading. I achieved differentiation through the use of casing (all caps, small caps, and normal), spacing, rules, and indentation, as well as the use of italics.

Figure 9 (top) Cranking up the contrast: Gotham (a) combined with Adobe Jenson (b) offers sans with serif, contemporary with classic, and bold with light.

Figure 10 (immediately above) Creating a parent-child relationship with your paragraph styles in InDesign helps establish hierarchy as well as enable easy editing and experimentation.

4. Go for contrast

For editorial design, typeface combinations based on contrast are better equipped to clearly establish hierarchy. Using contrasting typefaces makes it clear which paragraphs are headings and subheads and which are body copy (see Figure 9). It’s also clear that you want to draw your reader’s attention first to the heads.

Contrast is not exclusive to combining different fonts, but using the classic formula of mixing serif and sans serif fonts—the former usually for the body text and the latter usually for the heads, subheads, and supporting material—is an effective way to bring contrast to your design. Using different weights, sizes, and styles will vary the type color or density of your text, visually chunking it into distinct blocks. Of course, other factors are also involved: leading, interparagraph spacing, and tracking (letter fit) also play their part. Squint at your text. If it blurs into a similar density, like when the sea and the horizon blend seamlessly on an overcast day, then you need to adjust one or more of these properties.

When making such adjustments, you’ll find it easier if you’ve assigned distinct roles to each font and created paragraph styles in a logical way (see Figure 10). If you use Adobe InDesign, for instance, take advantage of its Based On option and experiment with different type combinations and character and paragraph formats.

Typically a magazine spread might require two distinct threads of styles, one based on the body style and the other based on the head style. With some planning, you can create a style sheet with two parent styles and as many offspring as necessary to fill the different roles. Setting up your styles this way makes experimentation easy, since all it takes is a couple of modifications to the parent styles for all the offspring to change, giving you a whole new look.

Several other Adobe products have paragraph style features, including Adobe Muse CCIllustrator CC, and Photoshop CC. For links to product-specific tutorials, see the “Where to go from here” section at the end of this article.

Figure 11 Two typefaces from Eric Gill: the ever-popular Gill Sans (a) and Perpetua (b)


5. From the same stable

When combining typefaces, a little insider knowledge can go a long way. Try combining typefaces from the same designer. Some typefaces, like Museo and Museo Sans or Stone Serif and Stone Sans, were designed specifically for such a purpose, but even those that were not designed specifically as complements will likely have a similar aesthetic when they’re from the same hand. A couple of commonly used combinations that fall into this category are Eric Gill’s Perpetua and Gill Sans (see Figure 11) and Hermann Zapf’s Palatino and Optima. Don’t know who designed a typeface? It’s amazing what you can find out on Wikipedia.

Figure 12 Leonardo with Jenson (top) and Rodchenko with the constructivist-inspired Industria (bottom). Imagine what they would look like if the fonts were switched.

6. Historical accuracy

Another approach, appropriate for one-of-a-kind jobs, is to choose a typeface that is historically appropriate for the subject matter. It is perhaps even more important to avoid a typeface that is historically inappropriate—for example, one that was designed after the period in which the material is set (see Figure 12). There are type geeks hiding in the bushes, waiting to pounce on you for using a 1970s typeface in a biography of a writer best known for her works of the 1950s. Don’t become their easy prey.

Figure 13 Because they both have a strong vertical stress, Bodoni (a) and Futura (b) make an interesting pairing—one that would also work if their roles were reversed.

7. Combine characteristics

When you’re surveying typefaces, consider their strokes, x-heights, and cap heights.

Bodoni and Futura may seem like unlikely bedfellows. Designed 130 years apart, one is a modern typeface with extreme contrast between the thin and thick parts of its stroke, and the other is a geometric, almost monoweight, sans serif. What they have in common, though, is a verticality of stroke, making them a good match (see Figure 13).

If you intend to mix typefaces in the same paragraph, for a run-in head or for emphasis, make them both the same x-height—that is, the height of the letter x in the face (see Figure 14). If the x-heights differ markedly, it will be jarring to your readers as their eyes run into the bumps of higher x-heights. If you’re using a character style or nested style to call out the run-in heads, just slightly reduce the size of the font with the larger x-height to bring it into line with the body text.

If you’re creating some sort of word play by mixing typefaces in the same word, you’ll need to adjust sizes to match the cap height and switch to optical kerning, since there won’t be any kerning metrics for combined letter pairs (see Figure 15).

Figure 14 (far left) Stone Serif and Stone Sans have the same x-height. When you combine them in the same paragraph, the reader’s eye can smoothly scan across the words.

Figure 15 (near left). When you’re combining fonts in the same word, adjust cap height and kerning as necessary.

8. Mix it up

What these guiding principles for mixing typefaces don’t take into account is the wild card of all good design: intuition. Just as an experienced chef can combine the most unlikely ingredients to great effect, so an experienced typographer can toss together unlikely type combinations that defy logic.

Also, don't forget the context. For editorial design, following these guidelines will likely yield a better result, but for more expressive work, there are no boundaries. As long as your document has some sort of typographic rhythm, the sky’s the limit.

In short, these principles make a good starting point: Adhere to them when they facilitate your creativity, and overrule them when they get in your way. But don’t ignore them.

WHERE TO GO FROM HERE

Tim Brown (type manager for Adobe Typekit) has written a handy e-book called Combining Typefaces. It’s 63 pages and costs £2 or US$2.99. For shorter takes, read the article Four techniques for combining fonts on the Hoefler & Frere-Jones website, as well as Smashing Magazine’s Best practices of combining typefaces.

To learn more about paragraph style features in common Adobe products, check out:

For work on the web, you may also want to explore a past Inspire article on Adobe Edge Web Fonts and a video on using Typekit web fonts in Adobe Muse.