Font Size Too Small for Mobile: How to Fix It

What this check flags

This audit fires when too much of your text is too small to read comfortably on a mobile device. Lighthouse measures the rendered font size of every text node and passes the page only when at least 60% of the text, by character count, is 12px or larger. Put the other way around, if more than 40% of your text falls below 12px, the check fails. The 12px figure is a hard floor, not a target. It is the point below which characters become genuinely hard to parse on a phone, forcing visitors to pinch and zoom or simply give up. Google treats illegible body text as a mobile usability problem, and on a mobile first indexed web that friction works against both your rankings and your conversions.

The 16px baseline and why it matters

Passing the audit at 12px is the bare minimum. The widely accepted standard for body copy is 16px, and there are three reasons to treat it as your floor.

Legibility. A phone is held close to the eye but has few physical inches of screen, so text needs to be proportionally larger. At 16px a typical paragraph reads cleanly without zooming, which keeps people on the page instead of fighting it.

No pinch and zoom. When body text dips under 16px, mobile users start zooming to read, then scroll sideways to follow lines that no longer fit the viewport. Every gesture is friction, and friction is where visitors leave.

The iOS input trap. Safari on iOS automatically zooms the page whenever a user taps into a form field whose font size is below 16px, treating anything smaller as too tiny to read. The result is a jarring jump every time someone focuses a search box or a contact form. Setting your input font size to 16px or larger prevents the auto zoom entirely. This is the rendered size after any scaling, so the computed value is what counts, not just the number in the stylesheet. Android Chrome does not do this, but iOS is too large a slice of mobile traffic to ignore.

Where small fonts creep in

Tiny text is rarely deliberate. It usually slips in through a few common patterns.

Desktop first CSS. A design tuned for a wide monitor often uses 13px or 14px body copy that looks elegant on a desktop but cramped on a phone, with no mobile override to bump it back up.

Hardcoded pixel values. Captions, table cells, badges, form labels, and footer links are frequently set in fixed pixels like 10px or 11px. Because pixels do not scale with user preferences, those elements stay small everywhere.

An unset or broken viewport. Without a correct viewport meta tag the browser renders the page at desktop width and shrinks it to fit, dragging every font below the legible threshold even when your CSS values are fine.

How to fix it

Start by confirming the viewport meta tag sits in the head of every page. Without it, nothing else renders correctly on mobile.

<meta name="viewport" content="width=device-width, initial-scale=1">

Next, set a base size of at least 16px on the body and let everything else inherit using relative units, which scale with the root and with user preferences so a single change cascades across the page.

html { font-size: 100%; }       /* 16px default */
body { font-size: 1rem; line-height: 1.5; }
small, .caption { font-size: 0.875rem; }   /* 14px, the practical floor */
input, select, textarea { font-size: 1rem; }  /* stops iOS zoom */

The rule of thumb that passes comfortably is 16px for body, 14px for captions, and never below 12px for anything. Replace fixed pixel font sizes with rem or em, then test on a real device. Emulators do not reproduce how text feels in your hand, and the iOS form zoom is best confirmed on an actual iPhone.

How to diagnose it

Run Lighthouse in Chrome DevTools or PageSpeed Insights and open the "Document uses legible font sizes" audit. It lists every offending selector, the font size it rendered at, and the percentage of text that is too small. A crawler such as Screaming Frog surfaces these issues across every URL at once, which matters when the problem lives in a shared template. To confirm a single element, inspect it in DevTools and read the computed font size rather than the authored value.

Common mistakes

Do not reach for maximum-scale=1 or user-scalable=no to silence the iOS zoom. Disabling zoom blocks people who need to enlarge text and is an accessibility failure. Fix the font size instead. Do not assume passing at 12px is good enough, because 12px clears the audit but still reads small in the hand. Do not raise sizes on parent containers while leaving children pinned to hardcoded pixels, since those children will not inherit the change. And do not test only in a narrow desktop window, which does not reproduce real device pixel density or the iOS input behavior.

FAQ