Choosing Two Typefaces and Stopping

Why two

Not a rule handed down, but the point where the useful distinctions have been made.

One typeface for headings, giving the site a voice. One for body text, chosen for readability at small sizes.

A third adds a distinction nobody needs and introduces a question about which to use where, answered inconsistently.

Every additional typeface is also a download, a delay, and a further thing that can render differently than expected.

One is entirely defensible too, using weight and size for hierarchy, and it is the simplest thing that works.

What each one is for

• The heading face carries character and is read briefly at large sizes.
• The body face is read continuously at small sizes and must be legible above all.
• Weights handle emphasis within each, rather than a third face.
• Size and spacing handle hierarchy, rather than variety.

The second is where people compromise and should not. A distinctive body face that is tiring to read costs more than the character it adds.

Choosing a body face

The more consequential of the two, and the one to be conservative about.

What matters: clear letterforms, distinguishable characters, a decent range of weights, and good rendering at small sizes on ordinary screens.

Particular things to check: whether a capital I, a lowercase l and a numeral one are distinguishable, and whether zero and capital O are.

Those cause genuine confusion in reference numbers, prices, addresses and passwords.

Anything intended for display, with unusual letterforms or very light strokes, is unsuitable for body text regardless of how it looks in a heading.

A worked example

A business whose site used five typefaces: two from the theme, one added for headings, one that arrived with a plugin, and one in an image.

Loading the page fetched eleven font files, and the text was invisible until they arrived.

Reducing to two, at three weights between them, removed eight files and about a second from the time before text appeared.

Visually the site looked more coherent, which several people mentioned without being able to say what had changed.

The plugin font had been loading on every page and was used on none of them, which is the usual situation with the fourth and fifth typeface on any site.

Pairing them

Less mysterious than it is made to sound.

The reliable approach is contrast: if the headings are a serif, the body is a sans serif, or the reverse.

Two faces that are similar but not identical look like a mistake, because the difference reads as inconsistency rather than as a decision.

The other reliable approach is using one family throughout, at different weights, which cannot clash and is what a large share of well-designed sites do.

Beyond that, pairing is a matter of taste, and taste is better exercised by choosing two and living with them than by testing forty.

Weights, and how many

Where the actual cost is, since each weight is a separate file.

Most sites need regular and bold for body text, and one weight for headings.

Three files in total, which is modest.

What produces bloat is selecting a family and accepting every weight it offers, which is eight or more files for two that get used.

Italics count separately, and are worth having only if the site actually uses them.

Worth checking what is loading against what appears on the page, since the gap is usually large.

Licensing

Worth checking once, since it catches businesses out at the point they order printed material.

A font licensed for use on a website is not automatically licensed for use in print, in a logo, or embedded in a document.

Free fonts from the major services are generally permissive and worth confirming rather than assuming.

A purchased font typically carries separate licences for web, desktop and application use, priced separately.

Which means the typeface on your site may not be the one a sign maker can use on a van, and finding that out at the quotation stage is better than afterwards.

Keeping a note of what each font is and where it came from takes five minutes and answers the question years later.

The counter-case

Where a third face is justified.

A genuinely distinct function: a monospaced face for code or reference numbers, which is doing something the other two cannot.

A brand with an established display face used only in the logo, which is an image rather than a loaded font.

And a publication with genuinely different content types that benefit from visual separation.

What is not a justification is that a third one looked nice, which is how most sites acquire their fourth and fifth.

Sizes and the scale between them

The part of typography that does more work than the choice of face.

A page needs a small set of sizes: body text, three heading levels, and perhaps a smaller size for captions.

Those should differ enough to be obviously distinct. Two headings a couple of pixels apart read as an inconsistency rather than a hierarchy.

A common approach is stepping each size up by a consistent proportion, which produces a scale that looks deliberate without anybody having to judge each one.

What produces a messy page is sizes chosen individually until each section looked right, which is how most sites end up with eleven different text sizes.

System fonts as an option

Worth considering seriously and usually dismissed too quickly.

Using the fonts already on the device means no download, no delay, and no flash of fallback text.

The page then looks slightly different on different devices, which is the objection.

In practice it looks like the device it is on, which most people never notice, and the speed benefit is real and immediate.

A reasonable compromise for a small business: system fonts for body text, one loaded face for headings, which keeps character where it is visible and speed where it matters.

What to do

1. Count the typefaces your site loads.
2. Count the ones visible on a page.
3. Remove the difference.
4. Reduce to the weights actually used.
5. Check the body face at small sizes on a phone.
6. Check numerals and letters that could be confused.

The gap between the first two is where almost every site has something to remove, and finding it costs nothing beyond a few minutes in the developer tools.

The loading side of this is covered in fonts you are loading and not using.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.