Skip to content
This repository was archived by the owner on Aug 10, 2022. It is now read-only.

[lightouse] update template & add "font sizes" reference #5810

Merged
merged 2 commits into from
Feb 22, 2018
Merged

[lightouse] update template & add "font sizes" reference #5810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0ce647
[lightouse] update template & add "font sizes" reference
kaycebasques Feb 20, 2018
ffe76f5
[lighthouse] remove "characters per line" section
kaycebasques Feb 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/content/en/tools/lighthouse/_toc.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

@rviscomi rviscomi Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we update the audit config to use "Does Not" for consistency with other audits?

Copy link
Contributor Author

@kaycebasques kaycebasques Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One way or the other, I was thinking about putting a PR in to make it consistent across reports

Copy link
Contributor Author

@kaycebasques kaycebasques Feb 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Contracting it makes it feel a little more informal, which seems more in line with LH's voice

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
Expand Down
43 changes: 3 additions & 40 deletions src/content/en/tools/lighthouse/audits/_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }

Expand All @@ -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" %}
<script>
var label = 'AUDIT_NAME / Helpful';
var url = 'https://github.com/google/webfundamentals/issues/new?title=[' +
label + ']';
var feedback = {
"category": "Lighthouse",
"choices": [
{
"button": {
"text": "This Doc Was Helpful"
},
"response": "Thanks for the feedback.",
"analytics": {
"label": label
}
},
{
"button": {
"text": "This Doc Was Not Helpful"
},
"response": 'Sorry to hear that. Please <a href="' + url +
'" target="_blank">open a GitHub issue</a> and tell us how to ' +
'make it better.',
"analytics": {
"label": label,
"value": 0
}
}
]
};
</script>
{% include "web/_shared/multichoice.html" %}
{% endframebox %}
38 changes: 38 additions & 0 deletions src/content/en/tools/lighthouse/audits/font-sizes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
`<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 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