Choosing and Pairing Typefaces for a Brand System

Your logo appears once per page. Your typeface appears in every word on it.

That ratio is why type does more brand work than the mark does, and why choosing it on aesthetics alone tends to cause problems six months later — usually licensing, sometimes legibility, occasionally both.

Start with where it has to work

Before looking at a single typeface, list the surfaces:

• Website and app — needs a webfont licence, and ideally a variable font
• Presentations — needs a desktop licence for everyone who builds decks
• Packaging and print — needs enough weights and good small-size performance
• Social graphics, possibly built in Canva by non-designers — needs to be available in whatever tool they use
• Documents and email — will fall back to system fonts regardless, so a sensible fallback matters

That list eliminates most candidates immediately, which is a good thing. A beautiful display face with no web licence is not a brand typeface; it is a logo typeface.

Licensing, before you fall in love

The mistakes that get expensive:

• Desktop licence only, then the site needs it. Web licences are often priced by monthly pageviews.
• Per-seat limits exceeded as the team grows.
• App embedding treated as a separate licence, because it usually is.
• Using a font you found on a free download site. If it is a commercial face redistributed without permission, using it is a real liability.

Open-source families under the SIL Open Font Licence sidestep all of this and now include genuinely excellent options. There is no longer any correlation between price and quality at the top end.

What to actually look for

Enough weights. You need at least a regular, a medium or semibold, and a bold. A family with two weights will force compromises in the type scale within a month.

A real italic, not a slanted version — if you need italics at all.

Numerals that behave. Tabular figures matter if you show prices, data or tables. Old-style figures in a pricing table look wrong.

Language coverage. If you operate in markets that need accents, Cyrillic, Greek or Arabic, check the family supports them. Discovering this after launch means either a second typeface or a rebuild.

Small-size performance. Set it at 13px and read a paragraph. Many display faces fall apart, and body copy is most of your words.

Variable, if available. One file, every weight, smaller payload, and the ability to fine-tune.

Pairing without guessing

Most pairing advice is vague. Three approaches that reliably work:

One family, many weights. The most underrated option. A single well-built family with a wide weight range can carry an entire identity — contrast comes from size and weight rather than from two typefaces arguing. It is also the cheapest to licence and the hardest to get wrong.

A display face and a workhorse. Something with character for headlines, something quiet and legible for body. The rule that matters: they should differ obviously, not slightly. Two sans-serifs that are almost the same look like a mistake rather than a decision.

A serif and a sans. The classic pairing, and it works because the contrast is unambiguous. Match them on x-height and weight so they sit comfortably at the same size.

The failure mode in all three is insufficient contrast. If someone has to look twice to tell whether two typefaces are different, use one.

Build the scale, not just the choice

A typeface without a scale is not a system. Define:

• Sizes for each level — display, h1 through h4, body, small, caption
• Line height for each. Tighter as size increases; body copy wants roughly 1.5-1.7
• Letter spacing, particularly negative tracking on large display type
• Which weight does which job
• Maximum line length, around 60-75 characters for body copy

Write it down with actual numbers. “Headings are bold” is not a scale.

Performance, since it is a design decision

Self-hosting a subset of a variable font, preloaded, with a metric-matched fallback, is the difference between text that appears instantly and text that jumps as the font swaps. Metric matching — adjusting the fallback’s spacing so it occupies the same space as the real font — eliminates the layout shift entirely.

That is a typography decision as much as an engineering one, and it is worth agreeing at the same time as the typeface.

The test before you commit

Set a real page. Not a specimen — an actual page of your content, with a headline, two paragraphs, a caption, a button and a price. Then look at it at 13px, at 60px, in bold, in one colour, and on a dark background.

Most shortlists lose one candidate at each step, and whatever survives is the right answer.

Type scales and licensing notes are part of every brand identity system we deliver — and if the brand is bilingual, designing for two scripts has its own constraints.