Discover the magic of font pairing with this complete guide. Team your type with confidence for print and web design with these expert tips.
The secret to perfect typography lies in the elusive, project-transforming power of font combinations. Designers often spend a large amount of time and effort tracking down the perfect font pairing for their design—two or even three complementary fonts which can be applied to headline and body text.
With the right font pairing, your typography will appear more professional, polished, and attractive in an instant. Whether you’re putting together a layout for a website, social media post, or business card, these pro tips for pairing fonts will give you the confidence to choose font combinations that look spot-on every time.
Read on to discover the best font pairings, essential font pairing techniques, as well as typeface suggestions for font pairings to suit the project you’re designing for.
License this image via Stock Holm.
What Are the Best Font Pairings?
The best font pairings will abide by one of a number of typographic guidelines, which look to shared qualities or seamless contrast to craft the perfect font pair.
Pairing fonts is an art form, but teaming your type need not be difficult! With the right font pairing tips on hand, you can pair fonts well each and every time, creating harmonious font combinations that enhance your design projects.
Here, we’ll look at eight font pairing tips that will set you on the right path to typographic balance, including:
- The Classic Contrast Pairing: Sans Serif and Serif Font
- Match the ‘X-Height’
- Source Your Font Pairings from a Superfamily
- Mix Your Font Weights
- Create Font Pairings from Subcategories
- Combine Display Fonts and Traditional Serif Fonts
- Identify Shared Personality Traits in Paired Fonts
- Stick to 2-3 Fonts in a Font Pairing
Read on to find out more about each font pairing technique in detail, along with inspirational examples and suggested fonts to make your font combinations sparkle!
License this image via Matveev Aleksandr.
1. The Classic Contrast Pairing: Sans Serif and Serif Font
The first sans-serif typeface (i.e. a type style lacking ‘serifs’ on the end of letterform strokes) didn’t appear until the 19th century (in an 1819 type sample book by typographer William Caslon), and the modernist sans-serif fonts designers know and love today only gained popularity during the mid-20th century.
When we look at designs predating this period, it’s the complete dominance of more traditional serif type styles which lend them that antiquated look.
Teaming a serif font with another serif font is perfect if you’re aspiring to a vintage or traditional look in your design, but it’s the golden pairing of a sans-serif font with a serif typeface that professional designers turn to when they want their layouts to look elegant, yet contemporary and fresh at the same time.
The reason this pairing works so well lies in the contrast between old and new.
Finding the perfect sans-serif and serif font combination is often a case of experimentation. However, a good font pairing tip is to be mindful of which way you use these font styles, and for what purpose.
Sans-serif headlines teamed with serif body text usually hits the mark more often than the reverse combination when designing for print. This is because sans-serifs, with their clean, pared-back styles, really suit headline text, while serif typefaces bring bookish elegance to body text.
A Font Pairing to Try
Bebas Neue headline text with Caslon body text.
However, when crafting layouts for web, designers will often opt for the reverse combination, teaming serif headers with sans-serif body text. Why? This is not an absolute rule, but generally sans-serif text is much easier to read at small scale on a screen than serif font styles.
Setting headings in a serif font also adds a more authoritative design touch, which makes the webpage appear as if it’s taking cues from print design. Look to this strategy in use on the websites of The New Yorker and The Washington Post.
A Font Pairing to Try
Birch headline text with Soleil body text.
License this image via Stock Holm.
2. Match the “X-Height”
Ever wondered why one font can be utterly different from another, yet look fantastic when paired together? It’s likely that another pro font pairing trick is at work, which is matching the “x-height” of two fonts.
This font pairing tip works as a sort of optical illusion. The eye is tricked into thinking the two fonts are more compatible than they actually are because they share the same base proportions. You read the text seamlessly, without interruption, because the height of the letters match and it doesn’t disrupt the flow of the type.
This simple trick won’t work with every experimental font combination, but it will have an instant polishing effect on font pairings that are not-quite-working-but-almost-are.
This x-height font pairing tip also works best on layouts that use two typefaces at equal proportions or sizes. High-impact layouts like posters and landing pages make perfect testing grounds for this combination, as you can more-closely control the x-height of large-scale text.
A Font Pairing to Try
Lapture and Freight Sans.
This combination of display font JAF Lapture and clean sans-serif Freight Sans are brought into harmony by matching the x-height. License this image via Stock Holm.
License this image via Rawpixel.com.
3. Source Your Font Pairings from a Superfamily
Most typefaces belong to a “family” of related fonts. This might be as simple as having three of the same type styles set in different weights, such as Regular, Bold, and Italic.
However, some fonts are members of a much larger group of related fonts, which can extend into dozens of styles. These are known as superfamilies.
A superfamily will likely include more stylized variations of the original roman weight, such as condensed, outlined, and expanded. Some font superfamilies will also include more stylized display font versions of the typeface.
Pairing two fonts sourced from either the same family or superfamily is a super easy way to create a layout that feels pulled-together. The reason this pairing works so well is that the fonts are similar in proportion, personality, and style, which has a calming effect on the eye.
For layouts that need a more traditional or formal feel, this sort of font pairing works particularly well, as it relies on similarity and stability rather than contrast.
Having said that, there are plenty of font superfamilies that have a playful vibe. Try the font pairing below for typography that feels fun and fresh.
A Font Pairing to Try
Roboto Slab headline text with Roboto body text.
License this image via Daria Travnikova.
4. Mix Your Font Weights
Perhaps the simplest font pairing trick is to simply combine variations, or weights, of the same font, which works nicely when you need a quick solution.
Open almost any novel and, more often than not, you will find that the same typeface has been used throughout the entire book. For lengthy documents like books and reports, it’s a good rule of thumb to stick to variations of the same font. This is because looking at pairs of different fonts on every page of a long document can interrupt the flow of reading.
If you want to create a design that flows effortlessly and looks elegant, try pairing body text set in a Regular, Book, or Roman weight with headers set in Bold. Setting subtitles set in an Italic weight of the same font adds a little variety without breaking the flow.
A Font Pairing to Try
Noe Display Bold headline text with Noe Display Italic and Regular body text.
License this image via LilacHome.
5. Create Font Pairings from Subcategories
As well as being part of a family, all fonts will belong to a subcategory, which is a much broader group of typefaces that share the same stylistic traits.
Subcategories tend to give fonts a particular personality or mood—in part, this is reflective of the fact that most members of a subcategory date from around the same period.
For example, the Old Style subcategory applies to serif fonts with a traditional, formal style. These elegant typefaces, including well-known favorites Garamond, Goudy, and Bembo, tend to originate from type styles developed during the 18th and 19th centuries.
Some subcategories pair well with other subcategories, and others less so. Knowing some of these tried-and-tested combinations can lead to a very special font pairing.
Let’s take a look at some of the best subcategory teams:
A Font Pairing to Try
Mrs Eaves headline text with Futura body text.
License this image via kristiillustra.
6. Combine Display Fonts and Traditional Serif Fonts
You don’t always have to rely on a large font size or a bold weight to make your font headings stand out. Display fonts have been designed to make an impact, even when set at a smaller scale, and for font pairing purposes, these quirkier display font styles look fantastic teamed with more traditional serif fonts.
The beauty of this font pairing is in the contrast between kooky display fonts and traditional serif typefaces.
Working on an on-trend, yet text-heavy, layout like a magazine spread or a website? Try pairing a high-impact display font with classic serif body text to strike the perfect balance between style and readability.
A Font Pairing to Try
Dazzle Unicase headline text with Fournier body text.
A Font Pairing to Try
Gambado headline text with Signifier body text.
License this image via Tint Media.
Humans have always allocated personality traits to even the most abstract of objects and images. Perhaps unsurprisingly, this behavior extends to fonts too, and it’s the reason why marketers will choose a font with a friendly, rounded design to make you feel reassured about purchasing an item.
You see the font—e.g. Linotte is one of the friendliest around and free—and assess it as having an approachable, positive personality, based on its stylistic traits alone. Similarly, an Old Style serif has a more distinguished and serious personality, which lends well to being used for the logo designs of solicitors’ practices and upmarket restaurants.
Many designers will pair fonts based on an intrinsic sense of shared personality rather than on a formal rule. A font with a particular mood will pair well with another which shares the same personality traits, even if one is a serif font and the other a sans-serif typeface.
Seasoned designers may “just know” when one font shares the same personality as another, but there are ways you can tap into that pro designer mindset. Most font sites will tag their fonts, splitting them into micro-categories which you can use to find fonts that have different styles but similar moods.
On FontSquirrel, for example, you can browse tags such as grunge, friendly, casual, retro, rough, or high-tech to pinpoint the exact vibe you want your font pairing to bring to the table.
A Font Pairing to Try
Fabiola headline text with Superior Title body text.
License this image via Natallia Yaumenenka.
8. Stick to 2-3 Fonts in a Font Pairing
Font pairings are pretty fun once you start using them, but it’s wise to practice restraint with how many fonts you use on a layout. The brutal truth is that most layouts only need two fonts, but your restraint will be rewarded with a beautifully balanced design.
With some designs, you might stretch to three fonts, but adding more than this to the mix can be a recipe for disaster. Limit the number of fonts on a page to two at best, three at most. A heady mix of fonts can confuse the eye and cause your design to look messy.
So, unless you’re aiming for a Victorian eccentric mood for your design (and if you are, by all means use as many vintage fonts as you see fit), keep it simple and work towards making your font combination the best possible pairing it can be.
A Font Pairing to Try
Nautica headline text with Miller body text.
Conclusion: Spot-On Font Pairing Every Time
Font pairing can feel tricky, if not elusive, when you’re starting out with creating typographic designs. Here, we’ve looked at essential pro tips for pairing fonts that will help you make a confident start.
When creating your next design for a website or print project, make sure to remember to aim for balanced contrast (e.g. serif font with a sans-serif font) or seamless similarity (e.g. superfamilies or matching x-height). With these font combination tips in mind, you’ll be sure to find font pairings that do the job every time!
Looking for more help with formatting text on your designs? We’ve got you covered. Make these your next read:
License this cover image via Tint Media.
Recently viewed
${excerpt}