close
Deborah
Deborah

How to Choose the Coolest Font Pairing?

It is easy to get lost in a world that has so many nice fonts. The digital world, we mean. So we have either the desire to try them all, or the anxiety that we were not creative enough, and had chosen a bad font. So let’s find out how to choose font pairing. We collected 10 rules to choose right.

 

Why bothering with fonts?

  • Different font types create a different atmosphere on your website
  • Not all the fonts are compatible with each other
  • The right font doesn’t strengthen the brand that much like the bad font weakens it. The user just won’t read your text, and if the text is the channel of communication of the brand with its consumers, then it will lose them.

 

The Main Principle of Pairing Fonts 

To choose the right fonts you should try them. So the main pairing principle is trying and experimenting. Decide what the font will be used for, and play with different concepts. Answer these questions:

 

  1. Will you use it for heading or body text?
  2. What is the text for?
  3. Is it the quotation font?
  4. What is the atmosphere of your message?
  5. How do you want to position your brand?

 

The answers to them will clear up your choice. If you are writing about serious stuff, then you won’t choose Comic Sans, right? Define the main role of your fonts, and then test them to see if the pairing works.

 

Some Tips

So let’s have a look at some tips to pair fonts.

1. Simplicity is the key

Don’t forget that your message is the most important. What do you want to tell your customers? Don’t hide the text behind the fonts. The content is always more important than the “form”, and the form should reflect the content. 

2. Fonts with a similar X-height are better to pair

Visually they look more natural together because of the similar heights. The fonts below have similar x-heights.

 

futura and baskerville font pairing

 

3. Choose one main font for the body text that suits it the best

And add additional fonts by it. Check if they match each other or not, mix and change if needed.

 

font pairing workflow

 

10 Rules to Choose the Best Font Pairing

#1 Rule

You should choose the fonts based on your brand. How does the brand position itself? What is the atmosphere? If you sell business books, then you will choose certain fonts that represent your brand. So the brand goes first.

 

 

#2 Rule 

Don’t overdo it. The font goes after the brand, so even if your website is for something peculiar, your fonts shouldn’t be so. The brand tells for itself, the fonts help him. So keep fonts simple. Not too simple, but still, don’t overdo it.

 

#3 Rule

Choose fonts that you already know. If you worked with fonts, and they suited right, don't be afraid to be boring and use them again. But don’t forget to check them with your brand.

 

#4 Rule

Keep brainstorming until you find the best pairing. Analyze the construction of your fonts.

 

X-height comparing
X-height is one of the factors by which you can find a font pair

 

#5 Rule

Choose the font for the main body text first. The font for the body text has strict limits: it should be easy to read, and not annoy the readers with intricate squiggles.

 

Left side: Osvald and Arial fonts. Right side: “Are you serious” font
Left side: Osvald and Arial fonts. Right side: “Are you serious” font 

 

#6 Rule

Additional fonts should reveal another side of your brand. The main body text’s font shows the key information about your brand, additional fonts reveal brands’ hidden benefits.
 

#7 Rule

Style your fonts. You can use your fonts in different ways to strengthen your content. Underline words, italicize, etc.

 

 

#8 Rule

Basic principles for art and design are harmony and contrast. Even if fonts are contrasting, they should look natural together.

 

Great vibes + Raleway are contrasting fonts but look natural together (left)
Elegant, vintage Pinyon Script font hates child-like and friendly Fresca font (right)

 

#9 Rule

Pay attention to the font constructions, so it will be easier for you to pair right. Fonts have x-heights, baselines, cap lines, etc. Check the end of the article to find additional sources from the FlowMapp blog. They will help you to understand the construction of fonts.

 

 

#10 Rule 

Repeat #4 rule if needed. 

 

Resources & Tools

Check these articles from our Design Glossary to understand fonts better.
 

  1. Read about the baseline
  2. Read about cap lines
  3. Read about ascenders
  4. Find out what is overshooting
  5. Read about line spacing
  6. Read about x-height
  7. Read about the kerning process


Conclusion

If you keep testing your fonts, you will minimize the mistakes of bad choices. Use these rules and read our additional articles to pair fonts like a pro.

People also Like