Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Document Doesn't Use Legible Font Sizes

Overview

Font sizes smaller than 12px are often difficult to read on mobile devices, and may require users to pinch-to-zoom in order to display the text at a comfortable reading size.

Recommendations

Aim to have a font size of at least 12px on at least 60% of the text on your pages. When a page fails the audit, Lighthouse lists the results in a table with 4 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.

Text is illegible because of 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 Has A Viewport Meta Tag With Width Or Initial-Scale.

More information

Audit source

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.