The art and science of Font Pairing: Choosing the right font pairing and why it is important

They say fonts are just like the clothes that words wear. And just like how we constantly worry about dressing for any occasion, choosing and pairing the right fonts for any design project is a constant headache for content producers. Choosing the right fonts not only improves visual effectiveness and impression of any design but also, ultimately, its ability to convert.

Happy Father's Day from all of us at Raydar

Now, before you run your mouse to close the tab, this article is not just another list of favourite font pairings. Nor will it be another generic guide to teach you about choosing the right font for your project. Instead, I hope by the end of this article, you will be able to improve your workflow as a designer, marketer or content producer, by learning more about the art and science behind font pairing as well as possible innovative ways to decide the right font pairs.

A Visual Introduction to Font Pairing

As users are more distracted now than ever, a breakthrough design has to be both eye catching and stand out from the crowd. Amidst the intense competition, font pairing is a great way to attract your audience's attention. But how do we know which different fonts to use in a design and what makes them work?

What designers abhore.

First off, let us be aware of an industry-wide distaste for certain type of fonts. To any designer, 12 px Times New Roman is potentially puke-inducing.

Never tell a graphic designer to use 12 px Times New Roman

Regardless of whether this norm is widely enforced, be warned: use the following fonts at your own peril.

Comic Sans has been a nono for graphic designers since forever

A adaptation of Comic Sans named Comic Spurs

Comic Parchment w

An amalgamation of between Comic Sans and Papyrus font from Ben Harman

When font pairing goes wrong

To understand what makes good font pairs, lets take a look at bad examples. It doesn't take a graphic designer to know when a pair of fonts is messed up. The pairing of fonts makes the graphic design visually unpleasant to look at and may even convey the wrong message to readers.

Bad Message from the Faculty Design

An awkward mixture of Impact, Helvetica and Roboto

Im not sure what to make out of this poster

An informative poster(?) about a serious issue using Curlz and Arial (credits: Reddit)

To further emphasize my point, take a look at these hilarious examples:
Pepsi Aape Advertisement

The font pairing on the can says Pepsi x Aape but someone went ape on the fonts for the advertisement (credits: Reddit)

One Thousand and One Christmas Farts and Fancies?

Enough said. (credits: Reddit)

Handyman Service with Rainbow Fonts

Say "NO" to rainbow fonts and colors (credits: Reddit)

On the other end of the spectrum, we have font pairings that just fit. Here are some websites which provide really good suggestions on font pairing to start with:

Font Pair helps designers pair Google Fonts together

Font Pair helps designers match Google Fonts

Font Pairing from typ.io

Typ.io gathers inspiration across the net

Font Pairing themes from Typewolf

Looking for curated font recommendations? Try Typewolf.

What exactly are the differences between good and bad font pairing besides just their visual appeal? How do designers decide which font to use and what exactly makes two fonts tick?

Rationalising Font Pairing

While there doesn't seem to be a tried and tested manual to font pairing, there are certain patterns and trends which would be helpful for choosing the right font pairs.

Contrast not Conflict

For font pairing, we want to create contrast and avoid conflict. There are two layers to this proposition.

Our first goal is to avoid conflict at any cost. Basically, conflicting fonts tend to be pairs that are significantly distinct from each other. The pairing of such fonts creates visual disharmony and compete for your attention. These font pairings are unpleasant to look at, for example

Visual Disharmony at its best

Secondly, we also don't want our fonts to look too similar. Similar fonts tend to share the same visual effect. The purpose of font pairing would be defeated if there is no visual impact created by the use of different fonts.

Ideally, what we want to achieve is the best of both worlds. In other words, we should keep fonts complementary while having a visual distinctiveness. Having contrast is one way to do this. In most cases, fonts work well together if they have at least one thing in common but are otherwise different in look and feel.

Here are two sure and easy ways to use different font pairs,

  • First, use fonts from the same family (typeface). Using fonts from the same family guarantees a degree of contrast

  • Second, for two fonts on the same line, use fonts with the same x-height as illustrated by the picture below. Use fonts the same x-height

Use the right font pairs to establish context

Context is key to any font choice and pairing. Different fonts convey different themes and emotions. Some are loud and flamboyant (Buttermilk) while others are classy and refined (Libre Baskerville, Bodoni). There are fonts which are play and fun (Yellowtail) and those which quiet but interesting (Montserrat). When we choose or pair fonts, we should ideally match them to the context which the brand or design is attempting to convey.
Use different font pairs for different contexts

Use the right font pairs to create Visual Hierarchy

Another useful thing to note is the visual hierarchy of the design when choosing font pairs. Ideally, we want font pairs which correspond to the visual hierarchy of the design. Visual hierarchy is a core concept in any design. It highlights the most important things to look for and focuses the reader's attention on what matters the most. Using different fonts can improve the overall look of the design and prevent fonts from stepping on the toes of one another.

Many articles recommend using Serif fonts as headers and Sans Serif fonts as the body. This is a good starting point but not a fixed rule. Other ways of introducing visual hierarchy include using different size and weights to enhance or reduce visibility, using colors and doing more with less using white space.

Be creative!

There are no hard and fast rules to font pairing, just as there are no limits to creativity. While we may have had a good laugh at the bad font pairings above, they do catch our attention, albeit in an unintended way.

Our advice is keep it simple, try out different font pairings and react. If certain fonts do not resonate with your readers, be prepared to switch it up and try new things.

Here are some awesome websites to get inspired and/or started:

Canva, The Ultimate Guide to Font Pairing

Elegant Themes, Font pairing in Web Design

Conversion Minded, Free Font and Font Pairings for Web, Social and Blog Images

For the lazy or newbies

For those new to font pairing or the lazy, let technology do the work for you. Enter Fontjoy, brainchild of Jack Qiao, which uses machine learning to help you with font pairing.

In layman terms, each font can be broken down into features that represent “visual concepts like type, weight, obliqueness” or “abstract concepts like legibility, kerning and color". Through a neural network that runs on a similarity metric developed by Qiao himself, the computer learns to compare and find fonts which pair well with each other.

Example of a computer generated font pair from Fontjoy.com

While Qiao recognises that there may be pairings that do not always work well together and the AI is still a work in progress, the computer does create interesting font pairings which may surprise you.

Since I’ve discovered Fontjoy, I’ve been consistently testing out recommended font pairings on our social media. Here are a few examples below, accompanied by stock photos from goraydar.com

Instagram examples of computed generated font pairs

To what extent are computer generated font pairings good? Check out our Instagram posts @goraydar and let us know!

Summing it up

With an increasing number of type foundries and fonts digitally available today, designers have a wealth of variety to express themselves. Just like wearing the right clothes for the occasion, having great font pairing is a good way to increase the visual appeal of any content. When in doubt, always look back to first principles and don't be afraid to experiment.

Be adventurous! And you may be surprised at what you would find.