The short answer is 16 pixels, and for most sites it is the right one. The longer answer explains why 16 is sometimes too small, why two fonts both set at 16 can look very different sizes, and why the unit you write it in matters as much as the number.
Why 16 pixels is the starting point
Every major browser renders text at 16 pixels unless told otherwise. That is not an accident of history; it is roughly the size at which body text is comfortable on a desktop screen at normal viewing distance, and on a phone held closer. Going below it for paragraphs is almost always a mistake, and a common one — small grey text is the most frequent readability complaint about the web.
Many content sites now go a step larger, to 17 or 18 pixels on wide screens, because readers sit further from a desktop monitor than from a phone. That is a reasonable choice for long articles. For interfaces packed with controls, 16 is usually right, and 14 is acceptable only for secondary labels.
The same size is not the same size
A font size sets the height of an invisible box, not the height of the letters. How much of that box the lowercase fills — the x-height — varies a great deal between typefaces. Inter and Atkinson Hyperlegible have large lowercase letters and read big. A face like EB Garamond, with a small lowercase in the manner of old book types, looks noticeably smaller at the same setting and may need 18 or 19 pixels to feel equivalent.
So choose the size by looking, not by the number. Set a real paragraph in the typeface you have picked, at 16, 17 and 18, and read each one on a phone and on a laptop. The Lorem Ipsum tool does exactly this with any font in the archive.
Merriweather Sans — variable
Sphinx of black quartz, judge my vow
In the static download
Write it in rem, not in pixels
Some readers set a larger default font size in their browser. A size written in pixels overrides that choice; a size in rem respects it. font-size: 1rem is 16 pixels for most people and 20 for someone who has asked for larger text. Use 1.125rem for 18. Leave the root element’s font size alone rather than setting it to a pixel value, which undoes the benefit for the whole site.
Size, line height and line length are one decision
- Line length. Around 45 to 75 characters per line. Wider, and the eye loses its place returning to the next line; a max-width of about 65ch on the text column is a simple way to enforce it.
- Line height. Around 1.5 for body text, written unitless. Larger sizes and longer lines want a little more.
- Contrast. Dark enough to reach at least 4.5 to 1 against the background. A perfect size in pale grey is still hard to read.
Changing one changes the others. A larger size in the same column gives fewer characters per line; a shorter line can take less leading. The spacing side of this is covered in kerning, tracking and leading, and the typeface side in the most readable fonts.