How to Combine Fonts

Finding the right font can be a challenge in and of itself. Then there’s the challenge of finding another font or two that look nice with it. While there aren’t precise rules for combining fonts together, here are some best practices that can help you get started: 

1. Create contrast.

Contrast between your fonts will highlight the different roles that your fonts are playing, as well as draw attention to important pieces of information. Furthermore, contrasting fonts tend to look nice together.

You can achieve contrast through differences in size, style and weight, or by pairing a sans-serif font with a serif font. Sans-serif/serif font pairings tend to work well together — it’s a popular, easy choice among designers.

2. Find a couple of shared characteristics.

While you do want contrast, you’ll also want to be sure that your fonts have a sense of harmony. Finding fonts with a couple shared characteristics will help you achieve this. For example, try combining fonts with similar x-heights, proportions or spacing.

PT Serif and PT Sans have similar x-heights. Fonts from the same family / creator typically have shared characteristics and pair well together.

3. Avoid pairing fonts that are too similar.

As you’re looking for shared characteristics between fonts, remember not to lose your sense of contrast. Your font choices should be distinct — it should be obvious that they are two different fonts, and that your choices were deliberate. Too many similarities may create confusion and discord.

There is not enough contrast between these fonts.

4. Pair complementary fonts.

Fonts have personalities: bold, light, playful, conservative, elegant, etc. If you’re using a bold font, for example, in your headings, try pairing it with an opposite, complementary body font — something more neutral.

5. Limit your number of fonts.

Best “font pairing” practices generally say to stick to 2-3 fonts. You can establish a visual hierarchy by assigning certain fonts to headings, subheadings, excepts and body text.

In general, you won't need more than three fonts (as used above).