Text too small to read on mobile: the right font sizes for phones

Updated October 17, 2026 · Covers: Very small text (under 12px) Small text (12–14px) Body text is smaller than recommended

What it means

Some of the text on your page is smaller than is comfortable to read on a phone. MobileCheck reports this at three levels:

• Very small text (under 12px) – hard to read for almost anyone on a phone.
• Small text (12–14px) – acceptable for captions, footnotes and labels, but tiring for paragraphs.
• Body text smaller than recommended – the average size of all text on the page is under 15px.

Sizes here are CSS pixels, the same units you write in your stylesheet once the page has a proper viewport meta tag.

Why it matters

Phones are read at arm's length, in sunlight, on the bus, often with one hand. Text that looks fine on a 27-inch monitor can be a strain at 14px on a 6-inch screen. When text is too small, people zoom, squint or leave. Small text also makes everything else harder: low contrast becomes worse, and long words are harder to recognize.

Readers with low vision often raise the default font size in their phone settings. Your CSS decides whether the page respects that choice, which is another reason to size text in relative units.

Font choice matters as well. Typefaces with a small x-height, very thin strokes or tight letter spacing look smaller than their nominal size, so a 15px light weight can read worse than a 14px regular one. If your brand font runs small, compensate with a slightly larger size or a heavier weight for body text.

Recommended font sizes for mobile

These are practical guidelines, not a formal standard. WCAG doesn't set a minimum font size; it requires that text can be resized to 200% without losing content (success criterion 1.4.4), which is easier when sizes are relative.

How MobileCheck finds it

MobileCheck measures the computed font size of every visible text element on each device, as it is actually drawn. If the page is scaled down because of a missing or fixed viewport, the measured sizes are scaled too, which is why tiny-text warnings often appear alongside viewport problems.

• Text under 12px is flagged as very small, and each element is highlighted on the screenshot.
• Text from 12px up to 14px is flagged as small, as a warning.
• If the average size across all the page's text (weighted by amount of text) is under 15px, the page gets the "body text is smaller than recommended" warning. This one is skipped when the viewport is already flagged, so you aren't penalized twice for the same cause.

The menu scenario checks text inside the opened mobile menu too, where tiny links are common. Each flagged element shows its measured size on the screenshot, so you can match it to the rule in your stylesheet: inspect the element in DevTools and look at the computed font-size and which rule sets it.

How to fix it

Set a sensible base size

Most browsers default to 16px. Don't override the root size with a smaller pixel value; set your body text in rem so it follows the browser and user settings:

html { font-size: 100%; }          /* respects the user's default */
body { font-size: 1rem; line-height: 1.5; }
small, .caption { font-size: 0.875rem; }  /* 14px at default */

Avoid the old html { font-size: 62.5%; } trick unless you then set body text back to at least 1.6rem. Forgetting that step is a common source of 10px text.

Use clamp() for fluid sizes

clamp() lets text grow smoothly with the screen while staying within limits. Keep the minimum in rem so zooming and user settings still work:

body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
h1   { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

Don't size text with vw alone, as in font-size: 4vw. It ignores the user's font preference and becomes unreadable on narrow screens.

Make form fields 16px

Safari on iPhone zooms into a form field when it is focused if the field's font size is under 16px. The page jumps, and visitors have to zoom back out after typing. The fix is to give fields a 16px font, not to disable zoom:

input, select, textarea { font-size: max(16px, 1rem); }

The guide to disabled zoom explains why maximum-scale=1 is the wrong answer to this problem.

Watch out for text inflation settings

If you set -webkit-text-size-adjust, use 100% rather than none. A value of 100% stops Safari from enlarging text on its own in landscape, while none has historically interfered with zoom in some browsers.

Fix the menu and footer too

Small text often hides in places nobody reviews on a phone: mobile menus, cookie banners, footers, breadcrumbs, price notes and form hints. Give secondary text 13–14px minimum and keep line spacing comfortable; the line length and line height guide covers the rest of readable typography.

How to check the fix

Run the free check again and look at the text section of the report: the highlighted elements should be gone, and the average size should be 15px or more. Also look at the large-text scenario to make sure bigger fonts don't break the layout; the large text guide explains what to look for.

Test form fields on a real iPhone. The zoom on focus is a behaviour of Safari on iOS, so neither Chrome's device emulation nor a desktop WebKit reproduces it: tap into your search box or checkout form on the phone and confirm the page stays at normal zoom.

Related guides