Font Size Legible.

Text smaller than 12px is flagged by Google as a mobile usability issue — affects mobile ranking

What does this check test?

This check verifies that all text on the page uses a legible font size — at least 12px (or equivalent in relative units) for body text on mobile viewports. Google's mobile-friendliness criteria flag text smaller than 12px as a usability issue, and this is factored into mobile search rankings. The check evaluates the computed font size at mobile viewport widths (360–412px), accounting for CSS media queries and viewport-relative units. At least 60% of page text should be 12px or larger, with body text ideally at 16px for optimal readability.

Why does it matter?

Since Google's mobile-first indexing rollout, the mobile version of your site is what Google uses for ranking — even in desktop search results. Google's mobile usability report in Search Console explicitly flags "Text too small to read" as an issue that can prevent a page from being considered mobile-friendly. Pages that fail mobile-friendliness checks can see significant ranking drops in mobile search results, which now account for over 60% of all Google searches. Beyond SEO, small text forces users to pinch-zoom, increasing bounce rate and reducing engagement — both indirect ranking signals.

Who is affected?

Front-end developers setting typography scales, UI designers defining type systems, responsive design engineers building mobile layouts, and QA engineers testing on real mobile devices. Design system maintainers should enforce minimum font sizes in their token definitions.

Where does this apply?

All text content at mobile viewport widths: body text, navigation labels, footer text, form labels and placeholder text, button labels, captions, legal text (terms and conditions, copyright notices), data table cells, and tooltip text. Particularly check footer links and legal disclaimers, which designers often set at very small sizes.

How to fix it

/* Base size: browsers default to 16px */
html { font-size: 100%; }

body { font-size: 1rem; }       /* 16px — body text */
.caption { font-size: 0.875rem; } /* 14px — still legible */
.legal { font-size: 0.75rem; }   /* 12px — absolute minimum */

/* Bad: too small for mobile, Google flags this */
.fine-print { font-size: 10px; }

/* Good: responsive typography with clamp */
.heading { font-size: clamp(0.875rem, 2vw, 1rem); }

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

References

• Google — Mobile-Friendly Test criteria
• web.dev — Document uses legible font sizes
• web.dev — Responsive typography