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.
4 Types of alignment
The 4 types of alignment in graphic, UI, and web design are:
- Left
- Right
- Center
- Justified
In terms of specifically web design, these types of alignment are used in different ways.
Left alignment is by the most popular text alignment, and also the default one. Left alignment is commonly associated with lengthy paragraph text, which enables it to be as easy as possible to read.
Center alignment is used more sparingly and for visual appeal like with these common 3 or 4 column layouts on homepages. I also often see it at the bottom of pages as call to actions, giving less lengthy content better symmetry.
Right alignment is rarely used, if ever. But if it is used, its to align text up to another element for more visual flare.
And lastly justified alignment is used more commonly with minimal or luxurious design styles to give it some visual taste and elegance.
Left alignment
Left is the most popular and default text alignment. Its the best for readability and user experience because of the way our eyes read.
Right alignment
Right alignment is probably the most uncommon alignment used, and when it is used – it’s typically used in small quantities.
A great example of right alignment being used effectively is in the website navigation. With right alignment, you can include a CTA button In the top right and have the main links align with it nicely making the navigation very scannable.
Right alignment should be used sparingly at best, as right alignment isn’t good for user experience and readability. 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.
Center alignment
Center alignment can look great in small doses, but it can lead to problems when people overuse it.
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.
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 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!
You can just see from the second example the paragraph is flat-out annoying to read. This only gets worse on mobile devices. This is why left alignment should be used 95% of the time.
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 alignment
What is justified alignment and how does it work?
Justified text looks like if center alignment and left alignment had a child together. Justified text makes your paragraphs look like blocks and defined have 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.
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.
The problems with justified alignment and why its bad
What can very easily happen with justified alignment is in narrow columns or lines with a lot of long words, there can be massive awkward spacings between each word. Sometimes it’s so bad where it splits up words into syllables. This creates for a bad user experience, making the text hard to read.
This might happen without you knowing, if text is scaled/resized in such a way to force the text like that.
When justified alignment is used in books or magazines, there are people that go through each page and manually adjust the spacing to get rid of any of those awkward spacings and even add hyphens if necessary. This is completely unreasonable to do on a website, there are just too many different screen sizes, screen resolutions, and zoom levels to have justified text on a website without having awkward alignment for at least someone.
Why are books and magazines fully justified?
Books and magazines are by far the most common source of justified text out there. They love using justified text because it looks more visually appealing, and looks more professional.
It can even save on printing costs due to the pages saved in making sure each line of text is used to its full width.
Each line of a book or magazine usually have enough words so that the problems of justified alignment don’t happen. 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.
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.
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 95% of cases to help your readers read at an optimal, undiminished reading speed.
Use less, but some center-aligned text if applicable
You can use center alignment in small doses 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 as the text becomes too notably annoying to read.
Only use justified text when it makes sense
Only use justified text for mediums where its commonplace like material books or e-books.
Rarely 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 are enough words 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.
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.
The only commonplace acceptable use of right alignment is navigations on websites.
