Uppercase and centre aligned text are two text formatting styles that are often misused in web design so this post covers the basics of when or if they should be used.
When to use uppercase (all caps) text
Your website is like a one way conversation with your visitor. Hopefully if you play your cards right, they’ll want to continue the conversation by making an enquiry. Uppercase text is stronger, heavier and more assertive in the way it speaks to the reader. Lowercase is more relaxed and friendly in the way the reader interprets it. Uppercase text can meet a specific need but use it sparingly. If everything is uppercase then it’s like having a conversation with someone who shouts every sentence.
Paragraph text should never be all uppercase as people tend to ignore it like they mute a shouty TV commercial. It’s also slower to read because the beginning and end of sentences aren’t as clear.
Other places where all caps headings can be appropriate is to represent a more formal or high end product/service. In the Miro Vineyard example above, the capitalised heading confidently suggests high quality wine.
Centre aligned text: Use it sparingly and use it wisely
Centre aligned text can have a negative effect on your website’s design, effectiveness and readability if it’s not used correctly. Usability expert Jakob Nielsen states in his book “Designing Web Usability”:
"Almost all text should be left-justified. By having a steady starting point for the eye to start scanning, the user can read much faster than when faced with centered or right-justified text. Of course, it is acceptable to center or right-justify a few lines for effect, but one should not do so for blocks of text." (Nielsen, pp 126)
Designing Web Usability, (New Riders, 2000) Jakob Nielsen, pp 126, "Chap 3: Content Design".
Without a doubt, left aligned text is better for readability than centred text. There is never a time when left aligned text won’t work with a design. Centre aligned text is challenging to use correctly and has a lot of conditions on it’s use if it’s to be used effectively.
Our recommendations on when to use centre aligned text
Wait a minute, don’t you use centred text on the Rocketspark website? The centred text on the Rocketspark website meets a list of design conditions and is used sparingly for a specific purpose. Where we’ve used center aligned text on our website, it’s not that left aligned text wouldn’t work, it’s that centre aligned text has a slightly added benefit. Here’s some of the conditions to making centre aligned text work:
Don’t use it for more than 3 lines of text, ideally less than 3 lines.
If you use it for a heading and the paragraph under it, make them both about the same width.
Craft the wording of the text so the edges of the paragraph don’t have jagged edges as this affects readability.
If you put centred text next to something else on the page:
It should be symmetrically balanced with each other both in shape and type of content. eg, don’t put centred text to the left and an image to the right.
Make the text the same height as each other.
It should work with the overall balance of the page.
If you centre align text and it’s the only thing at that horizontal axis on the page, it needs to be in the centre of the page.
If you centre align text and there’s a symmetrically balanced equivalent, the combination of the two should be centred on the page.
We wanted to compare options side by side and put the focus of the page on the centre rather than the left hand margin. If the left hand margin was the focus, that would put more focus on the left hand option.
After each section, make sure there’s plenty of vertical space.
Only use it when it serves a specific purpose - use it sparingly and intentionally.
As you can see, there’s a lot to think about with centre aligned text and the decision to use it shouldn’t be made lightly. In most scenarios left aligned text is the best option.
On a Rocketspark website you can use centre alignment on both headings, buttons and body text as required.
