The body text size check: why paragraphs start at 16px

Why 16 pixels is the floor

Sixteen pixels is the default text size in every major browser, and for good reason: it's roughly the smallest size most people read comfortably for paragraphs at a normal distance. Designs often shrink it to 14 or 15 to look neat in a mock-up on a large monitor. On a phone, held further away and often outdoors, that text is hard work, and the visitor either pinches to zoom, which breaks the layout, or leaves. Older readers and anyone with less than perfect eyesight feel it first. A size of 16 or more isn't a style choice so much as the starting point a type scale is built on; the website body font size guide goes into the evidence and the trade-offs.

What the body text size check reads

The Critic looks in the page's stylesheet for the rule on body and reads the size from its font shorthand, the form that sets weight, size, line height and family in one declaration, such as font: 400 18px/1.6 var(--font). It passes when that size is 16 pixels or more, and the detail line shows the number it found.

That precision has a cost. The check understands one way of writing the size, and anything else leaves it without a number:

So a question mark in the detail doesn't mean the text is small, only that the check couldn't read it. It also looks only at the body rule: captions, footers and labels set smaller elsewhere aren't measured.

What the design systems set

Body sizes

Technical 16.5px, Brutalist and Swiss 17px, Playful 17.5px, Editorial and Organic 18px, Luxury 19.5px. Luxury, whose type is the lightest, gets the most size.

Line height

1.6 for body text in every system.

Secondary text

Captions, footers and labels mostly at 0.82 to 0.92 of the body size (Luxury's spaced capitals go down to 0.72), always relative rather than fixed small pixels.

Form fields

Typed text in inputs is fixed at 16px, so phones don't zoom the page when a field is tapped.

Headings

Section headings scale smoothly between 30 and 52 pixels with the screen width; the hero headline scales from the system's own base, adjusted by the Calm, Bold and Boldest setting.

Building a scale of your own

1. Choose the body size first: 16 to 20 pixels, larger for light or wide typefaces.
2. Set line height for that size, around 1.5 to 1.7 for paragraphs.
3. Derive small text from it as a fraction, so it moves when the body does.
4. Scale headings with clamp(), giving each a minimum for phones and a maximum for wide screens.
5. Read it on a phone at arm's length before deciding.

The type scale and line height guides cover each step in more depth.

Limits

• One syntax. As the table shows, the check reads a pixel size in the body's font shorthand and nothing else.
• Body only. Tiny text in other elements passes unnoticed.
• Size isn't readability. Contrast, line length and typeface matter as much, and none of them is measured here.
• Not enforced. It's reported in the Report tab; the design gate doesn't include it.

Questions people ask

Is 14px too small for body text?

For paragraphs, usually yes, especially on phones. Keep 14px for short labels if at all, and set body text at 16px or more.

Why does the check show a question mark?

It couldn't find a pixel size in the body's font shorthand, for example because the size was set with font-size or in rem. The text may be fine; the check just can't read it.

Can I make my Anticode site's text smaller?

Not on design-engine pages: body size comes with the design system. Technical has the most compact body text of the seven.