The Complete Guide to Successful Font Pairing
Finding, choosing and pairing fonts for your brand is an important, and fun, part of designing a brand identity. In an effort to make it more on the fun side, I’ve listed some tips and resources below to help guide you.
PAIRING FONTS BOOSTS READABILITY
You might be wondering why you can't just use one font for everything. The short answer is that pairing fonts creates differentiation within your copy.
If you’re using one font at one size and one weight for everything on your website or marketing materials, your viewers and readers have no idea where to look or what information is most important for them to digest. Everything looks the same and equally important, which translates to boring and hard to follow.
In this age of quick skimming, people rarely read a webpage or brochure thoroughly. They want to be able to skim what they’re reading quickly and still get the idea.
Headers, sub-headers, pull quotes, and highlighted in-body text are used to call out text that is important and help readers grasp the crucial points quickly. In order to do that successfully, though, there has to be enough differentiation between the body copy and those elements.
HOW MANY FONTS OR VERSIONS OF FONTS DO I NEED?
Follow the steps outlined below to figure out whether you can get away with one font family and how to pair two fonts when you need more than one. Combining more than two fonts at a time (unless you're going for a look that purposely uses many, many different fonts) is not recommended.
1. Determine what jobs you need your fonts to do.
For instance, if you’re creating a web page that outlines your services, you’ll probably have headers and body copy. You might also have sub-headers and pull-quotes.
2. Pick a font for your body copy.
This font will do most of the heavy lifting, as it’s likely you’ll have more body copy than headers and such. Your highest priorities for your text font are readability and personality. You want to ensure that whatever you choose is both legible AND communicates your brand's personality.
3. Does the font family include different weights and styles?
If the font you’ve chosen for body copy is a large font with many different weights and even styles, you probably can get away with just one font. In fact, this is often ideal because it ensures your website or brochure, etc. will have a unified look. You’ll just want to make sure to differentiate your elements (body copy, headers, etc.) by using different weights, sizes, colors or case style (all caps vs. sentence case, for instance).
PAIRING FONTS SUCCESSFULLY
If that doesn’t work or you’d rather mix it up more, you’ll need to find a second font that will maintain a cohesive look and feel while also adding contrast to your copy.
This is where it can get tricky. You want your page or piece to look unified and reinforce your brand’s message and personality. At the same time, you need variety and contrast. This will guide your reader to what’s most important and help him or her get your message quickly.
The truth is that pairing fonts is more of an art form than a science, and there are really no hard and fast rules. Instead there are some guidelines you can follow, especially when you’re at the beginning of your font-pairing career.
Pick fonts that have a similar mood
Both fonts you choose should reflect your brand’s personality. Don’t pair uptight Myriad Pro with loose Rage Italic.
Instead, you want to pair it with something that also says professional and buttoned up like Minion Pro.
Choose fonts from the same historical period
I'm going to be honest here and say that I've never done this, but after quite a bit of research, I came up with a good combination. I should also say that I can't remember the last time I used Palatino for anything (partially because I don't use a lot of serif fonts), but if I ever need a serif to complement Trade Gothic, I'll be all over it!
Look for fonts that have similar features
Look for similar kerning, x-heights, cap heights, etc. (see last week's post for typography terms defined). One way to do this is to look for different fonts from the same designer.
Make sure there's enough contrast
Using fonts from the same style (like the two san-serif fonts I've used above) generally isn't a good idea (see last week's post for the different font styles). Fonts that are too similar won’t create enough variation and may even look like a mistake. To make it work, I've used one font that is quite square and heavy with another that is more rounded.
One of the easiest ways to ensure you have enough contrast is to select fonts from different styles. Combine a san-serif with a serif font or a decorative/handwritten font with a more simple serif or san-serif, as I've done below.
You can also pair a very condensed font with a more standard font or a very distinct one with something more neutral. There are lots of options!
Whatever you choose, you’re looking to create a balance between the two fonts. Neither should overpower the other.
RESOURCES FOR CHOOSING AND PAIRING FONTS
There are a ton of resources out there, but some of my favorites are:
MyFonts is a great place to look for and purchase fonts of all kinds.
Font Pair helps designers pair google fonts
Type Connection is a game that helps you learn how to pair typefaces.
Typ,io provides examples from around the web of fonts that work well together.
