What you need to know to pair fonts well

Typography is one of the elements of design that some designers tend to struggle with the most, and is often the one thing that can make or break a design. With so many graphic and web designers teaching themselves how to create amazing designs, it is definitely an artform in and of itself and requires practice and patience.

Typography, more specifically the selection of typefaces and the arrangement and adjustment in using the typefaces, can cause issues for even the most experienced and educated designers, let alone be something that can cause headaches to those just beginning.

Pairing typefaces seems to be what gives designers in the digital age the most headache. With thousands and thousands of fonts available for the picking, how can you know if your font selections will work well together in your design? Let’s talk about several tips and techniques to help evaluate your font pairings.

Use at the most two (or in some cases, three) fonts

This is probably the number one thing that can improve most designs. The rule of thumb is normally to use at the most two different fonts in one design. Sometimes you can get away with three different fonts, but it is much more difficult to pull off and really depends on the use and need for three different fonts. For the sake of this article, we are going to stick with using the maximum two different fonts for a design.

If you start using more than two fonts in a design, you often start losing legibility and it starts to feel chaotic and messy. You can easily lose the rhythm and readability when the user has to constantly adjust to different fonts. With two different fonts, you can create a rhythm that queues the user into knowing what content serves what purpose and allows for them to scan the page for such content.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

The idea of using two fonts only allows for you to have one “header” font and one “body” font (at least that is what I call it). You will have one that you will use primarily for headings such as titles, subtitles, callouts, and in-line headings. The other one will be used as your main body font, or the one that is used the most in a design. The “body” font is the one often in <p> tags in websites or is the bulk of the content on a printed page. Your body font should be used more than your header font.

Most common type of font pairing: Serif and Sans Serif

The most fool-proof method to making sure your font pairing works well is pairing a serif with a sans serif font. If you aren’t sure what the difference is, an easy way to see is if the font has serifs, or what I like to call “feet.” Above, Georgia is a serif font and Helvetica Neue is a sans-serif font. Georgia has little serifs that I have circled in blue. Looking at the similar places on Helvetica Neue, these serifs are missing, or are sans their respective serifs.

The pairing of a serif font with a sans serif font works so well because it provides enough difference between the fonts to help in distinguishing different types of content. When this combination is used, often serifs are used at the body font, because serifs on fonts help make them easier to read long blocks of text.

Don’t choose fonts that are too close in appearance

Another thing to keep in mind is how alike your fonts are to one another. You want to avoid fonts that are are so close to each other that those who are not typography experts can’t see a visible difference between the two.

For example, in the image above, Palatino and Times New Roman are so close together in their appearance that the untrained eye might have a hard time telling them apart. In contrast, the font pairing on the right with Palatino and Century Gothic provides enough contrast in the way the fonts look that everyone can easily say “yes, those are two different fonts.”

For those who are more familiar with typography, it is best to not pick two fonts that are in the same classification. For instance, you would not want to use two slab serif fonts together, such as Arvo and Clarendon, because both of their serifs are very similar (they are slab serifs, after all). Same goes with other types of fonts as well: you don’t want to use two very light fonts together or very dark and heavy fonts together, two very bold and heavy fonts together, or two script-type fonts together.

Check your x-height for compatibility

To state it simply, the x-height of a font is the imaginary horizontal line that is at the very top of most of the lowercase letters of a font.  Not including the letters with ascenders (such as the letters d, l, t, and h) or descenders (such as the letters p, q, and g), the x-height should be the height at which the letters reach.

For font pairing, you want your fonts to play well together on a text-heavy page. Checking the x-height of the fonts you are using allows for you to balance each font out and allows for greater readability.

The easiest way I have found is simply overlapping the fonts in your favorite design program. You can see that I have done that above with two different font pairings. On the left I paired Georgia with Impact. This is a bad combination for many reasons but as shown in the image, their x-heights do not line up when they are put on top of each other at the exact same point size. On the right, Arvo and Helvetica Neue can work together since they are right at the same x-height when presented in the same point size.

Try increasing the contrast between fonts

You can often increase the contrast in your font pairings by finding a font that is “dark” or “heavy” on the page. In other words, find a font that appears already bold. There are many fonts available that are very heavy in appearance that will help you gain contrast in your font pairings. I often use the heavier of the two fonts as the “heading” font and the ligher of the two for “body” font, as heavier fonts are often hard to read in a body text situation.

Let’s use the image from the x-height example. Impact is a very heavy font whereas Georgia is a light font. Although we both know this is a bad pairing because of the difference in x-height, let’s pretend their x-heights are the same. Impact is very heavy on the page as it is very bold. Georgia is a airier and lighter. This provides enough contrast if you were to use Impact as your heading font and Georgia as your body font, but not visa versa, because Impact is very hard to read if having to read more than a few words in one line.

Helvetica Neue and Arvo, on the other hand, do not provide enough contrast to each other. They both have the same overall thickness in the stems and bowls of the fonts. Lining those up together would not be a good pairing because there is no visible contrast other than Helvetica Neue having no serifs.

Above all, make sure the combination can be read

While all of the above tips can help you improve your font pairings, you should always keep in mind the readability of the pairings. A quick check of this can be to simply use some Lorem Ipsum or a block of copy you are working with, lay out a sample of the typography you plan to use, and ask someone to read it (best if you have other designer friends). After they read it ask them questions like, “was it easy to see the words on the page?” “did you struggle trying to read the copy?” “could you tell the difference in the fonts?”  Answers to these questions can help you step away from your work and test it in the real world before you go live or print something that could be hard to read.

What are some of the other techniques you use to make sure your fonts are paired well?

Image Credit: Ruth Ellison