Your choice of fonts sets the tone for how your document, website, or other design looks. Is it fun and friendly, slick and creative, or serious and formal?
As a general rule you’ll want to use two or three fonts in your project. But how do you know which to choose, and what font pairs go well together?
In this article, we’ll discuss font-pairing strategies and tools that will help you find the perfect font combinations to use in your project.
A Typography Primer
There are terms we use throughout this guide that might be helpful to explain…
Font vs. Typeface
The terms font and typeface are often used interchangeably, but they’re actually different things. A typeface is a family of fonts; a font is one of the individual style variations within that family. So, Times New Roman is a typeface, and Times New Roman Regular and Times New Roman Medium Italic are fonts.
Type Classifications
Type Classifications are categories 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. A good starting point for picking fonts is to choose a classification that’s appropriate for your project and its subject.
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
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.
Also, if you’re interested in the technical aspect of fonts, you can read about the difference between OTF and TTF fonts.
Choosing Your First Typeface
Some typefaces make things 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. The 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.
Picking a Font Pairing
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. 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 handwriting font, like in the example above.
Or combine narrow with wide—a good font pairing for Copperplate is something thinner like Helvetica Condensed.
2. 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.
3. Combine Serifs and Sans-Serifs
A quick and effective way to create contrast is to pair a serif font with a sans-serif font. As you can see in the example below a good Calibri font pairing is a serif font like Times New Roman:
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, and ensures your fonts complement one another.
4. Limit Yourself 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.
Font-Pairing Inspiration and Ideas
Finally, if you still find the idea of pairing fonts daunting, there are plenty of font-pairing 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. It uses the fonts available through the Canva design tool, so some common typefaces are not included.
Typ.io
The Typ.io website is divided into two sections. The first section features font combinations from around the web as a source of inspiration. 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 and Co’s Cloud Typography service.
Hoefler and 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 and 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.
Type Connection
Make a game 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?
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.
Font Pair is another handy tool for Google Web font 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. It’s especially good for web design, as the samples give you an idea of what your articles will look like using certain combinations.
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.
Find the Right Fonts
So now you know what to look for when choosing the fonts for your project. But what’s the best place to find those fonts to use?
Our guide to the best Google fonts will help you find some fantastic free fonts for websites and presentations.
And if you want an even bigger range to choose from, check out our list of the best websites to download and use free fonts.
Image Credit: mrdoomits/Depositphotos
Read the full article: Font-Pairing Strategies and Tools for Perfect Font Combinations
