From a0ce647b191ffc004673431e6d62734f095d5dd4 Mon Sep 17 00:00:00 2001 From: Kayce Basques Date: Tue, 20 Feb 2018 13:03:57 -0800 Subject: [PATCH 1/2] [lightouse] update template & add "font sizes" reference --- src/content/en/tools/lighthouse/_toc.yaml | 2 + .../en/tools/lighthouse/audits/_template.md | 43 ++--------------- .../en/tools/lighthouse/audits/font-sizes.md | 47 +++++++++++++++++++ 3 files changed, 52 insertions(+), 40 deletions(-) create mode 100644 src/content/en/tools/lighthouse/audits/font-sizes.md 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..f126415a217 --- /dev/null +++ b/src/content/en/tools/lighthouse/audits/font-sizes.md @@ -0,0 +1,47 @@ +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-21 #} +{# 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 + +### Characters per line {: #characters } + +Although Lighthouse does not check characters per line, classic readability theory suggests +that 70 or 80 characters per line provides maximum readability. See [How to choose +breakpoints][breakpoints] for strategies on ensuring that your text is readable across different +form factors. + +[breakpoints]: /web/fundamentals/design-and-ux/responsive/#how_to_choose_breakpoints + +## More information {: #more-info } + +[Audit source][src]{:.external} + +[src]: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/seo/font-size.js From ffe76f5d90d49d82dd35c9223c633aa1b813662b Mon Sep 17 00:00:00 2001 From: Kayce Basques Date: Thu, 22 Feb 2018 07:48:30 -0800 Subject: [PATCH 2/2] [lighthouse] remove "characters per line" section --- src/content/en/tools/lighthouse/audits/font-sizes.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/content/en/tools/lighthouse/audits/font-sizes.md b/src/content/en/tools/lighthouse/audits/font-sizes.md index f126415a217..c55682cef76 100644 --- a/src/content/en/tools/lighthouse/audits/font-sizes.md +++ b/src/content/en/tools/lighthouse/audits/font-sizes.md @@ -2,7 +2,7 @@ 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-21 #} +{# wf_updated_on: 2018-02-22 #} {# wf_published_on: 2018-02-21 #} {# wf_blink_components: Platform>DevTools #} @@ -31,15 +31,6 @@ your document. See [Has A Viewport Meta Tag With Width Or Intial-Scale][viewport [viewport]: /web/tools/lighthouse/audits/has-viewport-meta-tag -### Characters per line {: #characters } - -Although Lighthouse does not check characters per line, classic readability theory suggests -that 70 or 80 characters per line provides maximum readability. See [How to choose -breakpoints][breakpoints] for strategies on ensuring that your text is readable across different -form factors. - -[breakpoints]: /web/fundamentals/design-and-ux/responsive/#how_to_choose_breakpoints - ## More information {: #more-info } [Audit source][src]{:.external}