Choose brand typefaces in three passes: pick a pairing that suits the brand’s voice, confirm the licence covers every place you will use it, then load it on the web in a way that does not slow pages down. Most brands need only one or two families. The licence and the loading method are the parts people forget until a launch is already close.
Step 1: Pairing logic
A reliable system gives each font a clear job.
- Display or headline face: carries personality. Use it sparingly.
- Text face: built for long reading at small sizes. Prioritise legibility over character.
- Optional mono or accent: only where there is a genuine need, such as data or code.
Practical pairing rules:
- Contrast, do not clash. A geometric sans with a humanist serif works because the shapes differ clearly. Two similar sans-serifs look like a mistake.
- Match x-height and proportions where the fonts sit side by side.
- Prefer one superfamily with many weights over several unrelated families.
- Check the full character set you need, including accented letters and, if relevant, Chinese or other scripts, which affects how a Latin typeface can be paired with a local-script one.
Test at real sizes on real screens, not only in a specimen page. Our guides on what makes a brand look premium and consistent visual identity across channels cover how type fits the wider system.
Step 2: Licensing
A font is software and comes with a licence. “I bought it” does not automatically mean “I can use it everywhere”. Typical permissions to check:
| Use | Question to ask |
|---|---|
| Print and signage | Does the licence cover commercial print and logos? |
| Website | Is webfont use included, and is there a page-view limit? |
| App or software | Is embedding allowed, and how many apps? |
| Video and social | Is use in motion graphics included? |
| Seats | How many designers or computers does it cover? |
Open licences are common. The SIL Open Font License (OFL) FAQ states that OFL fonts can be used commercially in logos, posters and merchandise without extra permission, and that loading them as webfonts through CSS @font-face is explicitly allowed. You cannot sell the font on its own, and modified versions must stay under the OFL. Authors may also reserve font names, which restricts what you can call a modified version (OFL FAQ).
Keep a licence register: font name, foundry, licence type, purchase date, permitted uses and renewal terms. For commercial fonts with unusual terms, read the actual agreement or ask a lawyer. This is general information only.
Step 3: Web performance
Fonts are render-critical files, so loading choices matter. web.dev’s font guidance recommends:
- WOFF2 only. It has the best compression and broad support.
- Subsetting. Remove glyphs you do not use, and use
unicode-range, but confirm the licence allows it. The OFL FAQ notes that subsetting a webfont generally counts as modification for reserved-name purposes. - Selective preloading. Preload the one or two files needed above the fold; preloading too much steals bandwidth from other resources.
- A deliberate
font-displayvalue.swapshows text immediately then swaps, which can shift layout;optionalavoids shifts but may skip the web font if it arrives late (web.dev).
MDN lists the five values and how each balances the invisible “block” period against the visible fallback “swap” period (MDN). Choose a fallback font with similar metrics so a swap is barely noticeable.
Web.dev also notes that self-hosting only tends to beat third-party font hosting when you use a CDN and HTTP/2, so measure before assuming. Layout shift from fonts feeds into the metrics explained in Core Web Vitals for business.
A quick selection checklist
- One display face and one text face, at most.
- Licence covers the print, web, video and app uses you actually have.
- Character set covers every language you publish in.
- WOFF2 files, subset, with a tested fallback.
- Licence register filed where the whole team can find it.
Where Radiance Impact fits
Typography sits across brand and build. Radiance Impact’s Technology division builds business websites, and the Studio handles brand and video work where type appears in motion. To discuss a project, contact us.
Sources
- Best practices for fonts, web.dev, Google
- font-display, MDN Web Docs, Mozilla
- OFL FAQ, SIL International
