Key takeaways
- Licence before love. A desktop-only family is not a web brand font.
- Weight count is a performance choice. Every file you load is milliseconds on mobile.
- Fallback stacks are part of the system — not an apology when webfonts fail.
The moodboard font looked perfect in the presentation. Legal asked if you licensed web embedding. Engineering said the five weights add four hundred kilobytes. Polish diacritics broke in the product UI. Beautiful type that cannot ship is not brand typography. It is a poster.
How to choose brand fonts balances legibility, language coverage, licensing, weight discipline, and web performance. The choice sticks for years — in slides, signage, and the CSS someone inherits at 11 p.m. before launch.
When you need a brand kit placed type beside logo and colour. How to build for the web in 2026 treated performance as a design constraint. This page is the scorecard before you fall in love with a display face.
Legibility and role split
Brand typography usually needs at least two roles:
- Display — headlines, hero, marketing moments. Personality allowed. Legibility still required at large sizes.
- Text — body, UI, forms, long reading. Neutral, sturdy, generous x-height.
Test both at real sizes:
- Body at 16–18px on phone, not only 72px in Figma
- Headlines at the longest line you publish — service names, legal hedges
- Tabular numbers if you show pricing or data
Avoid using a decorative display face for paragraphs. Avoid two personalities fighting for attention in the same sentence.
Language and character coverage
List languages and scripts you must support today and in two years:
- Latin extended for European languages
- Cyrillic, Greek, Vietnamese diacritics as needed
- Currency symbols and math glyphs if product UI demands them
A typeface that fails on a customer's name is not inclusive — it is a bug. Check specimen PDFs or trial fonts for the exact characters you ship in product copy, not only English marketing lines.
Licensing: desktop is not web
Font licensing is where brand projects quietly break. Common buckets:
| Licence type | Typical use | Web embed? |
|---|---|---|
| Desktop | Design files, print | No — convert or buy web licence |
| Web / app | CSS `@font-face`, mobile app | Yes — within pageview or MAU limits |
| Enterprise | Large traffic, multiple brands | Negotiated |
Read the foundry EULA or use a platform with clear web terms — Google Fonts, Adobe Fonts licensing, or direct purchase from the designer. Self-hosting does not bypass licence limits. It only moves the files.
Document: who owns the licence, renewal date, allowed domains, and whether contractors may use the desktop files.
Weight discipline and performance
Each weight and style you load on the web is a network cost. web.dev guidance on font best practices recommends subsetting, limiting families, and using `font-display` sensibly.
Practical brand stack:
- Display: one weight, maybe italic
- Text: regular + semibold or medium for emphasis
- Avoid loading thin weights used once on a careers page
Run the webfont performance scorecard on staging:
1. Count WOFF2 files loaded on homepage and one inner page 2. Measure transfer size for fonts alone — target discipline, not vanity numbers 3. Check cumulative layout shift when fonts swap — fallbacks matter 4. Test on throttled mobile, not only office Wi-Fi
If fonts exceed your performance budget, cut weights before you cut features. Web performance budget treats type as spend.
Fallback stacks are part of the brand
Define system fallbacks that approximate metrics — not Times New Roman as punishment:
```css font-family: "Brand Text", system-ui, -apple-system, "Segoe UI", sans-serif; ```
Match x-height and weight where possible so layout does not jump. Specify fallbacks in the brand guide, not only in developer comments.
Pairing without circus
Rules that survive committees:
- Contrast roles — display + text, not two displays
- Shared aperture or similar stroke width helps harmony
- One personality maximum in UI chrome
- If logo has custom lettering, do not compete with a shouty headline face
When in doubt, one excellent text family with a restrained display cut ships faster than a trendy trio nobody maintains.
Handoff developers can implement
Brand typography deliverables should include:
- Licensed WOFF2 files or approved CDN links
- CSS variables for roles — `--font-display`, `--font-body`
- Size and line-height scale for web headings and body
- Fallback stacks and weight map
- Do-not list — no synthetic bold, no outline effects on small type
When two families are chosen, document hierarchy rules in the same PDF developers receive — not only in the design file. "Display for H1–H2, text for everything else" prevents a well-meaning contractor from adding a third face because a slide template still had Georgia.
Test rendering on Windows and Android, not only macOS. Metrics differ. A fallback that looks acceptable on a designer's laptop may clip on a mid-range phone if line-height was tuned for desktop display sizes only.
Print and slide use still matters for many B2B brands. If the web licence does not cover PowerPoint embedding, say so in the guide — and ship a separate desktop package for the teams that live in decks.
Branding defines the system. Web development implements `@font-face`, subsetting, and preload strategy on the full website.
What you can score yourself
You can run the licence checklist and weight count today. You can test Polish or Vietnamese sample strings in trial fonts.
You should not self-host files without reading the EULA. You should not approve five weights because the PDF looked nice — measure on mobile.
CLICK.BLUE pairs logo and branding kit work with web implementation so type survives contact with production. Twelve-plus years, fifty-plus businesses, a hundred-plus websites — the fonts that lasted were licensed, lean, and named in the token file.
Start with licence and weight count. We will help you ship type that matches the specimen.
