1. Use fonts that have different tones

Writing can express emotion. The letterforms we use to display words also influence our perceptions. Some fonts are stern and businesslike, while others are upbeat and informal. Typefaces have distinct identities that can add meaning to the words they display. When choosing web fonts, combining typography with different tones adds visually pleasing contrasts.

When picking out the best font pairings, first consider the spirit of who or what a website will be representing. A bubbly typeface might work for a toy company but will look out of place on a law firm’s website. On the flip side, a web design for something lighthearted will get bogged down by the most serious of serifs.

One of the biggest considerations is what typography you’re going to use for the headers and the body copy. Headings offer more freedom in using stylized typefaces due to their larger scale. For body copy, you need a font that’s easy on the eyes in smaller text sizes.

This template built wit Webflow for a fictional candy company uses the typeface Lovelace and the fanciful and modern typeface Erotique for its headers. Supporting body content uses the more conventional Megabyte typeface. The fonts have different personalities but work together in harmony.

An image of a template build with the typeface Erotique for it's header and Megabyte for it's body text.

Don’t be afraid to use tonally opposing typography in your web designs — sometimes the juxtaposition can make your content pop.

2. Create contrast — but not too much contrast —  with typeface pairs

Font pairs should be noticeably different — for example, don’t use a sans serif typeface in a header that’s strikingly similar to a sans serif that you’re using in the body copy. You want distinct combinations with typefaces that are visually different but still complement each other.

What happens if we take a typeface with calligraphic flourishes such as Great Vibes and combine it with a serif like Merriweather? We end up with a sense of contrast that’s not very eye-pleasing.

An image of text utilizing Great Vibes as it's header and Merriweather as it's body text.

The flourishes and loops of Great Vibes have a softness and a sense of sophistication, while Merriweather is a no-nonsense typeface with a formality conveyed by its serif letterforms. Here, the contrast is too great for the combination to work.

Let’s shift to a more satisfying font pairing. Here in the header, we’re using Vollkorn, a subtly playful serif typeface. We’ve paired it with Open Sans, a more neutral and plain sans serif. This pairing works well because though there is contrast, the subtleness of both of the typefaces make them visually complimentary.

An image of text utilizing Volkorn as it's header and Open Sans as it's body text.

3. Limit different typefaces to three or less

In most designs, you’ll be using one web typeface for the headline and another for the body. You might also have places in the layout where you use hand lettering or more stylized typography for decorative purposes. No matter how tempted you are by all the free fonts out there, you don’t need more than three typefaces for a single website.

Many designers opt for using a typeface superfamily for their work. A superfamily is a group of typefaces that are all related. It may contain stylistic variations like italics, light to heavyweights, serif and sans serif versions, as well as other variations. The best thing about superfamilies is that they take the guesswork out of finding complementary fonts because they were designed with compatibility in mind.

Superfamilies make it possible to use a single typeface in multiple ways. Take a look at these selections from the Roboto superfamily. There’s a huge difference between the subtleness of Thin 100 Italic and the strong declaration made by Regular 400.
An image of the Roboto typeface superfamily.

Typeface superfamilies give you plenty of font options to play with while still sticking to a single typeface style.

4. Communicate visual hierarchy through font pairing

An image of the Equitist website — a great example of communicating typeface hierarchy.

The Equitist, a healthcare website built with Webflow, communicates its hierarchy through different typeface styles, sizing, and colors.

You can use typography to send visual signals about the importance of different sections of content. Headlines should pack the heaviest visual punch, followed by subheadings, and then body copy. Use your font combinations to give your content an obvious sense of structure.

Use font size to imply order

This is an easy one. The biggest typeface represents what takes priority, with descending sizes representing the hierarchy of content. Using all uppercase also works well in making important elements like calls to action stand out. But make sure to use all caps in moderation — no one wants to feel like a website is yelling at them.

Integrating different sizes of typography is the go-to for most beginner designers, but there are other ways to denote visual hierarchy.

Experiment with different weights

Built with Webflow, this website for the agency Babel mixes things up with lighter and heavier typeface weights.
An image of the Babel website.

