Fonts and Readability on a Business Website
Short answer: Make body text comfortably large (the GOV.UK Design System uses 19px for paragraphs), keep lines to roughly 45–90 characters, give long text a line height of at least 1.5, and make sure text contrasts with its background by at least 4.5:1. Use one or two font families, not five. Load web fonts efficiently so your text appears quickly and doesn't jump around as the page loads.
There is no "best font"
Owners often ask which font to use. The honest answer is that the typeface matters less than how it's set: size, spacing, line length and contrast. A plain, well-made font set at a generous size on a calm background beats a beautiful one squeezed into tiny grey text. Choose a typeface that suits your brand, has the weights you need (regular and bold at minimum), and supports any accented characters your customers' names and places use. Then follow the rules below.
Rules of thumb, with reasons
1. Body text: start bigger than you think
The GOV.UK Design System sets its default paragraph size at 19px, and its recent Frontend releases updated the type scale to increase text size on small screens for legibility and accessibility. You don't have to copy a government site, but it's a useful benchmark: plenty of business sites use smaller body text than that, often in light grey, and that's where readability problems start.
Why: your readers are on phones, in kitchens, on trains, sometimes without their glasses. Bigger text costs you nothing but a little extra scrolling.
2. Line length: 45 to 90 characters
The U.S. Web Design System says most lines of text should be 45–90 characters, with 66 as a good target for long texts. On a phone this happens naturally. On a desktop, a paragraph stretched across a wide screen can run well past that.
Why: long lines make it hard for the eye to find the start of the next line. Set a maximum width on your text column.
3. Line height: at least 1.5 for paragraphs
The same USWDS guidance recommends a line height of at least 1.5 for longer texts, and between 1 and 1.35 for headings of a line or two. It also notes that longer lines need more line height.
Why: cramped lines blur together, especially for readers with dyslexia or low vision.
4. Contrast: at least 4.5:1 for normal text
MDN's summary of WCAG success criterion 1.4.3 puts the minimum contrast between text and background at 4.5:1, and 3:1 for larger text (at least 18pt, or 14pt bold). The enhanced AAA level is 7:1.
Why: pale grey text on white, white text on a busy photo, and brand-coloured text on a brand-coloured background are the most common readability failures on small business sites. Check your colours with a contrast checker before signing off a design.
5. One or two font families
A heading font and a body font is plenty. Many good sites use a single family in two or three weights.
Why: each extra family or weight is another file to download and another style to keep consistent. Mixed fonts also make a small site look less professional, not more.
6. Left-aligned, not justified
USWDS recommends setting text flush left, noting that justified text doesn't display well enough in browsers to be considered best practice.
Why: justified text creates uneven gaps between words on narrow screens.
7. Don't put important text inside images
Opening hours, prices and offers inside a graphic can't be resized, translated, searched or read by screen readers. Use real text, styled to look the way you want.
8. Respect readers who change text settings
Some visitors enlarge text or increase spacing in their browser. Design layouts that stretch rather than cut off text, and avoid fixed-height boxes around paragraphs.
A five-minute self-check
Open your homepage and one service page on your own phone, then on a laptop.
| Check | Pass if… |
|---|---|
| Body text size on a phone | You can read a paragraph at arm's length without zooming |
| Line length on a laptop | Paragraphs don't stretch across the full screen; count roughly 10–15 words per line |
| Line spacing | Lines of a paragraph are clearly separated |
| Contrast | A contrast checker shows 4.5:1 or better for body text, including text on photos and coloured panels |
| Fonts in use | Your browser's developer tools show one or two font families |
| Text in images | Prices, hours and offers are real text |
| Zoom | At 200% browser zoom, nothing overlaps or gets cut off |
Fix the failures in this order: contrast, size, line length. Those three cover most of the problems readers notice.
Performance: fonts without the wait
Web fonts are files the browser must download before it can show text in that font. web.dev's guide to font best practices explains the two risks: delayed text rendering, which can push back First Contentful Paint and sometimes Largest Contentful Paint, and layout shifts when the web font replaces a fallback font of a different size.
What to do:
- Use WOFF2 files. web.dev notes WOFF2 has the widest browser support and the best compression, around 30% smaller than WOFF.
- Load fewer weights. Every weight and style (regular, italic, bold, bold italic) is a separate file. Drop the ones your design doesn't use.
- Choose a
font-displaystrategy. web.dev describesfont-display: optionalas the most performance-focused option (text render delayed no more than 100ms, no swap-related layout shift, but the web font may not be used if it arrives late), andswapas the option that shows text quickly and still uses the web font, provided the font arrives early enough not to cause a shift. - Subset where possible. Fonts that include only the character sets you need are smaller; some font services do this automatically.
- Consider a system font stack. Using the fonts already installed on people's devices means no download at all. It's a sensible choice for body text on a speed-focused site.
FAQ
Is 16px too small for body text?
It's a common browser default and not wrong, but for content-heavy pages many teams now go larger. Test your actual font at your actual size on a phone; some typefaces look much smaller than others at the same pixel size.
Should I use Google Fonts or host fonts myself?
Either can work. web.dev notes that the performance difference is less clear-cut than expected and that self-hosting works best with a CDN and HTTP/2. If you self-host, apply the optimisations font services usually do for you, like subsetting and WOFF2.
Does typography affect SEO?
Not directly. It affects whether people stay and read, and slow-loading fonts can affect page speed measurements.
If your site's text is pale, small or slow to appear and you'd like it fixed without a full redesign, send us the address and we'll take a look.