September 2, 2020

Does center-aligned text matter for Accessibility?

Best PracticesUI / UX

the website architect

By

centering text for accessibility

I see it time and time again with UI and web design – people love centering, justifying, and right aligning text. People think this may make their text look pretty or my favourite forbidden word in web design, clean. But in reality, this is another example of people sacrificing user experiencing (UX) for user interface design (UI). Its time to put a stop to this! Does text alignment matter for accessibility? Let’s jump in.

Centered and justified aligned text does matter for Accessibility. By making your text anything but left-justified, you negatively change the way people read text from line to line. With center-aligned text the beginning of the next line is in a different position making it slower to begin reading the next line, decreasing reading speed.

Problems with center alignment and accessibility

The reason why center text alignment is horrible for user experience is that with each new line the user reads, there is a brief moment where the user has to find where the next line begins – decreasing the users reading speed.

Intentionally handicapping your user’s ease of reading? Hell yes! This is what I think goes through people’s heads when they decide to center a large paragraph.

What you’ll find is that in most cases centered text makes it worse for user experience. However there are some limits and exceptions of center alignment.

Paragraphs being centered

Why oh why are we doing this. Oh yes, because it’s pretty. Centered text has become such a common occurrence, especially in website design. The overuse of it has lead it to be acceptable, which is something im hoping this post can put a stop to.

In my opinion centered paragraphs are only acceptable up to a point, 3 lines of text to be specific. Anymore, it becomes too displeasing to read each line after.

Here are some examples:

This is an acceptable length of text in a paragraph to center align. No more than three lines of text. This may present as 4 lines on mobile size.

This is a much longer paragraph with a length that is displeasing to read because of the number of times you have to find the beginning of the next line. Centered paragraph text should be limited and used sparingly so it doesn’t make the user annoyed to read your text content. Notice all the content on this blog is left aligned? That’s called user experience, and don’t you forget it!

Should titles be centered?

Primary page titles should be okay centered as they tend to not have as many words and therefore lines of text. Most page titles aren’t long enough that text alignment becomes an issue with usability. However, with secondary titles (h2’s) and anything under should always be left-aligned to match its paragraph text.

An example of google title alignment is this blog post. At the title section at the top, I use left alignment because some of the titles of some of my articles may get long enough that centering the text would become annoying to read and so I use left alignment.

Justified text with readability

What is justified text?

Justified text looks like if center alignment and left alignment had a child together. Justified text makes your paragraphs look blocky and defined around the sides.

It works by changing the spacing between each word depending on how many words it best sees can fit onto one line. The spacing between the words in the same for each line, but changes for the next.

justified text example
The different spacings between each word because of justified-aligned text

The idea behind using justified text is that it looks more visually appealing than if left justified alignment was used. Hence its common use in books and written material.

How can books get away with justified text?

woman holding book

Books are by far the most common source of justified text out there. They love using justified text because it looks more visually appealing, and when books have a reputation for being boring and dull – they use what they can get.

Books can get away with using justified text because each line has enough words so that the different spacing between them is either little or insignificant. Each line of text in a book typically has around 60 characters per line, which is about 10 words per line. This enables books to have the visual appeal of justified text, and the user experience of left justified text.

However, justified text isn’t perfect. Sometimes with justified text you have too little words per line, making the words spaced out and look awkward. Justified text is also unsuitable when text is in a narrow column that forces fewer words to be on each line. Justified text also doesn’t work when the words in a particular line are too long, causing a bigger space to be in between each word causing it to look broken or unintentional.

book with justified text

In the case where justified text doesn’t work, left alignment would be used to make word spacing less distracting. It’s common practice for book designers and book formatters to choose what alignment is best for each book or written material.

Overall justified text has its uses. It can definitely add to the visual appeal of paragraphs on a page, but if not used with caution it can cause the text to look fragmented detracting from a positive user experience.

When to use right alignment

Right alignment should be used sparingly at best. There are some rare cases that it can actually make sense if used in low uses, like in this modern business letterhead example.

As a rule of thumb, right alignment should not be used if you are aligning text with more than 5 words at a time. This keeps the user experience in check while still adding in some rebellious formatting.

In the example to the right, the right-aligned text on has a maximum of 3 words per line which limits the negative user experience to be insignificant at worst – making it a good use case.

I should mention that right-aligned text is different than right-aligned elements. Right-aligned elements work well in most cases, and can actually help make use of otherwise unused space. In the letterhead picture, it’s okay that the content area is right-aligned, its the right text-align in that content area where my critiques lay.

Text alignment best practices

Use mostly left justified text

Left justified text is where its at. It’s familiar, it’s fast, and it’s reliable. Left text alignment should be used in 90% of cases to help your readers read at an optimal, undiminished reading speed.

Use less, but some center-aligned text if applicable

You can optionally use center align for some small sets of text like main page headings without detracting from the user’s experience. Paragraph text can get away with being center-aligned if it has 3 or fewer lines of text, any more then left-aligned should be used.

Only use justified text when it makes sense

Only use justified text for mediums where its commonplace like material books or e-books.

Sometimes you can get away with justified text on a website, but left alignment will always be better for usability. If you are going to use justified alignment, make sure there enough words (on average) per line so that the spaces between each word are fairly unnoticeable from one line to the next.

Avoid right alignment

Right alignment forces the reader to read in a weird way. Don’t alienate your users for the sake of making your design feel unique and special.

This isn’t to be confused with right-aligned elements, that’s a different story. Right-aligned elements are fully acceptable because they help make use of otherwise unused space.

If you are going to use it, make sure each line has 3 or less words per line, and 3 or less lines of text all together.

By

the website architect profile picture

I'm The Website Architect, just another web developer in Toronto, Canada. I'm passionate about Web Design, WordPress, and anything to do with websites. My goal is to make the Internet a more beautiful and usable place, one design choice and website at a time.