Website body font size: why 16px is a floor, not a target
Set body text at 16px or more, and treat 16px as the smallest acceptable size rather than the right one. Whether a given size reads comfortably depends on the typeface's x-height, the line height and the line length, so two fonts at 16px can feel a size apart. Most sites read better at 17 to 19px.
Where 16px comes from
Every major browser ships with a default text size of 16px, and has for a long time. It was a sensible compromise for desktop monitors viewed at arm's length. When phones arrived, the viewport meta tag let pages render at the device's real width, and 16px stayed the reference point: it's what text looks like if a designer does nothing.
That history explains why 16px became the website body font size designers quote, but it also explains why it's a minimum. It was never chosen for long reading on a small screen held in one hand, on a bus, by someone who left their glasses at home. Readers who need larger text often set a bigger default in their browser or system, which is why sizes should be written in rem so they scale with that choice instead of overriding it.
Same number, different size
A font's pixel size describes the height of its em box, not the letters you actually see. What the eye reads is mostly the x-height: the height of lowercase letters such as x, a and e. Faces with a large x-height look big at 16px; faces with a small one, including many geometric designs modelled on 1920s types, can look like 14px at the same setting.
| Typeface trait | What happens at 16px | Adjust to |
|---|---|---|
| Large x-height, open shapes | Reads comfortably | 16 to 17px |
| Average x-height | Fine but a little tight on phones | 17 to 18px |
| Small x-height, geometric | Looks small, tiring in paragraphs | 18 to 20px |
| Light default weight | Strokes thin out, especially on dark grounds | Increase size and use a heavier weight |
Line height and line length
Size is only one of three settings that decide how a paragraph reads. Line height for body text usually sits between 1.5 and 1.7. Too tight and the eye slips to the wrong line on the return; too loose and the paragraph falls apart into stripes. WCAG 2.2's text-spacing criterion asks that content still works when a reader overrides line height to 1.5, so test that your layout doesn't clip or overlap when they do.
Line length matters as much. Typographers have long recommended roughly 45 to 75 characters per line for comfortable reading. On a phone at 17px you'll naturally get around 35 to 45, which is fine; the bigger risk is desktop, where an unconstrained paragraph can stretch to 150 characters. Cap the reading column with something like max-width: 65ch.
Text that sits outside paragraphs
- Form fields. On iPhones, Safari zooms the page when someone taps an input whose text is smaller than 16px. Setting inputs to 16px or more prevents that jump without disabling zoom for everyone.
- Buttons. Keep button labels at body size. Small, spaced-out capitals on buttons look tidy and are harder to read at a glance.
- Captions, dates and hints. These can drop one step below body, to around 14px, but no further. Prices, opening hours and delivery dates are often what people came for.
- Legal and footer text. It's tempting to shrink it. People do read cancellation terms and addresses, so keep it legible.
Choosing the size for your site
- Start at 17px with a line height of 1.6.
- Read a full paragraph of your own copy on a phone, held normally, in daylight.
- If you find yourself bringing the phone closer, go up a pixel. If lines feel short and choppy, go down one or reduce the side margins.
- Check the same paragraph on a laptop and cap the line length.
- Ask someone older than you to read it. Their verdict is usually the one that matters.
For pages aimed at older audiences, health information or long-form reading, 18 to 20px is a reasonable default. The type scale then builds upward from whatever body size you settle on, so decide this first.
How Anticode sets body text
Anticode's Critic flags body text smaller than 16px on every build, the same floor described here. The design systems sit above it, each sized for its own typeface: Technical's IBM Plex Sans at 16.5px, Brutalist and Swiss at 17px, Playful at 17.5px, Editorial and Organic at 18px, and Luxury at 19.5px, which suits Jost's geometric shapes and small x-height.
The check looks at the size of body text, not at whether every caption or footnote is readable, and it can't tell whether your chosen colours keep that text legible. The design systems don't let you set body size yourself, so if you change sizes in an exported copy, read the result on a phone yourself. The accessibility guide has a short manual test.
Questions people ask
Is 16px too small for body text?
It's the minimum, and it works for faces with a large x-height. Many faces read better at 17 or 18px, especially on phones.
Should body text be bigger on desktop or on mobile?
Often the same, or a pixel larger on desktop because the screen is further away. Don't shrink it on phones to fit more words per line.
Is 14px acceptable for a website?
For captions, labels and metadata, yes. For paragraphs people need to read, no.
What line height should body text have?
Between 1.5 and 1.7 for most faces. Longer lines need the upper end; short lines on phones can use the lower end.