Ensure typography is readable and customizable
Overview
Users with low vision or reading disabilities benefit from having text with increased line spacing, enough margin and/or padding, and fonts that are easier to read. For users that may need even more spacing, or a different font size or type, rendering the content so that it is customizable to the user's needs is even more important.
Best Practices
The following styling should be doable without losing content or usability:
- Line spacing within paragraphs should be at least 1.5.
- A unit-less declaration is preferred over declaring the spacing in ems, percentages, or other units. See the MDN docs on line-spacing.
- Paragraph spacing should be adjustable to at least 2 times larger than the font size. Example: Paragraphs rendering a default of 16px font size can be adjusted to paragraphs with 32px spacing.
- Letter spacing (tracking) to at least 0.12 times the font size.
- Word spacing to at least 0.16 times the font size.
Text should not be full-justified by default. This is done in content like newspapers to save space, but should be avoided in web content unless a user can set justification to their preference.
Avoid absolute pixel size on fonts, especially on the root <html> element. This will prevent users needing larger font sizes in their browsers to increase the font size of your page. Use relative units like percents, ems, or rems to change font size and spacing.
Pattern Examples
White Space
Inaccessible Example
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.
Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Accessible Example
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.
Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Justifying Text
Inaccessible Example
Purely justified text creates the "river" effect between words, which creates more space between words in order to keep the lines the same length. This type of spacing can make text harder to read for some users with reading disabilities.
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Accessible Example
This text is left justified, which is easier for most people to read.
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Letting Users Customize Font Size
Inaccessible Example
This overrides the browser defaults, so if users increase the font size in their settings, the change will not take and stay at 16px.
html {
font-size: 20px;
}
Accessible Example
Setting the root and font size to a relative unit means your site will respond better, no matter whether a user zooms on your page or increases their font size.
body {
font-size: 62.5%;
}
/* Browser default is 16px,
16 * 62.5% = 10px,
10px = 1rem */
body {
font-size: 2rem;
}
/* 2rem = 1rem (10px) * 2,
10px * 2 = 20px */