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.
One size for phones, a slightly bigger one for desktops
A phone is held closer than a laptop, so the same 16px is comfortable on one and a little tight on the other. The usual answer is a single fluid value rather than a breakpoint: clamp(1rem, 0.95rem + 0.25vw, 1.125rem) gives 16px on a narrow screen and 18px on a wide one, with everything in between handled for you.
Two cautions with fluid type. Keep the minimum at 1rem so a reader who has set a larger default still gets it, and keep the maximum modest — body text above about 20px starts to feel like large print rather than generous.
Headings are a scale, not a set of numbers
Pick a ratio and multiply rather than choosing each size by eye. A ratio of about 1.25 gives 16, 20, 25, 31, 39 — close enough to round to sensible values — and every heading on the site then relates to the body text by the same step. The result looks deliberate because it is.
- Body 16 to 18px, and the same size for lists, table cells and blockquotes.
- One step up for a subsection heading, two for a section heading, three or four for the page title.
- Captions and labels one step down, and never below 12px.
- Line height comes down as the size goes up: 1.5 for body, about 1.2 for large headings.
Forms, buttons and the 16-pixel rule
Input fields are the one place where a size has a hard behavioural consequence: iOS zooms into any field whose text is smaller than 16px, and the page is left scrolled sideways afterwards. Set every input, select and textarea to at least 16px and the zoom never happens.
Buttons follow the same logic for a different reason. A label at 14 to 16px inside a target at least 44px tall is the size a thumb can hit reliably, and the guidelines are explicit about the target rather than the text. Getting both right is why an interface often ends up with fewer sizes than a designer expects — the useful ones are a short list.
Inter — variable
Sphinx of black quartz, judge my vow
In the static download
An article and a dashboard are different documents
The 16 to 18px advice assumes text somebody reads. A dense interface is not that: it is a surface for scanning, where fitting more on screen genuinely helps, and 14px with tight line height is a reasonable body size for a data table.
The mistake is applying one of those answers to the other. A long article at 14px is tiring, and a dashboard at 18px means half the data is below the fold. Decide which kind of document each page is, and let the size follow — the interface side of that decision is in choosing a typeface for a product interface.