Trends in typography seem to evolve more quickly than many other design trends. For a long time, website designers stuck to font palettes packed with sans serif typefaces. But that feels like ancient history now!

Today’s range and variety of web fonts make for much more interesting design possibilities, font pairings, and visual themes.

We’re taking a look at eight trends for pairing fonts with a beautiful example of each, covering a wide range of font families and aesthetics.

What is Font Pairing?

Font pairing is putting together different typefaces for use in one design project. While the term “pair” is used, font pairing can refer to using any number of fonts in the same project.

A good font pairing — typically no more than two or three typefaces — is harmonious while providing ample contrast between lettering styles. Font pairs often convey similar moods and have complementary shapes, so that they bring attention to the message but don’t compete with each other for attention.

No more than one novelty, funky, or challenging font should be used in a pairing. This helps ensure readability and balance in the typography of a design.

1. Serif Sans Serif Layers

Different layers and levels of typography can make for a lovely display.

The Academy of Classical Chinese Medicine uses two type families – a serif and a sans serif – for a timeless combination. Note how the typefaces are stacked in layers.

• About ACCM: Caps sans serif
• Headline: Serif line and serif bold italic line
• Main text block: Sans serif
• Call to action: Bold, caps sans serif

What makes this layered typography display work so nicely is the use of space and the shapes of the font pair. Note that each typeface has a round design – you can see that particularly in each lowercase “o” and “c.”

2. Funky Sans Serif Simple Sans

Pairing two fonts of the same style can get a little tricky because you don’t want typefaces that look too much alike.

Intact Software does a nice job with two sans serif options, one that’s just a little funkier than the other with harder edges and thicker strokes. The secondary sans serif is more of a traditional style.

This combination works great for a headline and body text pairing. The funkier style draws attention to the big text while providing superb readability for the smaller type on the screen.

3. Sans Serif Caps Tiny Serif

There’s nothing groundbreaking about using an all caps sans serif. (Everyone has been doing that for a while.)

But the simple serif line beneath and the stark contrast between the big type and the second line is amazing. It’s one of those understated trends that we are starting to see a lot more of in typography and the BBC Earth website nails it.

What’s nice about this font pairing is that everything is easy to read. Both typefaces have uniform stroke widths (which is nice for websites and devices where there is backlighting to think about).

4. Novelty Monospace

This font combination is perfectly brutalist – a trending design style. A novelty typeface with a monospaced style is visually interesting and fist the tenets of the style.

Putting together typefaces for this trend can be tricky.

Opt for typefaces that give you a somewhat intentional mismatched and chaotic feel. If you try too hard for styles that match here, it might fall a little flat. Remember brutalists styles are hard and a little visually shocking by nature. Use that idea in your font pairing as well.

5. Sans Serif Font Family

Font pairs don’t actually have to be paired at all. Using multiple styles within the same family can serve that purpose.

This is a rather popular technique because it makes websites easy to read and always creates a design where all of the text elements are in harmony.

Here’s how to make it work, just like flocc (above). Pair the most contrasting styles from a font family for obvious distinction in the design. Pairing a bold or lack option with a regular or light variation is almost always a winner.

6. Slabs Simple Sans Serifs

Slab styles are smack-you-in-the-face font options that are good for generating impact. Tone down the style with a simple sans serif partner.

This is a classic typography design trend that never gets old and is almost always effective.

Rogue Studio uses this combination brilliantly with larger than life slabs as an artistic element and simple sans serifs for all the stuff you really need to read. Nice spacing also helps draw the eye and keep users on the site.

7. Wide Sans Serifs Modern Serifs

Wider typefaces are making an appearing in more design projects. It can be a tough style, but with the right complementary typeface, it works.

LaFaurie does a nice job with this font pair. The wide sans serif is large in the hero header and provides an interesting take on the navigation elements. The modern serif is more readable and helps generate a fresh, youthful tone for the project.

8. Serif Sans Serif Script

This trio of fonts sets just the right tone. With a modern serif, simple sans serif, and a script the feel is classic, controlled, and elegant.

Pairing three fonts is fairly common and what makes it work well is using distinctly different styles. Using three sans serifs can get clunky and odd visually because the styles aren’t different enough.

Look for a font trio that has the same feel but unique lines and designs.

Conclusion

Pairing fonts can be a lot of fun. Playing with different combinations can add new dimensions of meaning to design projects.

Just keep some of the “golden rules” of design in mind when working with font pairs:

• Stick to two or three typefaces
• Look for complementary styles
• Always use one highly readable option