Text occupies roughly 90% of the surface of a typical website — and web fonts reliably sit in the top three causes of slow loading. The pattern we see every month: a designer picks a beautiful pair, a developer wires up six weights from a third-party CDN, and the browser pulls 400 KB of fonts before showing a single word. Here is how to assemble a pair, build a size scale, avoid the script-coverage and licensing traps, and how much brand typography should actually weigh.

What the typeface actually decides

Clients treat font choice as a matter of taste. In practice it settles four things, and each is measurable in money.

• Readability of long copy. The gap between a considered body face and a random one is 10–20% of time on page. For a blog, a catalogue or documentation this is the primary criterion, not beauty.
• Perceived price. A high-contrast serif reads as expensive, a geometric sans as technical, a rounded sans as friendly. Colour does the same job, covered in our guide to colour psychology.
• Speed. Every weight is a separate file and a separate request. Six weights instead of two add 150–250 KB and delay the first meaningful paint.
• Maintenance cost. A face with poor character coverage means somebody will be hunting for a substitute glyph for a currency symbol or an accented letter a year from now.

Assembling a pair, not a collection

The working structure is almost always the same: one face for headings, one for body copy. A third is allowed only when it lives exclusively inside the logo. Four combinations that work, with their downsides attached.

The size scale that stops a layout drifting

The most common failure on small-business sites is not an ugly typeface — it is the absence of a system: eight text sizes, three of which differ by a single pixel. Hierarchy has to be obvious at arm’s length.

1. 1

   Start from body copy, not the headline

   Take 17–18 px on desktop and never below 16 px on mobile. Anything smaller and Safari zooms form fields on focus while the reader pinch-zooms the page.

2. 2

   Set a ratio

   Multiply the base size by 1.25 or 1.333 and round. That gives five or six steps, which covers any website. Intermediate values chosen by eye break the rhythm.

3. 3

   Tie line height to size

   Body copy wants 1.5–1.65, headings want 1.1–1.25. A heading at 1.5 looks scattered; a paragraph at 1.2 reads like a wall.

4. 4

   Cap the line length

   60–80 characters, roughly a 680–760 px column on a wide screen. Copy stretched across a full monitor rarely gets read past the middle.

5. 5

   Test on the worst device you have

   Open the layout on a 5.5-inch phone in daylight. If a subheading is indistinguishable from body text, go 400 against 700 rather than 400 against 500.

Script coverage and licensing: where budgets break

A typeface that looked flawless in an English mockup sometimes has its Cyrillic or Central European characters drawn by a different person five years after the Latin set. It shows immediately: accented letters sit oddly on the baseline, capitals change width. Check this before the face goes into a brand book.

Open-licence typefaces cover most commercial work and usually ship with solid multi-script coverage. A paid face earns its cost when the look of the text is part of the positioning: publishers, premium segments, brands with heavy printed collateral. How the typeface plugs into the rest of the system is laid out in our brand identity guide.

What typography costs in milliseconds

Fonts gate the display of text: until the file arrives the browser either draws nothing or draws a system face and repaints afterwards. Both hurt your metrics — but both are controllable.

• Self-host the files. A third-party CDN adds a DNS lookup and a fresh TLS handshake, which costs 200–400 ms on mobile before the font even starts downloading.
• WOFF2 only. It is 25–30% lighter than WOFF and supported by every browser still in use. TTF and EOT in a modern build signal a config copied from a 2015 article.
• Subset the character set. Strip Greek, Vietnamese and diacritics you never publish and the file drops 30–50%.
• Show text immediately. A swap-based display strategy removes invisible text and protects LCP; the remaining factors are in our loading speed breakdown.
• Preload only what is above the fold. Usually one heading weight and one body weight. Preloading five files performs worse than preloading none.

Frequently asked questions about brand typography

In short

• Two type families and a maximum of three or four weights cover almost any commercial website.
• Build the scale upward from body copy (17–18 px) with a 1.25–1.333 ratio instead of picking sizes by eye.
• Check script coverage and licensing before approving a typeface, not after it is in the brand book.
• Self-hosting, WOFF2 and subsetting keep typography at 60–90 KB instead of 400.
• A beautiful face that appears a second late performs worse than an average one that is there immediately.