Mobile Text Too Small

Element Code: MO-008

What this check is really testing

The "text too small to read" flag comes straight from Lighthouse and Google's mobile usability logic. The tool renders your page at a mobile viewport and measures how much of your text sits below a legible threshold. Google's guidance uses a rough rule: the bulk of your text should render at roughly 12px or larger once the page is scaled to the device, and it wants a page where a reader never has to pinch-zoom to make words readable. Under 12px effective size, and you trip the flag.

Here is the part people miss. The check is not just about the number you typed in your CSS. It is about the rendered size on a real phone, which depends on your viewport meta tag. If you forgot the responsive viewport, the browser assumes a desktop-width canvas and shrinks everything to fit the screen. Your perfectly reasonable 16px text renders at the size of ant footprints, and Lighthouse is right to complain.

Why small text hurts you in search

Since Google moved to mobile-first indexing, the mobile rendering of your page is the one it primarily crawls, indexes, and evaluates. So mobile legibility is not a nice-to-have for the minority of your visitors. It is the default version of your site in Google's eyes.

The consequences chain together. Text that forces zooming produces frustration, faster bounces, and shorter sessions. Page experience is a real ranking input, and while no single signal decides everything, a page that is annoying to read on a phone is fighting uphill. It also quietly caps conversions: people do not fill out a form or trust a checkout they cannot comfortably read. And because more than half of most sites' traffic is mobile, the audience feeling this is the majority, not an edge case.

The size spectrum

How to detect it

How to fix it, step by step

1. Fix the viewport first. Make sure every page has <meta name="viewport" content="width=device-width, initial-scale=1"> in the head. Without it, nothing else matters, and this single line fixes the majority of "text too small" reports.
2. Set a 16px base. Give the body a base font-size of 16px (or 1rem). Build everything else relative to that.
3. Use relative units. Size headings and components in rem or em so they scale with the base and respect the reader's own font settings. Avoid pinning body copy in tiny fixed pixels.
4. Audit the small stuff. Captions, footers, disclaimers, form labels, badge text, and menu items are the usual culprits. Nothing meant to be read should drop below about 12px on mobile.
5. Do not disable zoom. Never add maximum-scale=1 or user-scalable=no to the viewport. Blocking zoom is an accessibility failure and takes away the reader's last defense against small text.
6. Check line length and spacing too. Legibility is size plus line-height plus contrast. A 16px font with 1.5 line-height and solid contrast reads far better than 16px crammed together in pale grey.
7. Re-run Lighthouse. Confirm the legible-font audit passes at 100 percent and then read the live page on a phone to be sure.

What "good" looks like

Body text renders at 16px on a phone with no pinch-zoom required. The responsive viewport tag is present on every template. Headings and components scale with rem units. The smallest readable text on the page is around 12px and reserved for genuine fine print. Zoom is enabled. Lighthouse reports 100 percent legible text. You can hold the phone at arm's length and still read a paragraph. That is the target.

FAQ