Font-Pairing Strategies and Tools for Perfect Font Combinations
Pinterest Stumbleupon Whatsapp
Advertisement

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 Want Gorgeous Free Fonts? Here's 25+ Sites Where You'll Find Them Want Gorgeous Free Fonts? Here's 25+ Sites Where You'll Find Them Rather than wade through hundreds of fonts, here are a few sites that'll help you keep up with all the new fonts you'll want to use in your next design. Read More 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

Type Classifications are a category of fonts based on their appearance. A few classifications include:

  • Serif
  • Sans-serif
  • Gothic
  • Typewriter
  • Script
  • Decorative

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.

strategies and tools for perfect font combinations sans serif fonts

Superfamilies

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.

strategies and tools for perfect font combinations copperplate gothic

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.

strategies and tools for perfect font combinations bebas neue

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):

strategies and tools for perfect font combinations sans with serif

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.

strategies and tools for perfect font combinations sketch handwritten fonts

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 15 Free Handwriting Fonts You Should Download Now 15 Free Handwriting Fonts You Should Download Now Whether you're creating an infographic or coming up with a logo, you may be in need of a good handwriting font. Check these out! They're some of the best for free. Read More 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 5 Tools To Compare Typefaces & Choose The Right Font For Your Work 5 Tools To Compare Typefaces & Choose The Right Font For Your Work Fonts and typefaces are all around us. If you are a web designer you have to carefully select them. When we attempt to select a font, we do quite a lot of comparing between the... Read More 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.

strategies and tools for perfect font combinations canva

Typ.io

Typ.io‘s website is divided into two sections. The first section features font combinations from around the web as a source of inspiration:

strategies and tools for perfect font combinations typ.io

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:

strategies and tools for perfect font combinations typ.io

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.

strategies and tools for perfect font combinations hoefler and co

Pinterest

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:

strategies and tools for perfect font combinations pinterest

Type Connection

Make a game A Test Of Character: 10 Font Games That Prove Typography Can Be Fun A Test Of Character: 10 Font Games That Prove Typography Can Be Fun Playing around with typography can be fun. You will love these games if you like the sound of the quick brown fox who jumped over the lazy dog. Find out what we are talking about. Read More of pairing fonts with Type Connection. The website lets you choose your first font, and selecting your second becomes something of a “choose your own adventure.”

Do you want to go with something that comes from the same family, a similar font, a contrasting font, or dip into the past?

strategies and tools for perfect font combinations typeconnection

Google Type

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.

strategies and tools for perfect font combinations google type

Font Pair is another handy tool for Google Web font How To Use Google Fonts In Your Next Web Project & Why You Should How To Use Google Fonts In Your Next Web Project & Why You Should Font choice is an integral design decision on any website, yet most of the time we're content with the same old serif and sans-serif family. While the main body of text should always be something... Read More users, making suggestions for header and body font choices that pair well.

Typespiration

Typespiration gives you ideas not only for how to combine fonts, but also throws in color schemes for good measure.

strategies and tools for perfect font combinations typespiration

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.

strategies and tools for perfect font combinations web font blender

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

Leave a Reply

Your email address will not be published. Required fields are marked *