Every time a company uses one font for every part of a design, somewhere in the world, a font fairy dies. Maybe that company thinks that using one font for everything is a way to “stay simple”. Perhaps they wanted to take the guess work out of their style guide (see more below). They might just be uncertain how to get multiple fonts to play nicely together. Regardless of their reasoning for having a lonely font, I’m making it my mission to explain the benefits of designing with two fonts.

Many companies develop style guides for their business. This is helpful to their employees because (as I mentioned earlier) it takes the guesswork out of the development process. Style guides consist of many different components. For this discussion, we are only concerned with the approved typefaces that should be part of our style guide. Most typically, you’re going to want a specific font for:

• Headlines / H1’s (Sub-headlines and H2’s could be grouped here)
• Body Text (depending on placement, you might have both a serif and sans-serif option. See more on typeface basics here)

When it comes to pairing typefaces together, it is often much more of an art than it is a science. I was going to write about certain rules to follow when it comes to coupling fonts, but then I  realized that it would be impossible to give any sort of wide-sweeping “rule of law” since there are literally millions of possible font combinations. Rather than providing you rules to follow, here are some guidelines based on 3 Typographic Principles for you to keep in mind…

Concordance –

a harmonious state of things in general and of their properties; congruity of parts with one another and with the whole

This first principle is probably the most obvious. We want our chosen fonts to get along! If the two fonts that we choose are not visually harmonious, even the most design-unconscious viewer will be able to tell that something isn’t quite right. Thankfully, finding concordance between fonts could be as simple as using the same typeface (font-family), and using complementary styles. For instance, Myriad Pro Bold Condensed for the headline and Myriad Pro Light for the body copy.

Contrast –

opposition or juxtaposition of different forms, lines, or colors in a work of art to intensify each element’s properties and produce a more dynamic expressiveness.

Compared to the first principle, this is almost the exact opposite. Finding contrasting fonts that work together can be a difficult process for even the most seasoned designer. However, like most things in life, the more effort put in, the better the results are coming out. Contrasting fonts doesn’t mean that the fonts are completely dissimilar. In fact, they usually cooperate better when they share certain attributes. Some of the minute attributes of typography can be pretty complicated, but here are a couple you can easily recognize:

• Character Weight – An easy way to dramatically increase the contrast between fonts is to use differing weights. Headlines in a heavy sans-serif usually look nice when matched up with an easy-to-read, lightweight serif. You could also try the reverse!

• Character Relationship – One of my favorite indicators is the letter O. When pairing two fonts together, if one has a tall, oval shaped “O”, but the other font has a round “O”, generally those two fonts don’t seem to pair nicely. This isn’t always the case, but I’ve found it to be a good initial test.

Conflict –

to come into collision or disagreement; be contradictory, at variance, or in opposition; clash.

Similarities between fonts are a great way to make sure they work together, but be very careful not to let them get too close together. If the two fonts you choose are too much alike, you’ll end up with materials that look more like an accident, and less like a purposeful design. For instance, fonts like Clarendon and Rockwell look fantastic on their own, but if you were to use them together, it would be a train wreck.

Hierarchy is also a key element when using two fonts together. Even the best of font combinations can be ruined if there isn’t a clear hierarchy. Size, weight, color and even kerning can play a role in establishing dominance of one font over the other.
What are your favorite font combinations? Why do you think they work together?

Watch our Visual Content Strategy Webinar below.