Brand typography: choosing typefaces and pairing them
Typography covers more of your brand's surface than any other component, and it is the one most often chosen by accident. A good type system can be built in an hour, if you know what to fix.
On a web page, a deck or a social post, text covers more area than the logo, the imagery and the accent colour combined. Typography is statistically the most visible part of your identity, and the one many companies leave on whatever the editor defaulted to.
How many typefaces you need
One or two. Three only if the third has a technical job, a monospace for code, or for figures that must align in a column.
- One family, several weights. The safest option. Contrast comes from weight and size rather than mixture. Cheap to licence, hard to break.
- Two families, display and text. The display face carries personality, the text face has to be invisible. Worth the effort only if the display face genuinely says something the text face cannot.
How two typefaces actually pair
The useful rule is not “serif with sans-serif”, it is high contrast in form, close match in proportion.
- 01Pick clearly different shapes. Two similar sans-serifs read as a mistake rather than a choice. The difference has to be obvious from across the room.
- 02Match the x-height. This is the criterion that makes a pair look designed together. Two faces with very different x-heights look like different sizes even when they are not.
- 03Match the width. A condensed face beside a wide one produces a page that feels unbalanced for no visible reason.
- 04Check the figures. They have to look right together, because they will appear side by side in prices, dates and tables.
A shortcut that works: pick both faces from the same superfamily (the same design in serif and sans versions). The match is guaranteed by construction.
Check the character set before committing
The most common practical failure with typefaces, and the easiest to miss until it is too late.
- Check every accented character your markets need, in every weight you plan to use. It is common for a bold weight to be missing glyphs the regular has, at which point the browser synthesises them, visibly.
- Check comma-below versus cedilla if you set Romanian, Turkish or Latvian. Ș and Ț take a comma below; many older free fonts ship the cedilla form and it looks wrong.
- Test with a real sentence, not the alphabet. Set a line containing every accented character you need, in each weight, and look at whether anything jumps, shifts or changes weight.
The type scale
A system with no scale produces eleven slightly different heading sizes within three months. The scale is the short list of permitted sizes, each with its line height.
Display
Typical size (web)
40–56px
Line height
1.05–1.15
Used for
The page title, once
Section heading
Typical size (web)
24–32px
Line height
1.2
Used for
Chapters of the content
Subheading
Typical size (web)
18–20px
Line height
1.3
Used for
Divisions inside a section
Body
Typical size (web)
15–17px
Line height
1.6–1.75
Used for
The text itself
Small
Typical size (web)
13–14px
Line height
1.5
Used for
Notes, captions, metadata
Label
Typical size (web)
11–12px
Line height
1.3
Used for
Spaced capitals, categories
Two rules worth as much as the whole scale: line height falls as size rises (a large heading with body line height looks loose), and the measure stays between 65 and 75 characters, beyond that the eye loses the next line.
Licensing: what you are allowed to do
Typefaces are licensed software, not free files. The categories that matter:
Open source (SIL OFL)
What it permits
Any commercial use, including self-hosting and modification
What to check
Nearly all of Google Fonts. The simplest option.
Desktop
What it permits
Installation on a number of machines, for static material
What to check
Does not cover web hosting
Web font
What it permits
Embedding on a site, usually capped by pageviews
What to check
Check the monthly cap
App / product
What it permits
Inclusion in software you sell
What to check
A separate, often expensive licence
For most small companies an open-source family covers everything and removes the question entirely. A commercial face is worth paying for when the display type genuinely is what differentiates the brand.
The fallback
You will need a typeface for situations where yours cannot be used: an email, a Word document sent to a partner, a form on somebody else's platform. Choose it yourself, from the system faces (Arial, Georgia, Verdana) and write it into the guidelines. Otherwise everybody chooses something different.
Common mistakes
- Synthesised bold and italic. If you use a weight the family does not have, the software fakes it. It shows, and it looks cheap. Use only weights that exist as files.
- All-caps headings without extra tracking. Capitals need increased letter spacing to breathe.
- Long text in a display face. Poster typefaces become exhausting after two paragraphs.
- Too many weights. Three is enough: body, medium, display.
- Centring long text. A ragged left edge makes the eye hunt for the start of every line.
What to fix in the guidelines
The families and where they come from, the permitted weights, the full scale with line heights, the maximum measure, the fallback, and the rules for capitals and figures. It is a short chapter of the brand guidelines, but one people actually open.
If you want pairings that are already checked (matched in proportion, with the scale and line heights calculated), RHAM generates them alongside the palette and the rest of the identity, from the same brief.
Frequently asked
- How many typefaces should a brand use?
- One or two. A single family used with three or four weights and a clear scale looks more coherent than two chosen badly. A third is justified only technically, a monospace for figures or code, for example.
- Are Google Fonts good enough for a commercial brand?
- Yes. The licence permits commercial use, self-hosting and modification, and the quality of the main families is professional. The only real drawback is that the most popular families are used everywhere, so they do not differentiate, but typography differentiates through how it is used far more than through which file it is.
- How do I check a typeface has the characters I need?
- Set a real sentence containing every accented character your markets require, in every weight you plan to use. Look for glyphs that jump, shift baseline or change weight, those are the signs the font is synthesising rather than drawing them.
- Can I use a different typeface online and in print?
- You can, if licensing forces it, but it is a loss. Typography is a strong recognition signal, and two different families across channels splits it in half. If it is unavoidable, pick a replacement as close as possible in proportion and write it explicitly into the guidelines.
Read next
- Brand colour palette: how to build one properlyThe structure of a palette that works (one accent, two neutrals, state colours, proportions, accessible contrast) and the codes you have to fix in the guidelines.
- Visual identity: what it is made of, and how to build oneThe seven components of a complete visual identity (palette, typography, layout system, imagery, logo, graphic elements and icons) and the order to build them in.
- Brand guidelines: what goes in, and how to write themThe full structure of a brand guidelines document, chapter by chapter, the rules that get used, the pages that only add weight, and a pre-delivery checklist.