Web sites, magazines, text books, posters and so on — mixing different fonts is very common these days. But how do we find matching fonts? Here are a few guidelines and considerations to make. 

Should we mix fonts at all?

First of all, it’s worth pointing out that mixing fonts isn’t automatically recommended just because it is so common these days. For the first centuries of printing with moveable type, books usually didn’t even use different styles (e.g. regular, italic and bold) from within a type family, let alone different type families. And still there was not much missing. Hierarchy and emphasis for example can also be created through spacing, type sizes, color and so on. Keep this in mind before jumping at the chance of mixing fonts. If we do mix font, it should serve a clear purpose. 

How many fonts should we mix?

It seem to be a well established rule of thumb in the field of graphic design to not mix more than two or three different font styles. It’s a useful guideline but it really only is a rule of thumb. Do not take it as a dogma.

In many cases there simply is no need to use many typefaces and doing it anyway makes your design just more cluttered and noisy.

If you use many unrelated fonts, they start to compete with each other for the reader’s attention and you are therefore not helping the readers of your documents by making the information easily accessible. That’s the main reason for not mixing too many fonts and doing it anyway is a typical beginner’s mistake. 

But of course it’s not always the goal to make the perception of the information as easy as possible. You might have different priorities for a certain project. You might want to give your design a more playful or artistic appeal or maybe you want to emulate a 19th century billboard, where mixing many fonts was perfectly normal. It always depends on the specific project. 

But now let’s look at some practical tips for mixing fonts. 

Stay within the type family or super family

You can hardly ever go wrong if you stay within a type family. You can always set your main text in the regular style of a font and use the bold weight for the headlines as an example. More and more typefaces these days even come in super families, which means they offer different classification styles (like serif, sans-serif and slab-serif) within one super family and the individual fonts are specifically designed to work together. This can be especially useful for complex design projects. It gives you a large palette of options to play with. 

Mixing fonts from a super family (Questa Grande/Sans/Serif)

Create contrast

If you do mix unrelated fonts, make sure they are not too similar. For example, don’t mix Arial with Frutiger, or Times New Roman with Garamond. The contrast needs to be strong enough to make sense. For example: mix a serif with a sans-serif or a sans-serif with a script font. You can even increase the contrast by choosing more contrasting styles among the type families you mix. For example: mix a thin script font with the heavy style of your sans-serif family. And even that can be taken further by using all-caps typesetting or by increasing the tracking significantly. 

Two mixing examples using contrast: thin script (LiebeKlara) + fat sans-serif (Grota) and bold serif (Warnock Pro) and thin sans-serif (Graublau Sans Pro)

Match the stress

Remember when we discussed how fonts can be categorized based on the stress within the letterforms independent from other features like serifs? This also comes in handy when fonts are mixed. If you want to mix a serif and a sans-serif, use typefaces that have a similar stress. A humanist sans-serif can work well with an old-style serif, because they share a similar writing pattern. In the same way, a geometric sans-serif also mixes better with a Modern serif like Bodoni (see image below).

Adobe Garamond Pro mixed with FF Tisa Sans (top) and Bauer Bodoni mixed with Montserrat (bottom)

Match the x-height

Font mixing of unrelated fonts usually doesn’t happen within a paragraph. But if you want to mix fonts within lines of text, you need to make sure to align the fonts in one way or another. The typical way achieve this is to match the x-height. Since unrelated fonts rarely have the same x-height when set in the same type size, you will probably have to change the type size of one font to create a matching x-height. The suggestions about contrast apply here as well. The contrast needs to be strong enough to make sense and playing with typesetting options like all-caps settings or the use of a background color can help as well.