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 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
initial-scale post for more information.