Three secrets to font pairing

A framework for pairing typefaces that will make designs look good and feel right

A digital illustration of the words "dream team" written in overlapping colors of orange, yellow, pink, purple, and light blue on a royal blue background. Dream is written in a script using all lowercase leters and team is written in sans serif type with all uppercase letters.

Illustration by Karan Singh

I’m an experience designer on the Adobe Fonts team. Some highlights from the past decade include working on a rebranding for Adobe Fonts and kickstarting the typography system for Spectrum, Adobe's design system. It's no exaggeration to say, I love fonts! Since 2014 I've been helping people find and use fonts across Adobe's applications and along the way I’ve picked up a lot of tips—from finding the perfect font to laying out designs seamlessly and intelligently. Earlier this year I launched Make type work so I could share some of those tips and (hopefully) help other people feel more confident working with type.

Whenever folks talk about the difficulties of typography the elusive art of pairing fonts always enters the conversation. And for good reason... It’s hard! There are as many ways to pair fonts as there are reasons to pair them. It can be intimidating taking every bit of context into account when you’re just trying to make your designs feel right and look good.

Twenty font (and word) pairings in a five column four row image on a multicolored background. Row 1 (left to right): Fresca + Italian Cuisine; Sweet Mango + Body Lotion; ExitNow + Escape Room; Moonlight Wares + Handmade Ceramics; Surf Encitas + Surfboards & Wetsuits. Row 2 (left to right): Chamomile & Hibiscus + Tea Room; OverEasy + Brunch Co.; Aline Budois + Realtor; Screen Friends + Coworking Space; Game On + Arcade Bar. Row 3 (left to right): Recipe of the Week + Lemon Bars; Emery + Fine Goods; The Counter Act + Julian Altrest; Workshop + Building 6; Guidebook + Activewear. Row 4 (left to right): Amorista + Weddings; Hourly + Coffee Roasters; Newe Years Eve + Cocktail Party; Hunter + Lookbook; Eastside + Skatepark.
Sample font pairings using Adobe Fonts. Download the file to auto-activate and use them.

During the last episode of the The Adobe Fonts Show we dug into the topic of font pairings, shared some examples, and explained why they work (that episode is embedded at the end of this article). This article distills the information from the livestream to three key points. There are many ways to pair fonts, but this is how I think about it. And, with this three-step framework, and a little practice, you can be pairing like a pro in no time.

Three simple heavy black line drawings on an tan background. From left to right: an anchor; a seesaw with a half black and half white circle on one side and a wavy equals sign on the other; and a happy face above a fraction bar and a briefcase below it.
The three secrets to font pairing: anchor, balance, and a focus on both emotion and job.

1. Work with an anchor font

The first secret is a big one: Select one font. To pair fonts you must make a starting decision you can use to guide the rest of your quest. You could stumble across some inspiration and find a ready-made pair you love (In that case you’re done! Stop reading and use those), but in most cases you’re likely going to need to choose one font to start with.

Think of this as the “anchor” to tie the rest of your decisions to. It might be the font you want to use for the body text, or the heading, or even something else—that’s all okay to start with if it helps—but the typesetting of the anchor will impact the pairing. The relationship between two pieces of text is what’s most important.

The most common reasons for looking to pair fonts are a heading with some body text (or vice versa), or more of a one-to-one sort of pairing where both fonts are heading-like (for branding or a type lock-up for a marketing graphic). For both the relationship between them is important. My favorite way to approach typography and design is to focus on the relationships over the individual elements. Things like the sizing, spacing, and arrangement on the macro level, and shape of the letterforms, overall texture, and flow of the strokes at the micro level.

Once the choice for the anchor font has been made, with those attributes in mind, it’s time to move on.

2. Balance contrast and similarity

I’d say this next secret is the real key to font pairing: As with many things, the trick is balance. Find a match for your anchor font that hits the sweet-spot between similarity and contrast. It should be similar, but not overly, with a clear degree of contrast. That’s a bit abstract so let me make it more tangible:

Similarity tethers pairs

