Many search engines rank pages based on how mobile-friendly they are. Font sizes smaller than 12 px are often difficult to read on mobile devices and may require users to zoom in to display text at a comfortable reading size.
How the Lighthouse font size audit fails
Lighthouse flags pages with font sizes that are too small to read easily on mobile:
![Lighthouse audit showing page has illegible font sizes](/static/docs/lighthouse/seo/font-size/image/lighthouse-audit-showing-38ff49780439c.png)
Lighthouse flags pages on which 40% or more of the text has a font size smaller than 12 px. When a page fails the audit, Lighthouse lists the results in a table with four columns:
Source | The source location of the CSS ruleset that is causing the illegible text. |
Selector | The selector of the ruleset. |
% of Page Text | The percentage of text on the page that is affected by the ruleset. |
Font Size | The computed size of the text. |
How to fix illegible fonts
Check font sizes in your CSS. Aim to have a font size of at least 12 px on at least 60% of the text on your page.
How to fix a missing viewport config
If Lighthouse reports Text is illegible because of a missing viewport config
,
add a <meta name="viewport" content="width=device-width, initial-scale=1">
tag to the <head>
of your document.
See the Does not have a <meta name="viewport">
tag with width
oder initial-scale
post for more information.
Ressourcen
Source code for Document does not use legible font sizes audit