What makes a font work on the web
- Readable at small sizes. Open letter shapes and clear numbers on a phone.
- A full set of weights. Regular, medium and bold at least.
- Distinct characters. A capital I, a lowercase l and the number 1 look different.
- Good fallbacks. A similar system font shows while yours loads.
Body text carries most of the reading, so choose it first. Heading fonts can carry more personality, as long as they stay legible.
Fonts affect speed
Every font file is a download. Google's web.dev guidance puts it plainly. The fastest font is one the page never requests. Each extra family or weight adds weight to the first screen and can delay your Largest Contentful Paint.
| Practice | Why it helps |
|---|---|
| Use WOFF2 files only | About 30% smaller than the older WOFF format |
| Limit families and weights | Fewer files to download |
| Subset the characters | Removes glyphs your site never uses |
| Preload the main font | The browser fetches it sooner |
| Match the fallback size | Prevents the page jumping when fonts swap |
Readability settings
Font choice is only half the job. Size, line height and line length matter as much. WCAG's guidance on visual presentation suggests lines of no more than 80 characters and line spacing of at least 1.5 within paragraphs. Body text around 16 to 18 pixels reads well on phones.
Good example. A law firm uses one serif for headings and one clean sans-serif for body text, in three weights, self-hosted as WOFF2.
Bad example. A bakery loads five decorative fonts from three services. The menu text is hard to read, and the page jumps as each font arrives.
Rathly.com uses one family, IBM Plex, with metric-matched fallbacks so nothing shifts. Our web design team sets up fonts the same way for every client.