3 Principles For Perfect Typeface Pairing

The number of amazing typefaces keeps growing and growing — there are new ones debuting every single day. It’s easy to get distracted and select your favorite fonts at random to use in your work. What’s harder is that if you want to make it to the top of the design field, you’ll need to master the art of effectively pairing typefaces.

When you’re dealing with pairing typefaces, there are 3 types of relationships between fonts that you need to guide you through the pairing process:

• Concordance: All of the type on your design is similar, typically used to refer to the use of a single typeface in multiple fonts on a page.
• Contrasting: 2 or more typefaces that are different but work well together.
• Conflicting: 2 typefaces which are too similar to one another to work.

The designer’s main rule of thumb is to try to achieve concordant or contrasting type, but avoid conflicting type. Below we’ll break down all 3 concepts into a set of easily followed rules for picking typefaces to pair.

Concordance

This is the simplest way of pairing fonts, because all you need to achieve concordance is one really excellent font in a couple of different styles.

Liberation is a handy superfamily (Image by Matthew Wiebe via Unsplash)

The way to start by picking a font superfamily. A superfamily is a typeface with multiple variations, which fall into different style categories. There are thousands of classifications for type out there, but most often they’re separated into four categories, under which there are endless subcategories:

• Serif: Garamond, Minion Pro, Chaparral
  • Subcategories: Old Style, Modern, Slab etc.
• Sans-Serif: Franklin Gothic, Helvetica, Proxima Nova
  • Subcategories: Grotesque, Humanist etc.
• Script: Lobster, Young Baroque, Mistral
• Decorative: Rosewood, Mythos STD, Boilerplate

A common superfamily contains typefaces that come in both serif and sans-serif format. A famous example of this is the Lucida font. It includes versions in Blackletter (Gothic), Handwriting, Sans Serif, Typewriter, and Calligraphy (script) — all in the same family.

Because these typefaces are designed to fit in the same family, they share key characteristics that help them work well together, which makes this the easiest way to pair fonts in a design.

The key to using concordance is that you should experiment with this! It doesn’t just have to be a serif and a sans-serif paired. Try one bold and one italic, part all caps and part lowercase, work with different sizes. And there are tons of superfamilies around, some awesome ones include Museo, Fruitiger, and Rotis.

Contrasting

This is a more difficult way to pair fonts, but can often be a more original and successful method for making your type use unique. The key is to find types that are different, but still have enough in common that they can work together. Even if your typefaces are completely dissimilar, if they share one or two of these attributes it can make the difference between a successful and failed pairing:

• X-height and glyph width: X-height is the height between the bottom and top of lower case letters, like “x” or “a”, and glyph width is how wide the characters are.
• Weight: Some fonts have thin lines some have thick — the former is a light weight and the latter, heavy.
• Shape of character: Take a look at the “o” in ten different fonts. Do they all have the exact same dimensions? No – some of them are uniformly round and many are more oval than circular. Some are long and lean, some are short and squat. There are dozens of ways that fonts can have different shapes, take a look at the ascenders and descenders (the parts that reach up and down in a “d” or a “p”, for example), or the shoulder of the letter “n.”
• Direction of axis: Draw an imaginary line through each letter, like the axis moving through the center of the earth. Different typefaces will have different angles in their axes, and those will have a significant impact on how the fonts look together.

Remember — these are just a small selection of the ways in which typefaces can relate to one another. There are tons more! For more details on typography terminology, check out Alex’s post Crash course in typography: Know your terms.

Check out some examples of successfully contrasting pairs:

Just because serif and sans-serif go well together, doesn’t mean that they can’t function on their own, either. The perfect example is Futura and Proxima Nova, who share a lack of serif, but not a weight or shape of character (image by Cornelia Büchse via Unsplash).

Bebas Neue is a bold all-caps sans-serif, while Libre Baskerville is a transitional serif. While they definitely don’t have x-height, weight, or shape of character in common, they do share a similar direction of axis. So they contrast, but it works (image by Ales Krivec via Unsplash).

They’ve both got a lot of unique character, but despite their Museo Slab and Nautilus Pompilius manage to play off one another, sharing enough of a similar weight to maintain a fun balance (image by Ruxandra Mateiu via Unsplash)

Conflicting

While you do want your text to have some similarities, there is a point where you can go too far. Where there’s not enough difference to allow the fonts to work together, creating an awkward conflict.

Hoefler and Adobe Garamond are both beautiful texts on their own, but sharing so many similarities makes them incompatible when it comes to font pairing (image by Logan Adermatt, via Unsplash)

Ways to avoid conflict:

• Pay attention to the font’s category: It’s fun to play with two serifs or scripts together, but it’s a difficult territory to tread in. Make sure that the fonts you select are different enough from one another to avoid conflict.
• Maintain hierarchy: Notice in all of our examples that we use size and weight to help distinguish between fonts. Hierarchy is key — so make sure that you’re your font choice mirrors highlights the relative importance of different parts of the text in your design.
• Use color: We haven’t used colored text in our examples, but a lot of the time you will be placing your text on a plain colored background rather than an image. So use color to your advantage to help differentiate segments of text and create hierarchy.

Extra tips

Though there is no single source of rules listing what designers should and shouldn’t do to be pairing type (because rules were meant to be broken), there are some guidelines that designers follow more often than not.

1. It’s generally suggested not to use more than three typefaces in any one design, and typically it’s better to use one or two. And when you select a typeface for a specific purpose, commit to it. Your headings, subheadings, and text should remain consistent throughout the project.
2. Pay attention to context. Pairing isn’t always going to work in the same way for every genre of design. A web design is fundamentally different from a print design, so make sure you keep context in mind when you’re choosing fonts. In addition, the tone of your work is going to be reflected in the text. So if you have a design for a children’s birthday party, make sure the text doesn’t look like it’s for a corporate briefing.
3. There are a ton of resources online to help you find great fonts to pair:
   • Google Fonts shows pairings for each font you select.
   • Just My Type is a collection of type pairings from Typekit and Hoefler & Co.
   • Type Connection is a game that teaches you how to pair typefaces.
   • Typography.com offers suggested pairings for each font you select.

This article was originally published at 99designs Designer Blog. Reproduced with permission.