On my “A WordPress Formatting Manifesto” post, one commenter asked for a greater explanation of why I recommended not using center alignment, right alignment, and full justification when writing for the web. I responded with a long comment and have revised and expanded it to produce today’s post.

When it comes to making readable web pages, centered, right-aligned, and full-justified text reduces usability and slow down readers. While the problems may seem minor at first, the most usable websites are the ones that have the lowest interaction costs and minimize cognitive load. Steve Krug famously summarizes these sites as the ones that “don’t make me think.” (That’s an amazing book that you should read!)

For most sites, reading is the primary task a user does, so it makes sense that we should focus on optimizing that specific experience as much as possible. Getting back to the specific issue at hand—text alignment—left-aligned text is the easiest to read and therefore we should use it for all large blocks of text on a website.

The Dreaded Ragged Left Edge

Centered and right-aligned text both have a “ragged” left edged which has been shown to impede reading speed and comprehension. The straight (or “hard”) left edge and ragged right edge combination of standard left-aligned text performs best for  readers because it helps the eye find the start of the next line when it leaves the end of the last one.

Right Aligned Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, tellus finibus vestibulum facilisis, lorem nibh lacinia mi, in porttitor enim eros egestas libero. Curabitur molestie gravida euismod. Nullam at vulputate tellus. Duis in posuere mi. Curabitur pellentesque ullamcorper ante a congue. Suspendisse luctus quam nibh, sit amet faucibus erat sollicitudin nec. Duis elit tellus, volutpat in sem nec, aliquet vulputate dolor. Quisque luctus felis nunc, mattis lobortis mi dictum et.

Centered Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, tellus finibus vestibulum facilisis, lorem nibh lacinia mi, in porttitor enim eros egestas libero. Curabitur molestie gravida euismod. Nullam at vulputate tellus. Duis in posuere mi. Curabitur pellentesque ullamcorper ante a congue. Suspendisse luctus quam nibh, sit amet faucibus erat sollicitudin nec. Duis elit tellus, volutpat in sem nec, aliquet vulputate dolor. Quisque luctus felis nunc, mattis lobortis mi dictum et.An example of center-aligned text.

Full justification

We’re used to seeing full-justified text in newspapers and books where the layouts are done by hand and the text width never varies. In these instances, the shape of full-justified text is visually pleasing and may actually improve readability. But neither of these conditions are true when working on the modern responsive web.

The effect of full-justified text—which produces straight left and right edges of a text block—results in uneven space between words which is harder to read. Further more, the uniform shape of the paragraph again makes it easier for the eye to get lost when returning for the end of one line to the start of another.

Full Justified Text Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, tellus finibus vestibulum facilisis, lorem nibh lacinia mi, in porttitor enim eros egestas libero. Curabitur molestie gravida euismod. Nullam at vulputate tellus. Duis in posuere mi. Curabitur pellentesque ullamcorper ante a congue. Suspendisse luctus quam nibh, sit amet faucibus erat sollicitudin nec. Duis elit tellus, volutpat in sem nec, aliquet vulputate dolor. Quisque luctus felis nunc, mattis lobortis mi dictum et.

Technical Issues with Full Justification

The negative effects of full-justification are probably less of an issue with short line-lengths (though it looks worse). However, on the web, we don’t run into short lines much except when reading on phones or with CSS columns.  In those last two instances, though, the application of the text style would need to be made by CSS since it’s conditional, not a text editor.

Second, the browser implementation of full justification is still pretty nasty. It’s common to see really awkward gaps and bizarre hyphenation “decisions” made by browsers. Even for the narrow instances in the abstract where full justification might not hurt readability, the browsers can’t be trusted to do it well. Here’s a great example of that from WordPress:

Not Just Paragraphs

I didn’t find research to cite for this claim, but I also have seen many instances where centering or right-aligning headings (where the ragged edge issue is moot) makes the heading structure much harder to scan or people even miss the headings completely. I have written before on the importance of headings, so this is a severe usability issue if common. This Western Michigan University article on readability is a great example of how wonderful easily-scannable headings are when left-aligned with the text!

Not Just Words

On my own sites and when giving advice to other web editors, I take these observations even further and recommend that people generally avoid left “floated” photos that interrupt a straight left edge of text.

Left Floated Image Example

Note the overall “ragged” left-edge:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, tellus finibus vestibulum facilisis, lorem nibh lacinia mi, in porttitor enim eros egestas libero. Curabitur molestie gravida euismod. Nullam at vulputate tellus. Duis in posuere mi. Curabitur pellentesque ullamcorper ante a congue. Suspendisse luctus quam nibh, sit amet faucibus erat sollicitudin nec. Duis elit tellus, volutpat in sem nec, aliquet vulputate dolor. Quisque luctus felis nunc, mattis lobortis mi dictum et.An example of center-aligned text.

Right Floated Image Example

A clean left edge, just like left-aligned text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, tellus finibus vestibulum facilisis, lorem nibh lacinia mi, in porttitor enim eros egestas libero. Curabitur molestie gravida euismod. Nullam at vulputate tellus. Duis in posuere mi. Curabitur pellentesque ullamcorper ante a congue. Suspendisse luctus quam nibh, sit amet faucibus erat sollicitudin nec. Duis elit tellus, volutpat in sem nec, aliquet vulputate dolor. Quisque luctus felis nunc, mattis lobortis mi dictum et.An example of center-aligned text.

This is How People Do It

I did a quick survey of some prominent online publications and “reader” apps. These sites make it their primary focus to produce pleasant and efficient reading experiences for their users. They’re all left-aligned.

The Readability App

Instapaper’s Welcome Article

The “Pocket” app

Medium.com

America’s newspaper of record: The New York Times

The Feedly RSS Reader

So that’s why I don’t recommend right, center, or full justification and go so far as to remove those buttons from the standard WordPress text editor I use.

Caveat Reader

It must be noted that right alignment is presumably great for right-to-left languages like Arabic for all the reasons that left alignment is great for English, but that’s a topic for another day.

For English, the research is in, and I hope you’ll join me in sticking to left alignment. It’s HTML’s default for a reason.