Ensure typography is readable and customizable

Applicable Role(s): Developer

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

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 at least 1.5 times larger than the line spacing. Examples: If line-spacing is equal to 1.5, paragraph spacing would be 2.25. If line-spacing is 2, then spacing between paragraphs would be 3.

Text should not be full-justified by default. This is done in 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

html {
 font-size: 20px;
}

This overrides the browser defaults, so if users increase the font size in their settings, the change will not take and stay at 16px.

Accessible Example

html {
 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 */

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.