Lighthouse: "Document doesn't use legible font sizes"
Less than 60% of the page's text renders at 12px or larger on mobile, so Lighthouse fails the legible-font-size SEO audit.
What you see
Document doesn't use legible font sizes 42% legible text Text is illegible because there's no viewport meta tag optimized for mobile screens.
What’s actually happening
The SEO section of a Lighthouse or PageSpeed run shows "Document doesn't use legible font sizes" with a percentage of legible text below the bar. The audit measures, by text area, how much of the page renders at 12px or larger on a mobile viewport; it passes only when at least 60% clears that line. Fall under that and it fails. Two very different things trigger it: tiny CSS font sizes, or a missing viewport meta tag that makes the browser render the page at desktop width and shrink everything down.
Common causes
- No <meta name="viewport"> tag, so mobile browsers render at ~980px desktop width and scale the whole page down — text ends up far below 12px effective size
- Body or paragraph text set in small fixed pixels (font-size: 10px / 11px) across a large share of the page
- Small print everywhere: footers, captions, legal text, table cells, nav items, all under 12px and adding up past the 40% failing share
- A base font-size on html/body that's too small, with most type inheriting from it
- Absolute units (pt/px) tuned for desktop that don't scale on mobile, instead of relative units that respond to the viewport
How to fix it
- Add a proper viewport meta tagPut <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head>. If the audit fails specifically with "no viewport meta tag optimized for mobile," this alone usually flips it — the page stops being shrunk to fit a desktop-width layout.
- Find which text is failingExpand the audit in the Lighthouse report — it lists the failing selectors and their computed sizes, sorted by how much page area each covers. Fix the biggest offenders first; you only need to get legible text back over 60%.
- Raise base and body font sizesSet a comfortable base (16px is the common floor for body copy) and bump anything under 12px. Use relative units (rem/em) off the root so sizes scale consistently instead of hard-coded pixels per element.
- Handle the small stuff deliberatelyFooters, captions, and legal text are the usual culprits. Either lift them to 12px+ or accept they're a minority of page area — the audit is about the majority of text, so a tiny disclaimer alone won't fail it, but a page full of 11px copy will.
- Re-run on a mobile profileRe-test with Lighthouse's Mobile device emulation (it throttles and uses a mobile viewport). Desktop runs won't reproduce the failure, so always check the mobile audit after changing fonts or the viewport tag.
Stop it recurring
Default body text to 16px with relative units and ship the viewport meta tag in your base template so new pages start legible.