Text too small on mobile

A size chosen for a desktop layout applies at every viewport unless a media query changes it, and frequently none does.

Design tools render at a scale that does not correspond to a phone's physical size, so the mock-up looks fine.

A relative size inherited from a container that was itself reduced compounds down the tree without anyone choosing the result.

Secondary text — captions, metadata, legal notices — is set smaller by convention and then reduced again by the same inheritance.

Which means the smallest text on a page is usually the text nobody looked at.

Contrast: the threshold is higher for small text precisely because thin strokes carry less of it, so small and marginal together fail worse than either alone.

Line length, which at a small size on a narrow screen produces very many short lines and a tiring read.

Zoom, which is the visitor's remedy — and which some sites disable, removing it.

Touch targets, since small text frequently means small links, which are hard to hit as well as hard to read.

So the finding rarely arrives alone, and fixing the size frequently resolves two of the others.

Body text at a size that does not require zooming on a phone held at a normal distance, which is larger than most desktop body text.

Line height proportionally generous, since tighter leading at a small size compounds the difficulty.

Secondary text kept close to the body size rather than substantially below it.

A size expressed in relative units so that a visitor's own browser text-size setting scales it, which fixed pixel sizes prevent.

That last point matters more than the absolute value: honouring the visitor's preference is what makes the page adaptable at all.

A visitor who has set a larger default text size in their browser has done so because they need it.

Text sized in absolute pixels ignores that setting entirely, so the preference has no effect on your site.

Relative units scale from the browser's base size, which means the preference works as intended.

Which makes the unit choice an accessibility decision rather than a stylistic one.

The same reasoning applies to line height, spacing and container widths where text is involved.

Open the site on a real phone and read a body paragraph without zooming.

In developer tools, use a phone viewport and inspect the computed font size on body text.

Check the secondary text — captions, footers, form hints — which is usually smaller than the body.

Increase the browser's default text size and reload: if nothing changes, the sizes are absolute.

Check the contrast on the smallest text, since the two failures compound.

`mobile.text_size` reports text rendered below a comfortably readable size at a phone viewport, which is this problem directly.

`mobile.viewport` is read first, since a missing or restrictive declaration makes every other mobile measurement unreliable.

`accessibility.contrast` computes the ratios, which interact with size through the threshold that applies.

`mobile.touch_targets` reports targets too small or too close together, which frequently accompanies small text.

`mobile.readability` and `mobile.content_width` describe the rest of the reading experience at that width.

Text rendered inside an image does not reflow, does not scale with a browser preference and cannot be selected.

Zooming enlarges the pixels rather than the glyphs, so it becomes blurry rather than readable.

It is also invisible to search engines and to assistive technology unless described in alt text.

Which makes an image of text the one case where no size adjustment helps, and the fix is real text over a background image instead.

Mobile browsers apply a text inflation behaviour that enlarges body text in narrow containers, independently of your styles.

It fires unpredictably — on some blocks and not others — which produces a page where sizes no longer relate to each other.

It exists precisely because so many sites set desktop sizes and never adjusted them, so it is a workaround for this defect.

The text-size-adjust property controls it, and disabling it without first setting readable sizes removes the safety net and leaves the problem.

Which means the correct order is: set readable sizes at a phone viewport first, then decide whether to opt out of the inflation.