Choosing two typefaces that work together

Most websites need only two typefaces. One carries the headings and gives the page its voice. The other carries the body text and does the quiet, tiring work of being read for minutes at a time. Getting that pair right does more for a site's character than almost any other single decision, and it is easier than it looks once you stop treating it as a matter of taste and start treating it as a matter of jobs.

Start with the body font, not the headline

It is tempting to begin with the exciting part: the display face that catches your eye in a font library. Resist that for a moment. Your body font will appear far more often than your heading font, in paragraphs, captions, form labels, buttons and footers. If it is uncomfortable to read, no headline can rescue the page.

A good body font for the web usually has:

• A generous x-height. The lowercase letters are tall relative to the capitals, which keeps text legible at 16 to 18 pixels.
• Open shapes. Letters like a, e and c have clear openings, so they do not blur into each other on lower-resolution screens.
• A full family. At minimum a regular, an italic and a bold. Without a true italic, browsers fake one by slanting the letters, and it shows.
• Unremarkable personality. Body text should feel like a calm voice, not a performance.

Pick two or three candidates and set the same paragraph in each, at the size you will actually use. Read it on your phone as well as your laptop. Choose the one you forget you are reading.

Then give the heading font a clear role

Once the body is settled, ask what the headings need to do that the body cannot. Usually the answer is one of three things: add warmth, add authority, or add distinctiveness. Name the one you want before you browse, because it narrows the field quickly.

A neighbourhood bakery might want warmth, so a soft, slightly rounded serif or a friendly humanist sans could suit its headings. An accountancy practice might want authority, which points towards a sturdy serif with confident proportions. A small design studio might want distinctiveness, which allows something with more quirks, as long as it is only used at large sizes.

The principle that makes pairs work: contrast with a shared skeleton

Pairs fail in two opposite ways. Either the fonts are so similar that they look like a mistake (two geometric sans serifs that differ only slightly), or they are so different that they seem to belong to different websites (a delicate script next to a heavy industrial grotesque).

The pairs that work tend to differ clearly on one or two qualities while sharing an underlying structure. Things worth contrasting:

• Classification. A serif with a sans serif is the classic move because the difference is obvious at a glance.
• Weight. A heavy heading over a light body creates hierarchy without needing size alone.
• Width. A slightly condensed heading font next to a normal-width body font saves horizontal space and adds tension.

Things worth sharing:

• Proportions. Similar x-heights help the two fonts sit together comfortably when they appear on the same line, such as a bold lead-in followed by regular text.
• Construction. Fonts built on similar underlying shapes (both based on circles, or both with a calligraphic stroke) feel related even when one has serifs and one does not.
• Mood. If one feels playful and the other feels severe, readers sense the conflict even if they cannot say why.

A quick test: set the letters "a", "g" and "R" from both fonts side by side at a large size. If the shapes seem to come from the same family of ideas but are clearly not the same font, you are probably on the right track.

Superfamilies: the safe shortcut

Some type families are designed in matching serif and sans versions, drawn to share proportions and rhythm. Using the serif for headings and the sans for body (or the other way round) almost always works, because the designer has already done the matching. If you are short on time or confidence, a superfamily is a perfectly respectable choice, not a cop-out.

Another safe shortcut is to use a single well-made family for everything and create contrast purely with weight and size. A bold, tightly spaced heading at a large size and a regular body at a reading size can look more deliberate than a mismatched pair.

Testing the pair on a real page

Font specimens flatter every typeface. The only test that matters is your actual content. Build a rough page with:

1. A real headline from your site, including a long one that wraps onto two lines.
2. A subheading and two or three paragraphs of genuine copy.
3. A bulleted list, a link, a button and a short caption.
4. A line that mixes bold and italic within body text.

Look at it from arm's length and squint. Does the heading clearly lead? Does the body look even and calm, with no letters jumping out? Then look closely at the details: do numbers in both fonts look consistent if they appear near each other? Does the bold body weight look like it belongs with the heading?

Try it at mobile width too. Some display fonts that look elegant at 48 pixels become cramped and awkward at 28 pixels, which is where your headings may end up on a phone.

Practical concerns that should influence the choice

Beauty is not the only factor. Before committing, check:

• Language support. If your business uses accented names, product terms or a second language, confirm every character you need is in both fonts.
• Licensing. Make sure the licence covers web use. Many excellent fonts are free and open source, which removes this worry entirely.
• Loading weight. Each weight and style is a separate file. Two families with four styles each is eight files. Load only what you use.
• Fallbacks. Pick a system font with similar proportions as a fallback, so the page does not jump dramatically while the web font loads.

A short checklist before you commit

• The body font is comfortable at your real reading size on a phone.
• The body family includes a true italic and a bold.
• The heading font has a clear job: warmth, authority or distinctiveness.
• The two fonts contrast clearly on one or two qualities, not five.
• Their x-heights and overall mood are compatible.
• You have tested both on a real page with real copy, at desktop and mobile widths.
• Licensing and character support are confirmed.
• You are loading only the weights you actually use.

Two good fonts, used consistently, will carry a site further than five interesting ones used occasionally. Choose for the job, test with real words, and then leave them alone long enough for your visitors to get used to your voice.