Open almost any website and the body text is small. Not unreadably small, but small enough that you lean forward slightly, or increase the browser zoom, or give up and leave. This is so common that most people assume it is simply how websites look. It is not. It is a design decision — usually a poorly considered one — that is costing those sites readers, engagement, and trust.
Where 16px came from
The 16px body text default was set by browser vendors in the 1990s, when screens were low-resolution and users sat close to large CRT monitors. It was never intended as a design recommendation. It was a technical baseline — the minimum size at which text was legible on the hardware of the time.
Screens have changed dramatically since then. Modern displays are higher resolution, physically larger, and used at a wider range of distances — from a phone held 25cm away to a desktop monitor at arm's length. The 16px default has not kept pace with any of this. Yet most web designers still treat it as the correct starting point, often reducing it further to 14px or 15px for body copy.
The result is a web full of text that is technically readable but uncomfortable — text that asks the reader to work harder than they should.
What the research says
Readability research consistently points to a larger optimal size than most websites use. The Web Content Accessibility Guidelines (WCAG) treat 18px as the threshold for large text — below that, stricter contrast requirements apply, precisely because smaller text is harder to read. That threshold is not a ceiling. It is the point at which text stops being considered small.
Studies on reading comfort on screens suggest that body text in the range of 18–22px, with appropriate line height and column width, produces the best reading experience for the majority of users across the majority of devices. That range is meaningfully larger than where most web designers land.
The compounding effect of column width and line height
Font size does not exist in isolation. A 20px body size in a 1200px-wide container is harder to read than the same size in a 660px column, because the lines are too long for the eye to track comfortably. A line length of 60–75 characters is the standard recommendation for readable body text — roughly 520–600px at 20px with a typical body typeface.
Line height compounds this further. At 20px with a line height of 1.4, text feels cramped. At the same size with a line height of 1.8, it opens up and becomes significantly easier to read. The font size, column width, and line height are a system. Optimising one without the others delivers only partial improvement.
This is one reason why whitespace in web design matters so much at the micro level — the space between lines of text is not a stylistic choice, it is a functional one that directly affects how long a reader stays on the page.
Why designers keep setting text too small
Several forces push body text smaller than it should be. The most common is the desire to fit more content above the fold — a concern that research has consistently shown to be misplaced, since users scroll readily on both desktop and mobile when content rewards the effort.
A second factor is that designers typically work on large, high-resolution displays where 15px looks perfectly readable. It often does, at arm's length, on a calibrated retina screen. It does not look the same to a user on an older laptop in a bright room, or on a mid-range Android phone at low brightness.
A third factor is simply convention. If every site you look at uses 16px, 16px starts to feel correct. This is the kind of default that goes unquestioned until someone questions it — and then it is immediately obvious that it should have been questioned earlier.
The right approach for web design projects
A practical starting point for any web design project is to set body text at 18–20px and work from there. Increase it if the typeface runs small, the column is wide, or the audience skews older. Keep it at the lower end of the range only if you have a good reason — not because a framework defaulted to it.
Set your line height at 1.7–1.8 times the font size. Constrain your content column to a maximum of 680–720px regardless of the viewport width. These are not aesthetic decisions. They are the baseline conditions for comfortable reading, and comfortable reading is the precondition for everything else a website is trying to achieve.
For a broader framework for thinking about type size, weight, and scale together, our guide to creating typographic hierarchy in web design covers how body size relates to heading levels and the overall type system of a project.
Mobile makes this more urgent, not less
The instinct on mobile is to shrink text further to fit more into a narrow viewport. This instinct is wrong. Mobile users are typically holding a device closer to their face than a desktop user, but they are also more likely to be in a distracting environment — commuting, waiting, moving. Text that requires concentration to decode is text that will be abandoned.
18px should be the floor on mobile, not the ceiling. If your desktop body text is 20px and your responsive stylesheet reduces it to 15px at small viewports, you have solved a layout problem by creating a readability problem. The layout should flex. The type size should not drop below the readable threshold.
A simple test
Before publishing any web design project, print a page of body copy at the intended size, or view it on the lowest-quality device available to you. If you have to concentrate to read it — if the experience is effortful rather than effortless — the text is too small. Increase it until reading feels easy, then check the layout accommodates the change. In almost every case, it will.
Good typographic decisions start with size, but they do not end there. A well-structured grid gives body text a column width it can actually breathe in — and that combination of the right size in the right container is what makes a page genuinely comfortable to read, rather than merely tolerable.