How To Combine Typefaces to make them look Attractive?

If ever there was a challenge that could fly in the face of a web designer, combining typefaces would have to be up there on the pinnacle. The challenge itself is something that has designers intrigued until they step into the unknown then its a fight between success and failure. Integrating related typefaces on a page is one thing, combining two of them is a recipe for disaster or infinite magnetism. 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?

Rarely is any more than one typeface required. However, the old rule of thumb; less is more, still applies and anymore than two typefaces can spell disaster with a capital S. One font is sufficient to convey your message. But we’re not here to obey rules. We’re here to discover how to successfully combine typefaces that look attractive to both you and your visitor. And we’re not going to chase them away by adding a combination of clashing, much too busy, white space consumers that look like a train wreck about to happen.

We are going to be logical and accept the fact that single typeface is almost unheard in design due to the placement of a logo which is common on most websites. Most logos are indicative of a particular text which in practical terms won’t be suitable for body text. And speaking of rules, we said we’re not going obey, there is one that prays we don’t go overboard and use more than three typefaces in a single design. It’s just going to get too crowded in any case.

If the logo is using two fonts, you’d be better off tethering your artistic flair and use only one for the body of the text. Logically one type face is used for the heading while the other is used for body text which assists page scan. Using a variation of bold face or an accent colour can be sufficient and very tasteful without introducing additional typeface. Consideration of download is imperative given that you’ll have about 65kb for font files and if you’re using italics and weight alternatives, you’re going to be adding an additional 200kb of download not to forget the extra HTTP requests to the server.

So maybe sticking to the old rule Less is More is nevertheless the better option. For the sake of simplicity, if you don’t have a good reason for using an extra font, leave it be.

Practical Font Selection

Generally, you’re limited to what font choices you can make. Often, companies have their own preferences and will specify a typeface or fonts to use that are the same or similar to those making up their brands. Sometimes, if you’re working on a design for a law office, you’ll be faced with limited space that might need a condensed typeface and a load of legal text that whose legibility is clear in a very small text. On the other hand, if you find you’ve got the freedom to design a page on a blank canvas and you’re at liberty to use what you like, you’ll probably want to start with some of the largest text being your body copy. And don’t start worrying about characteristics until you’ve selected a clearly readable typeface for the body text.

It’s worth suggesting that you will probably find it easier by sticking to a few of the typefaces that you’re truly familiar with. That way you don’t have to redesign every time, and you can rely on the old faithful you know. If you haven’t got any go-to typefaces at hand, here are a couple that will get you started; Droid Sans, Noto Serif, and Cabin.

Selecting a personality font

There’s an art in selecting a font with personality that is going to suit your design. Every font has a characteristic, and it’s a crucial point to make that when selecting your first font, it is the second that will enhance its personality. Both will need to compliment each other. If you are selecting a primary typeface that is friendly, the second font needs to ‘endorse’ it. All typefaces have personality, and everyone of them displays numerous characteristics that need to be compatible. So if two faces share the same ‘personality traits’, then the combination will be subtly multiplied like Fira Sans and Merriweather.

The safest bet is to find faces with similar proportions and typefaces now days have the association with serif or sans-serif. For example companion faces with either Open+Sans or Droid Serif, both are compatible within their typeface categories; neither portray an overdoes of contrast and both are 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. 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.Typefaces with contrasting flair, Noto Serif and Questa Sans

Option 3: Contrasting styles
While 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 emphasise Cabin’s geometry.

Typefaces with contrasting forms, Cabin and Buenard


Different typefaces, in different proportions, draw out different flavours 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.

Web Wizards Logo