diff --git a/src/content/en/tools/lighthouse/_toc.yaml b/src/content/en/tools/lighthouse/_toc.yaml index a48517e8b08..e395756a2d2 100644 --- a/src/content/en/tools/lighthouse/_toc.yaml +++ b/src/content/en/tools/lighthouse/_toc.yaml @@ -48,6 +48,8 @@ toc: path: /web/tools/lighthouse/audits/aspect-ratio - title: Document Does Not Have A Meta Description path: /web/tools/lighthouse/audits/description +- title: Document Doesn't Use Legible Font Sizes + path: /web/tools/lighthouse/audits/font-sizes - title: Element aria-* Attributes Are Allowed For This Role path: /web/tools/lighthouse/audits/aria-allowed-attributes - title: Element aria-* Attributes Are Valid And Not Misspelled Or Non-Existent diff --git a/src/content/en/tools/lighthouse/audits/_template.md b/src/content/en/tools/lighthouse/audits/_template.md index c9b24650501..e597eb5ea36 100644 --- a/src/content/en/tools/lighthouse/audits/_template.md +++ b/src/content/en/tools/lighthouse/audits/_template.md @@ -2,9 +2,9 @@ project_path: /web/tools/_project.yaml book_path: /web/tools/_book.yaml description: Reference documentation for the "AUDIT_NAME" Lighthouse audit. -{# wf_updated_on: 2017-12-11 #} -{# wf_published_on: 2017-01-30 #} -{# wf_blink_components: N/A #} +{# wf_updated_on: 2018-02-20 #} +{# wf_published_on: 2018-02-20 #} +{# wf_blink_components: Platform>DevTools #} # AUDIT_NAME {: .page-title } @@ -17,40 +17,3 @@ description: Reference documentation for the "AUDIT_NAME" Lighthouse audit. [Audit source][src]{:.external} [src]: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/AUDIT_NAME - -## Feedback {: #feedback } - -{% framebox width="auto" height="auto" enable_widgets="true" %} - -{% include "web/_shared/multichoice.html" %} -{% endframebox %} diff --git a/src/content/en/tools/lighthouse/audits/font-sizes.md b/src/content/en/tools/lighthouse/audits/font-sizes.md new file mode 100644 index 00000000000..c55682cef76 --- /dev/null +++ b/src/content/en/tools/lighthouse/audits/font-sizes.md @@ -0,0 +1,38 @@ +project_path: /web/tools/_project.yaml +book_path: /web/tools/_book.yaml +description: Reference documentation for the "Document Doesn't Use Legible Font Sizes" Lighthouse audit. + +{# wf_updated_on: 2018-02-22 #} +{# wf_published_on: 2018-02-21 #} +{# wf_blink_components: Platform>DevTools #} + +# Document Doesn't Use Legible Font Sizes {: .page-title } + +## Overview {: #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 {: #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 {: #viewport } + +If Lighthouse reports `Text is illegible because of a missing viewport config`, add a +`` tag to the `` of +your document. See [Has A Viewport Meta Tag With Width Or Intial-Scale][viewport]. + +[viewport]: /web/tools/lighthouse/audits/has-viewport-meta-tag + +## More information {: #more-info } + +[Audit source][src]{:.external} + +[src]: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/font-size.js