Typefaces aren’t solitary creatures. They like to hang out, and it’s up to you to make sure they play well together.
Choosing a typeface is a lot like getting dressed to go out. If you’re going to the opera, the choice is pretty easy. But sometimes you’re invited to a Michelin-starred restaurant/roller rink and the choice becomes a little less clear.
The key is figuring out the message and the audience. Once you’ve determined those two things, you can begin refining your options.
The mechanics of actually choosing the perfect typeface can be a bit touchy-feely, and it varies from designer to designer, but in the end the only thing that will matter is whether the typeface is appropriate for the message.
A Typography Primer
There are a couple of terms we’ll be using throughout this guide that might be helpful to explain.
Font vs. Typeface
The first is the difference between a font and a typeface. While often used interchangeably, these are actually not the same thing.
A typeface refers to an overarching set of fonts. So for example, Times New Roman is a typeface. But if you want to use the bold or italic version of a typeface, that’s a font. So, for example, Times New Roman Bold is a font.
Type Classifications are a category of fonts based on their appearance. A few classifications include:
These are simply the categories of types that you’ll find on various type websites, foundries, and more.
Serif vs. Sans-Serif
One of the most common classifications for typefaces is serif versus sans-serif. Not sure what the difference is? A serif font has fine lines at the tips of the letters. A sans-serif font doesn’t have any extending features.
Superfamilies are a group of typefaces that fall under several classifications. The typeface will start with the same basic shape and then will have elements added to it to fit a specific classification. A common example of a superfamily is the Lucida Superfamily.
Choosing Your First Typeface
Some typefaces make your life a little easier by seeming to have only one purpose in life. If you’re considering Copperplate Gothic, you’re probably designing a steakhouse menu or something to do with a bank.
Unfortunately, it’s rarely that easy. If you’re having trouble finding an appropriate candidate, consider doing a little research. Look for examples that can help point you in the right direction.
Remember, you’re not looking to copy, you’re looking for inspiration. Chances are someone has solved this problem before, and their solution could help inform yours.
Once you’ve chosen that first typeface, it’s time to think about its complement.
Finding Your Second Typeface
There are plenty of guidelines for figuring out which fonts pair well together. Some of these guidelines can be combined, and others contradict one another.
While there are some things that should absolutely be avoided when it comes to font pairing (like using way too many fonts), there are other guidelines that are more flexible, and depend largely on the mood or purpose of your design.
Here are a few to keep in mind.
1. Keep It in the Family
One of the easiest things you can do is to simply limit your choices to one typeface and vary the fonts by changing the size, weight, or slant. This might not be the most creative choice, but it’s the simplest way to create a bit of diversity with your text.
Some typefaces have a pretty extensive set of fonts. Bebas Neue, for example, comes in a variety of weights. Combine Bebas Neue Bold with Bebas Neue Light in different sizes and you’re one step closer to a great design.
While Bebas Neue is a capitals-only typeface, you can also play around with capitalization as a way to add some interest to your design.
If you want a little more variety, but find that keeping it in the family works best for you, look for superfamilies. The Lucida Superfamily includes Sans, Serif, Typewriter Sans, Typewriter Serif, Math, and other typefaces.
2. Combine Serifs and Sans-Serifs
A common approach to combining typefaces is pairing a serif with a sans serif. You can see in the example below the difference between a serif font on top (Times New Roman) and a sans-serif below (Calibri):
One of the easiest ways to select complementary serif and sans serif options is to keep it in the superfamily. Viget provides an extensive list of superfamilies that can be useful. This is one of the easiest ways to make sure that your serif and sans serif fonts complement one another.
3. Limit to Two or Three Fonts
You’ll be hard pressed to find a professional designer who doesn’t live by this cardinal rule of typography. If you’re combining fonts, you’ll want to limit yourself to two or three.
If your design contains a header, subheader, and body, you can use three different fonts. You’ll probably want to stick to just two if your design is less text-heavy.
There are exceptions to the rule, but only in very particular kinds of design.
4. Create Contrast
“Opposites attract” is definitely true when it comes to fonts. You don’t want to use options that are too similar. It either simply won’t add anything to your design or it will look slightly off.
Instead, pair a swirly font with a bold one. Pair a light and airy font with a thick one. Hook your serif typeface up with an elegant, cursive option. Pair a slab serif with a handwritten font choice choice, like in the example above.
Finding Inspiration and Ideas
Finally, if you still find the idea of pairing fonts daunting, there are plenty of tools out there to help you make sure little Calibri doesn’t end up running with a bad crowd.
Canva’s Font Combinations
Canva’s Font Combinations lets you select your first choice and makes suggestions on what its partner should be.
And the other section features lists of fonts that pair well together based on the function, such as whether they will be used for header or body text:
Just My Type
If you find yourself designing in the Adobe suite of programs, Just My Type will come in very handy. The site offers pairing suggestions for Adobe’s Typekit fonts as well as from Hoefler & Co’s Cloud Typography service.
Hoefler & Co. also has a really handy guide on picking “font palettes” They recommend combining fonts from the same historical period with different features or similar line quality with different textures. The font suggestions come from Hoefler & Co. but you can apply the rules to other fonts.
As with most things visual, Pinterest is a great source of font-pairing inspiration. Just search for “font pairing” or “typography” and you’ll find a ton of great suggestions:
Do you want to go with something that comes from the same family, a similar font, a contrasting font, or dip into the past?
If your font source of choice is Google Fonts, Google Type is a great source of inspiration for how these fonts pair well together. Using text from Aesop’s Fables and photos from Unsplash, the site is a visual inspiration for how Google Fonts play well together.
Typespiration gives you ideas not only for how to combine fonts, but also throws in color schemes for good measure.
Web Font Blender
Web Font Blender doesn’t make the suggestions for you, but it allows you to play around with different Google Fonts and preview them with sample heading, subheading, and body text.
As a bonus, it generates the CSS you would need to use these fonts in an online design.
What are you favorite combinations? Are there any tools you can’t live without to help you pair up your many font choices? What are your tips for finding the perfect match? Let us know in the comments.
Image Credit: mrdoomits/Depositphotos