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 60% 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,
<meta name="viewport" content="width=device-width, initial-scale=1">
tag to the
<head> of your document.
See the Has a
<meta name="viewport"> tag with
post for more information.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.