Font size is one of the first things that decide whether a page is comfortable to read.
Text that is too small to read comfortably, or that breaks when someone zooms in, tells readers the site wasn’t built with them in mind. Get the responsive website font size guidelines below, and your content works on any screen, for any reader, without a redesign.
Keep body text at 16px (1rem) or larger on a phone, the same floor as on desktop. That is the short answer for mobile, and it is our working practice rather than a WCAG rule.
Why font size is an accessibility requirement, not a style choice
WCAG 2.1 Success Criterion 1.4.4, Resize Text asks that text can be resized up to 200 percent without loss of content or functionality. A failure is also quiet: a page can look fine at normal size and break when enlarged, with overflowing text, clipped fixed-height boxes, or navigation that disappears.
The fix starts with units. MDN’s font-size reference says font sizes set in px are not accessible, because the user cannot change the font size in some browsers. It recommends values relative to the user’s default font size, such as rem.
Is your site readable for everyone?
Font size rarely fails in isolation. It usually sits alongside contrast, line length and spacing problems that together make a site hard to use, particularly for older readers, people with low vision, and anyone using a phone in bright light. If you are not sure where your site stands, an accessibility and readability review is a faster way to find out than guessing from a checklist. We offer this as part of our sustainable web design service, which builds accessibility in from the start rather than patching it in afterwards. Get in touch if you would like us to look at yours.
Responsive website font size guidelines for common text elements
The ranges below are our working practice, not a cited standard. Treat them as a sensible starting point, then test.
- Use a base of at least 16px (1rem) for body text on any device. Keep it at least that large on mobile, since a small screen held closer does not excuse small type.
- Headings: a clear step down from H1 to H2 to H3 helps a reader scan the page. Use a visibly larger H1 than body text, then reduce in steps rather than jumps, so the hierarchy stays obvious without any single heading dominating the page.
- Buttons and calls to action: at least the same size as body text, since a control that is hard to read is also hard to trust.
- Captions and footnotes: smaller than body text, but not much smaller, since legibility should be the last thing you compromise.
Whatever base size you pick, define it once in rem and let every other size scale from it. That is what keeps the whole page consistent when someone changes their browser’s default text size, rather than only when your CSS says it should.
Line length and line height matter as much as size
A font can be the right size and still be tiring to read if the line is too long. The eye has to travel further and then find its way back to the start of the next line, and at a wide measure it loses its place more often. Keep your text column narrow enough that a line reads comfortably in one sweep.
Line height compounds this. Text set too tight, especially across a long line, blurs together; text set too loose can feel disconnected.
WCAG’s text spacing test sets line height (line spacing) to at least 1.5 times the font size. Build your layout so nothing breaks when a reader does the same.
Testing your font size decisions
Testing is quick and does not need specialist tools:
- Set your browser zoom to 200 per cent and check nothing overflows, clips or disappears.
- View it on a real phone, not just a resized browser window, since mobile browsers and desktop browsers do not always render text the same way.
- Check contrast alongside size. A large font in low-contrast grey is still hard to read; the two problems are often solved together, not separately.
- Ask someone else to read it, ideally someone outside your team, since familiarity with your own site hides small friction that a new visitor notices immediately.
Common mistakes to avoid
- Using pixels everywhere. It works until a reader who needs larger text arrives, at which point the layout may not follow their browser settings at all.
- Shrinking text to fit a design. If content requires text smaller than is comfortable to read, the layout is the constraint that needs to change, not the text.
- Treating mobile as an afterthought. Font sizes designed for desktop and only scaled down for mobile often end up too small on a phone.
- Testing only at default zoom. A page that looks fine at normal size can break when text is enlarged, so always run the zoom test.
Where to start
Start with your body text, since it is what most readers spend most of their time in. Set it to at least 16px (1rem), define your scale in rem, then zoom your own site to 200 per cent and see what breaks. If the answer is “quite a lot”, that is common, and it is fixable without a full rebuild.
If you would rather have someone else check it properly, our sustainable web design service builds accessible typography, contrast and layout in from the start, designed and tested against WCAG 2.1 Level AA. You can also read more about our wider approach on our accessibility commitment page, or see how typography sits alongside colour and imagery in integrating brand identity into web design and designing for neurodiversity. For a wider view of what accessible practice covers on a website, see digital accessibility in web design.
If you want us to look at your own site, get in touch and we will tell you plainly what we find.