Text

Real Text

Images of text can present accessibility barriers, whereas "real text" or "live text" offers several benefits. The text in this sentence is real text. If you were to take a screenshot of this page, the resulting image would not be real text. With real text, readers can:

• Increase the zoom level without resulting in pixelated text
• Copy and paste
• Resize and reflow content to fit their preferred device
• Apply custom styles for legibility

Avoid using images of text unless it's essential, for example, in a logo.

Fonts

When selecting a font, keep legibility in mind:

• Avoid "fancy" script-style fonts.
• Avoid small font sizes (less than 9 points).
• When possible, use font families where the reader can distinguish between a lowercase L and capital i (as in "Illusion") or between a capital O and the number 0.

Alignment

Readers of the English language read content, tracking from left to right, top to bottom. Aligning each line of text to the left of the page can help neurodivergent and low-vision readers.

Left-aligned text creates a vertical line along the left edge, giving the eye a clear, natural starting point with each new line.

Justified (or “full justification”) alignment forces alignment on the left and right margin of the text. It originated when books were printed with a letterpress and helped create distinct columns of text. This was helpful before there were other design elements to set text apart as a group, and today, it can lead to more confusion than clarification.

Justified text introduces several barriers to reading comprehension and should be avoided.

• Words and letters are spread out or squished together to force the alignment to each extreme edge.
• Adding hyphenations is one option for overcoming the character spacing, but it further complicates the body of text by needing numerous hyphens in a condensed space, adding additional distractions.
• "Rivers of white" are created when there is increased spacing between words, and these gaps in text repeated across consecutive lines create a seemingly flowing white space, impacting tracking and reading comprehension.

Centered text creates a different starting point with each new line, leading to tracking and comprehension barriers. Use centered text sparingly with careful consideration for short headings and micro-bursts of text (like a short pull quote or image caption). Avoid mixing centered with left-aligned text.

As a best practice, use left-aligned text.

Examples

The following examples have increased letter spacing to help illustrate the impact of text alignment.

This paragraph text is left-aligned, giving the eye a clear, natural starting point with each new line of text. The jagged right margin also contributes to successful tracking. Left-aligned text is preferred.

This paragraph text is justified. Letters and words are stretched to align to all margins, creating the illusion of a box. This stretching creates intrusive "rivers of white," where white space can flow between lines. This alignment is most disruptive for readers.

This paragraph text is centered, and the left indent is in a different location with each new line. The inconsistency in alignment can create a distraction to readers.