No Justification: Don’t Use Right, Center, and Full Justification on the Web

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:

A "Popular Tags" interface with large gap in middle.
Full-justification on the web at its worst.

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!

"Readability Do's and Don'ts" article on wmich.edu
The headings in this article about making readable documents are easy to scan because they’re left-justified, just like 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:

"Missing Missy" lost cat movie poster.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:

"Missing Missy" lost cat movie poster.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.

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.

10 thoughts on “No Justification: Don’t Use Right, Center, and Full Justification on the Web”

  1. Hey Mark, great article. I appreciate you taking the time to really explain this. It was funny, after I read this I visited my own site as I remembered a page where I was using centered headlines. Changing them to left-justification, yes, so much more readable.

    I could blame old habits, as it seemed in print in the old days centered titles were so common. But looking back, and of course with usability on the web, this makes so much more sense.

    Sometimes we overlook these important details. Cheers!

    1. Glad you found it helpful, Bob! I suspect that centered titles can be overcome with some clever design work (maybe only for major section headings), but only in cases where they’ve been thoughtfully designed that way from the start, not when I absent-mindedly hit the center button.

      The differences between print and web are often really subtle and I certainly get caught up sometimes thinking of one context when working in the other.

      All we can do is keep working thoughtfully with an open mind and a focus on constant improvement.

  2. Thanks for this detailed information, I was initially using full justify formating for my paragraphs but this has helped me now.
    Thanks Again!

  3. Hi, great post and fantastic advice. What do you recommend regarding large images as you’ve used above? It appears you’ve used both left align and centre align. Do you have any particular preference, or is there any justification for using one or another?

    1. Good question! I recommend against left-aligning since it leads to a ragged edge for right-to-left readers. I like centering for large images and right alignment for small ones.

  4. Thank you. I’ve felt this way for a long time but now that we are redesigning a few company websites I need to convince others — including the vendor that supposedly has experience with web design and usability — that left-justification and alignment is best for the user experience. Your article is great ammunition.

Join the Discussion