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.
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.
Regardless of whether this norm is widely enforced, be warned: use the following fonts at your own peril.
A adaptation of Comic Sans named Comic Spurs
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.
An awkward mixture of Impact, Helvetica and Roboto
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:
The font pairing on the can says Pepsi x Aape but someone went ape on the fonts for the advertisement (credits: Reddit)
Enough said. (credits: Reddit)
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 match Google Fonts
Typ.io gathers inspiration across the net
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
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).
Second, for two fonts on the same line, use fonts with the same x-height as illustrated by the picture below.
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 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.
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:
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.
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
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.