What you are looking for here is a hook that links your choices. When fonts are totally unrelated, content can feel a bit disjointed—so have at least one similar attribute across the pair to tie them together. It could be anything from the stroke weight, to angles or curves, x-height, or even the same “mood.” There are no strict rules, but I’d bet that pairs that look good to you will have similarities in the details. What you don’t want to do, however, is use something too similar. First, what would be the point!? You’d be better off using the same font or a variation from the same family. Second, when you pair two nearly identical fonts you can end up with an uncanny valley effect—which will make the pairing look like a mistake.

Heavy black Lorem ipsum type on a tan background. Eight typefaces are divided into four labeled quadrants that read (clockwise from top left): Too similar; No distinct similarities; Similar X-height & weight; Similar curves & letterforms. Under the Too similar heading the fonts are almost identical. Under the no distinct similarities heading they are drastically different with no qualities that overlap. Under the Similar X-height & weight heading, although the fonts are different, the letters are all of a similar height and line weight. Under the Similar curves & letterforms heading, although one font is sans serif and one is serif, the shapes and curves of the letters are the same.
Pair should strike a balance between too similar and not similar enough. Focus on finding commonalities in curves and letterforms, and X-height and weight.

Those simple guidelines should provide you with a good starting point. Over time you’ll find it easier to recognize or build up a set of go-to attributes of your own. It just takes practice. In the meantime, whenever you look at font pairings you think work well, try to dissect which features tether them.

Contrast provides visual interest

You might be saying to yourself, “wait isn’t contrast just the opposite of similarity?” And, well, yes, it is. But what’s key is focusing on those attributes that are contrasting rather than those that are similar. Contrast is what will start to provide visual interest in the paring—like the old saying opposites attract. My favorite example of this is using width for contrast: Try combining a super wide and a super condensed font (when fonts share a similarity, like weight, it creates a nice pairing, just like that).

Heavy black Lorem ipsum type on a tan background. Four typefaces are divided into two columns that read (from left to right): Contrast of width; and Contrast of classification. Under the Contrast of width heading the fonts are both sans serif and have a similar line weight, but the top one is tall and with narrow spacing between the letters and the bottom one short with wide spacing between the letters. Under the Contrast of classification heading the fonts are of a similar height and line weight but one is sans serif and the other is serif.
Two easy places to look for contrast: width (condensed and wide) and classification (serif vs. sans serif).

Another classic example of contrast is pairing a serif with a sans serif. Going across classifications is a typical way to find a font that’s “different enough.” Another way is to look for a “superfamily,” a typeface with styles in multiple classifications. These are ready-made pairings! They share the same skeleton, so similarities are built in, but you can find contrast by using two different styles.

3. Consider emotional impact and job performance

Last, but by no means least... this secret combines “job” and “emotion.” Don’t think of it as a final step, but rather as an ongoing consideration as you build your pair. Considering only anchor and balance could result in a lackluster design, this last piece ensures the reasoning for a pairing is solid and adds in the right dose of personality.

Don’t lose sight of job to be done

Fonts are tools, and they are put to work in typography to do a job. Sometimes that job is to be nice and easy to read. Other times it’s to stand out and draw people in. When pairing fonts there must be a good reason: Maybe a font is perfect for one part (why it’s important to have that anchor), but just isn’t hitting home with another; maybe you have the perfect body copy typeset but the headings aren’t intriguing, so you have to find a font to do that job. You might not always even know the full extent of the role the second font will play, and that’s okay. Design systems grow over time, so it can be helpful to plan for later content needs.

Emotion elevates design

The combination of job and emotion might seem odd, but to only focus on the work fonts must do, would mean missing the bigger picture: We’d find the perfect legible font for long text, a good font that stands out for headings, then call it quits, and everything would look the same. The emotion and relationship between the fonts are what brings typography to life. It can elevate your design to something that feels unique, like it has soul. Homogeneous design is never a good solution because creative communication is too wonderfully important. Keep in mind throughout this how the pairing makes you feel, and most importantly trust your gut... If a pairing feels “right” to you, then it’s likely you’ve made a good choice.

Give this framework a try and see if it unlocks the complexity of font pairings for you! For anyone who scrolled directly to the bottom, here’s a TL; DR version:

If you have a bit more time, listen in to our discussion on Episode 52 of The Adobe Fonts Show: Stylish Font Pairings Vol. 1 (we’ll be doing a second volume soon).

<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

This article first appeared on Jake Giltsoff’s  Make type work  blog.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link