Combining Typefaces

Learn techniques for pairing complementary typefaces that create contrast, balance, and hierarchy within your typography

5 minutes to read

9 exercises

250 PX

Although combining different typefaces has no creative boundaries, having a set of go-to rules can help you avoid common mistakes. You're probably well aware of the classic combination of serifs and sans serifs, but there are many other tricks to create engaging typography for a project. For example, you can combine typefaces having the same height or shape, but they need to possess different personalities. Otherwise, your website or product will look too monotonous and be hard for users to scan.

While the process of combining typefaces may be exhausting, the best practice is to keep changing type parameters, mixing, and iterating. You can start by searching for inspiration on Behance, Dribble, or other websites presenting type designers' works.

Keep it simple

If you mix too many colors in a painting, it might turn into a muddy mess. Likewise, if you mix too many typefaces, you could risk confusing your users. So how many typefaces are enough? Keep it simple — sometimes, one typeface with several font variations can be enough for the whole project.

If you want to introduce a bit more contrast, it's okay to use 2-3 typefaces. Make sure they balance and complement each other — like people, opposites attract. For example, neutral, reserved sans serifs go well with elegant scripts and classic serifs.

Matching x-heights

A rule of thumb in typography is to combine typefaces with at least one thing in common, such as the x-height. Typefaces whose lowercase letters have matching x-heights are more likely to get along, even if their overall appearance differs.

Conversely, it might be too hard for users to follow lines of text when the x-heights are too different. Matching x-heights ensure that your typefaces pleasantly contrast but do not conflict with each other.

Similar letterform geometry

Surprisingly, even the most contrasting typefaces such as the geometric Eurostile and the classy Bodoni, may look remarkably harmonious together. Having the same strong vertical stress makes them an attractive couple.

The point to note here is that if you aim to combine opposite typefaces, make sure they have something common in their geometry, i.e., in terms of proportions, stress, stroke width, or letterform shapes (border-radius or angle).

Avoid too much similarity

Combining 2-3 typefaces won't have the intended effect if your typefaces have too much in common. Using two neutral sans-serif fonts like Helvetica and Univers can make your users feel like something is off without knowing exactly what.

Try combining typefaces having different but complementary personalities. For example, the distinctive, friendly sans serif Helvetica and the traditional, elegant Garamond typefaces form a complex yet appealing pair.

Contrast without conflict

The contrast between typefaces has a lot of positive influence in allowing each typeface to stand out, show its individuality, and highlight important information. Too much contrast between typefaces, on the other hand, can cause a clash and confuse users. Or worse — hurt readability.

How much contrast is too much? Consider parameters such as x-height, cap height, the contrast between thin and thick strokes, vertical stress, proportions, and spacing — at least some of them should be similar. If you try to combine a chunky, bold font like Corben with an exquisite, elegant Cormorant, they can appear too different or conflicting.

Sometimes, you have to rely on your gut feeling and a sense of balance and aesthetics to decide what combination of typefaces works and what does not.

Consider your visual hierarchy

Visual hierarchy refers to the arrangement of elements, including text, to help users navigate a page. In other words, it helps you tell users where to go to find the relevant information using methods of size, color, contrast, alignment, negative space, style, etc.

Knowing the hierarchy within a page, you can decide how many typefaces you need, for example, one typeface for headlines and subheads and another for body copy, captions, button labels, etc.

Users tend to see large-sized letters in a different typeface and weight and assume it's a new section or a vital piece of information. So variations of typefaces, weights, sizes, and spacing between text elements can help designers set zones of importance (aka anchors), to increase the scannability of a page.

Make sure moods match

Playful, serious, elegant, casual — your typeface choices should match the purpose of your design and brand personality. You can't use a child-like handwriting typeface like Comic Sans for insurance or banking service. It not only looks awkward but also confuses users, creating the wrong impression of your brand. Instead of confidence and trust, this typeface will make your brand appear reckless and unprofessional.

Like colors, typefaces also bring up certain associations and evoke emotions. Just like bright yellow or pink hues, decorative typefaces with a strong contrast between thin and thick strokes have no place on an insurance app or website.

Pro Tip! If you're uncertain about the typeface's mood, type its name in Google and read its characteristics, or check out other design projects and products created using this type.

Mix serifs and sans serifs

A combination of sans serifs and serifs is a safe bet if you're short on time or don't have experience in typography. The former is more legible on digital devices and is usually applied to the body text.

On the other hand, serifs feel like a better fit for the headlines and subheads where a pinch of creativity is allowed. This combination contains enough contrast, but other factors like mood, x-height, font-weight, size, and tracking should also be considered.

Combining distinct and neutral typefaces

Like two extroverts hardly can get along together, two distinct, attention-grabbing typefaces will only compete for attention with each other and produce chaos. Creativity using script, display, or slab serif typefaces is more common for short phrases like headlines and subheads. For body text, it's better to stay neutral and legible with typefaces like Helvetica, Roboto, Open Sans, or Futura.

Architects Daughter and Pacifico are both handwriting typefaces and convey the same friendly, informal attitude. Their combination lacks contrast, resulting in a poor visual hierarchy. Conversely, Pacifico and Helvetica complement each other and reinforce the importance of each text part (headlines, body text, etc.).