How to successfully combine typefaces

Ben Moss.
May 18, 2015
How to successfully combine typefaces.

Combining typefaces is one of the most challenging skills for a designer to master. Setting two fonts together in the same design brings out unexpected flavors in them both. What’s more, there’s rarely a right or wrong answer.

There are dozens of different ways to combine typefaces, some more useful than others, but the most practical place to start is to understand the role of each typeface and to focus on its qualities.

How many fonts is too many fonts?

You rarely need more than one typeface. One is almost always adequate to create a hierarchy and convey your message.

In practical terms single typeface design is rare, if only because most designs feature a logo, and most logos feature text, and by its nature a typeface used for a logo will probably not work for body text. There is a rule of thumb that says that you shouldn’t use more than three typefaces in a single design, given that the logo uses one (or two!) typefaces, you’re probably restricted to two faces.

Normally, in order for our headings to stand out when the page is scanned, we use one typeface for body text and one for display. However, you can make headings stand out by using a bold variation, or an accent color, you don’t necessarily need an additional typeface for this.

Font files tend to clock in at around 65kb, if you’re using italic and weight variants then that’s almost 200kb of download added to your site. What’s worse are the additional http requests being made to the server.

So the answer is, the fewer fonts the better. Each typeface has to earn its keep, if you don’t have a good reason for using it, then don’t.

How to select a practical font

Frequently, your initial font choice is taken out of your hands; companies often specify a typeface, or even a set of fonts, as part of their brand guidelines. Occasionally you’ll find a job has specific requirements, such as limited room that might require a condensed face, or a lot of legal text that might require a face that’s highly legible at small sizes. However, if you find yourself with an entirely blank page, with unlimited options, the natural place to start is the largest proportion of text, and that is probably your body copy.

When selecting a typeface for body text, your primary concern should be readability. Don’t concern yourself with personality at this stage.

I’m of the school of thought that believes that you’re better off mastering a few typefaces that you know well and can rely on, than reinventing the wheel with every design. So I advocate having a few reliable choices that you can call on. My current go-to typefaces for body text (on Google fonts) are Droid Sans, Noto Serif, and Cabin.

How to select a personality font

Here’s where the craft comes in…

Selecting your first typeface for readability is usually a case of picking up a reliable tool, like an artist picking up a 2B pencil. However, when selecting a second typeface, there are two things to bear in mind:

Firstly, your second typeface is not selected for practicality, but for personality. And it’s vital to understand that it’s not just selected for its own personality, the second typeface draws out the personality of the first. All typefaces have a personality of some kind, most have numerous characteristics, such as feeling friendly, or ergonomic, or stoic. If two faces share the same characteristic, then when combined the characteristic will be multiplied.

fira-merriweather

Fira Sans and Merriweather

Secondly, your second typeface needs to look as though it is intended to work with the first, in order to create a consistent voice. Look for faces with similar proportions: the shape of the counters should be similar, the ratio of the x-height to the ascenders should similar.

With those two concerns in mind, you have three options for selecting a second typeface:

Option 1: The safe bet

Many typefaces are designed with a companion serif or sans-serif — Scala Sans has Scala Serif, Meta has Meta Serif. My favorite body font of the moment, Droid Sans, has Droid Serif.

The value of combining companion fonts is that the basic letterforms are usually identical. The degree of contrast is minimal, but sufficient to warrant the extra http request.

If you’re not super-confident in your ability to blend typefaces, then this is a really reliable option.

droid-droid

Companion typefaces Droid Sans and Droid Serif

Option 2: Contrasting a characteristic

If you’ve picked a highly legible body face, then perhaps you can pick a display face that isn’t. If you’ve picked a geometric body face, then consider a humanist display face. If your body face is warm and inviting, try a display face that is strong and aloof.

Noto Serif has nice round counters (the spaces in letters like ‘c’ and ‘o’) and the brackets on its serifs are equally nice and round. It’s open and friendly, it feels confident, and contemporary, with little expressive flairs. To contrast with that you might choose a typeface like Questa Sans. Questa Sans is also contemporary, also confident, also rounded. But Questa Sans doesn’t have expressive flairs, it’s far more matter-of-fact.

noto-questa

Typefaces with contrasting flair, Noto Serif and Questa Sans

Option 3: Contrasting styles

Whilst it’s possible to contrast a single characteristic, you can also take the opposite approach and contrast all the characteristics but one.

The way to do this, is to identify the main character of your first typeface, and then find a second that shares only that characteristic. This is by far the most challenging approach, because so much here is subjective, but it can also be the option that produces the most surprising and pleasing combinations.

Cabin is a simple sans-serif, with very little contrast. It’s about as close to a geometric sans-serif (meaning a typeface constructed mathematically) as I’m comfortable going for a body face. It’s not academic at all, and isn’t that media friendly, but it is a very successful corporate face.

To contrast with Cabin, you might choose a typeface like Buenard. Buenard is equally corporate, it has similar proportions to Cabin, but its more traditional forms serve to emphasize Cabin’s geometry.

cabin-buenard

Typefaces with contrasting forms, Cabin and Buenard

Conclusion

Different typefaces, in different proportions, draw out different flavors in your designs. As with many things, restraint is often advisable because combining typefaces is an exponentially complex process.

How you choose to combine typefaces doesn’t really matter, what counts is the end result. However, it’s when you take risks, and look for unexpected pairings, that you’ll discover the most satisfying results.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…