Heavier weights indicate importance, while lighter weights represent a lower rung in the content hierarchy. You can do a lot with a single typeface by varying its weight, as we saw with the Roboto superfamily.

Vary font colors

While you don’t want to fill your design with a kaleidoscope of clashing hues, varying the shades of text can help certain words stand out. Lighter and darker variations create a nice sense of contrast, with darker shades indicating copy that should be read first. When experimenting with font colors, make sure that they don’t get lost in the background.

Typefaces to consider when coming up with font combinations

Now that we’ve covered the typographic principles you should keep in mind, let’s take a look at the major categories of typefaces and some combinations you can use in your design work.

Serifs

Serif typefaces were developed for readability in print and can be traced back to the late 1700s.

A serif is a tiny line or stroke that’s been added to a letter. Serifs provide visual cues that make it easy for someone’s eyes to follow. Serif typefaces make scanning text more efficient, especially when it comes to large chunks of writing, like in the pages of books.

In the early days of computing, primitive monitor resolutions did not work well with serif-based typefaces. But today’s high-resolution monitors give graphic designers a wealth of serifs they can work with.

When using a serif, always pair it with a sans serif font. Serif typefaces are generally too similar, making for an awkward font pairing.

Serifs provide a lot of flexibility. They’re easy to read in small and large font sizes, making them ideal for both body copy and headers.

Font pairing idea: EB Garamond and Montserrat

Here we’ve taken the serif EB Garamond at a smaller size in the body copy and combined it with Montserrat at a larger scale in the headline. Serif fonts work better for big chunks of copy when they’re at a smaller font size.

An example of the font pairing: EB Garamond and Montserrattse

Sans serifs

This is straightforward enough — san serifs lack the extra lines that adorn serifs. Sans serifs can be used at a smaller scale for paragraph or body text, or they can be combined with a serif in the headers.

Font pairing idea: Open Sans and Lato

Some designers out there may scoff at fonts like Open Sans and Helvetica due to their overuse, but they’re popular for a reason. Open Sans is a plain yet welcoming font, which means it combines well with many other fonts. Think of it like vanilla ice cream — it’s a solid base to build upon.

Here we’re using Open Sans in the header, along with Lato in the body copy, another sans serif typeface.

An example of the Open Sans and Lato font pairing.

Display fonts

Display fonts work well when you need to get people’s attention. They often have sophisticated letterforms that range from big and bold to sparse and thin. Display fonts offer an amount of stylization that makes them best for headlines and other places in a design where you need to make a big impression with a little bit of text.

Font pairing idea: Bubblegum Sans and Open Sans

Bubblegum Sans has joyful stylized letters that make for a great pairing with the neutrality of Open Sans.

An image of the Bubblegum Sans and Open Sans font pairing.

Font pairing idea: Poiret One and Lato

Poiret One’s nuanced art deco-inspired lettering and thin linework make it an excellent modern font if you’re looking for a bit of sophistication. Pairing this typeface with a subtler typeface like Lato creates a sense of contrast that still works well together.

An image of the Poiret One and Lato font pairing.

Monospaced typefaces

Every character in a monospaced typeface has the same width. This fixed horizontal measurement sets them apart from typefaces that have variable widths, giving them a strong sense of consistency. In the early days of computing, monospaced fonts were widely used due to their simplicity and ability to look good on early low-resolution displays.

Font pairing idea: IBM Plex Mono and PT Sans

Designed as an homage to IBM, IBM Plex Mono is a modern typeface with a visual identity perfect for startups and others in the tech realm. Pairing this monospaced typeface with PT Sans — which has a sharper geometry — creates a nice sense of contrast and visual hierarchy.

An image of the IBM Plex Mono and PT Sans font pairing.

Typography is essential for web design

There are so many aspects of effective web design. Approach your font pairings with the same level of consideration you apply to choosing a color palette. The tone of the typefaces you pick, the way that you style them, and their legibility are all a huge part of a user’s experience with a web design. Find those cool fonts that speak to the personality of what you’re creating and give your visitors the best possible way to experience its content.

 

source:Font pairing: How to find the right combinations for your web designs (webflow.com)