-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
core(font-size): recalibrate the legible font sizes #4550
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,7 +9,7 @@ const URL = require('../../lib/url-shim'); | |
const Audit = require('../audit'); | ||
const ViewportAudit = require('../viewport'); | ||
const CSSStyleDeclaration = require('../../lib/web-inspector').CSSStyleDeclaration; | ||
const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 75; | ||
const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 60; | ||
|
||
/** | ||
* @param {Array<{cssRule: SimplifiedStyleDeclaration, fontSize: number, textLength: number, node: Node}>} fontSizeArtifact | ||
|
@@ -177,9 +177,9 @@ class FontSize extends Audit { | |
name: 'font-size', | ||
description: 'Document uses legible font sizes', | ||
failureDescription: 'Document doesn\'t use legible font sizes', | ||
helpText: 'Font sizes less than 16px are too small to be legible and require mobile ' + | ||
'visitors to “pinch to zoom” in order to read. Strive to have >75% of page text ≥16px. ' + | ||
'[Learn more](https://developers.google.com/speed/docs/insights/UseLegibleFontSizes).', | ||
helpText: 'Font sizes less than 12px are too small to be legible and require mobile ' + | ||
'visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. ' + | ||
'[Learn more](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#optimize_text_for_reading).', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @rviscomi FYI I updated the link to avoid the redirect + BTW do we have anything better we can link to? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is ok for now. Please work with @kaycebasques to get first-party LH SEO audit docs online and we can update this link when ready. |
||
requiredArtifacts: ['FontSize', 'URL', 'Viewport'], | ||
}; | ||
} | ||
|
@@ -245,7 +245,7 @@ class FontSize extends Audit { | |
source: 'Add\'l illegible text', | ||
selector: null, | ||
coverage: `${percentageOfUnanalyzedFailingText.toFixed(2)}%`, | ||
fontSize: '< 16px', | ||
fontSize: '< 12px', | ||
}); | ||
} | ||
|
||
|
@@ -254,7 +254,7 @@ class FontSize extends Audit { | |
source: 'Legible text', | ||
selector: null, | ||
coverage: `${percentageOfPassingText.toFixed(2)}%`, | ||
fontSize: '≥ 16px', | ||
fontSize: '≥ 12px', | ||
}); | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<small>
has a font-size of ~13px , h6 is ~10px