Open Search

Centrally aligned text and readability

October 22, 2015 10:38 am
Categorised in:
Reading Time: 2 minutes

Because it’s bugging me:

Centrally aligned text shouldn’t be used for paragraphs, it’s a trend and because it looks better atheistically and is easier for responsive sites people are using it way too much, industry-wide.

The science of why you shouldn’t use so much centrally aligned text, by cleverer people than me:

When should you use centrally aligned text? When the text you are setting is 2-3 lines in length, then it’s usually about as readable as justified text or produces about as much fatigue. Anymore than that and I would forget about using it. If you are setting that much text centrally, consider whether you need that text at all or whether that’s something that you can shake out of the design because no one is going to read it.

This acceptable use rule also comes with a big BUT, if you are designing a responsive site and it sets perfectly at 2-3 lines at desktop when that scales to mobile you will suddenly have 8-12 lines of copy, centrally aligned again. What to do? What to do? For me, left align at mobile level and centrally align when the line numbers are suitable again.

An example of centrally aligned text being dog shit?

example of longform centrally aligned text handled badly

Also line length and leading/line-height of the set text will play a part in general readability here but not as much as that consistent starting position for the eye to read from.

Responsible use of responsive centrally aligned text

The big issue with using centrally aligned text is when displayed on a mobile device. The designer will have set this copy at desktop (probably using a line length that is too long again if they are using bootstrap) and then done the same thing when designing for mobile. Designers don’t consider that users tend to see the copy in isolation and tend to design for consistency.

However responsive design is about creating experiences optimised for the device users are using, there is nothing wrong with setting text as left-aligned for mobile devices and setting centrally for a desktop device. Your users will thank you for it!

This joint was penned by @elmarko