The readability of text on websites is significantly impacted by how that text is laid out on the page and the alignment used. As you design or build websites, it’s important to make text alignment decisions thoughtfully to ensure the website is easy to read and the text is accessible to the broadest audience.
Left Alignment: Best for Readability
Left-aligned text is the most common website alignment and the best choice for readability and accessibility.
Left-aligning creates a consistent left edge, making it easy for readers to find the start of each line and follows the natural flow of reading. Left-aligned text is generally considered the most readable and accessible option, as it reduces the effort required to track each line's beginning when the text wraps.
Center Alignment: Use for Limited Accents
Center-aligned text is less standard for body text but is often used for headings, titles, and shorter “accent” paragraphs or callouts. While including centered text can create a visually appealing and balanced look, it can also impact readability negatively if the centered text wraps to multiple lines.
Centered text breaks the natural left-to-right reading flow, making it harder for users to maintain a steady rhythm while reading. In a blurb or paragraph with centered text, it may be difficult for some people with reading disabilities or low vision to track sentences to the following line when it wraps. Centered text can also create uneven line lengths, which can be distracting and lead to a less comfortable reading experience.
When using center alignment, keep lines relatively short to mitigate these issues. As a best practice, only center headings that are a limited number of words and don’t wrap to multiple lines but left align any sentences or paragraphs.
Justified Alignment: Just Say No
Sometimes clients ask for text in paragraphs or body copy to be justified. Justified alignment lines up both the left and right edges of the text, creating a clean and polished appearance like you might see in a newspaper.
Justified text can introduce uneven spacing between words (frequently called “rivers of white”) that make it difficult to read. While justified text might work in print, the odd gaps it creates between words can be more pronounced on websites due to varying screen sizes and resolutions. This can be distracting or visually unappealing to all users.
In terms of accessibility, the justified text is especially problematic for users with dyslexia or visual impairments, as the irregular spacing can disrupt the flow of the text and hinder comprehension.
Accessibility Requirements for Text Alignment
The standard that most websites follow for measuring accessibility is Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Level AA success criteria do not reference text alignment. Thus, avoiding centered or justified text is a “best practice” at this level rather than a requirement.
If the website is taking a step up and striving for AAA conformance, success criterion 1.4.8 Visual Presentation requires that there is no justified text.
Though it’s not strictly a WCAG “failure” to center blocks of text, we should still prioritize readability when designing web pages. While center-aligned text can have its place in design for specific elements, left-aligned text is generally the most accessible and readable option.
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!Group Thread