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.

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.

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.