Major Headline
Paragraph text but can you tell it’s a paragraph? This is a bit tough to read. Everything is centered and unlike a book chapter, isn’t aligned to the left.
"Quotes look a bit odd with every line centered. Readers expect the quotes to be an indented or centered block of text."
It can be very tempting when putting together your web page, landing page, or blog post, to center page headlines, text, and images in the hopes of drawing attention. Unfortunately with any elements you wish to emphasize, overdoing can have the opposite effect. A lot of centered elements can result in getting lost in the shuffle, look visually cluttered, and be harder to read for your web visitors.
Dos – here are some elements that do well with centering.
- Quotes. Centering the entire box area of your quote or quote’s section looks nice centered (as long as the paragraph itself is left aligned). Indenting also looks great.
- Major headline. Your header would count for this but limit to doing this once on a page. Newspapers are a good example of how headlines are treated, one centered major headline, and additional headlines are left aligned.
- Captions. Under a photo in smaller, yet readable. Text centered underneath the photo not only looks good and people expect to see it centered.
- Images. Below a paragraph, this can look nice as long as the image isn’t too small – roughly two thirds of the paragraph to make proportional sense.
Don’ts – some elements to avoid.
Major Headline
Paragraph text but can you tell it’s a paragraph? This is a bit tough to read. Everything is centered and unlike a book chapter, isn’t aligned to the left.
Sub Header
"Quotes look more natural with a left alignment. Readers expect quotes to be indented or centered inside of paragraph alignment in a block format."
- Paragraphs. Best practice is to left align your paragraphs. Centered multi-lined paragraphs look messy and are going to slow down your reader because we are used to reading left to right.
- Column paragraphs. Same principle at work as paragraphs, every line in a column being centered is very difficult for your site visitors to read. Centering the entire column is fine but aligned to the left (with the right a ragged edge) for the paragraph within a column.
- Titles. Centering a title other than the main title doesn’t indicate a sense of priority. Also if it’s more than one line – you have multi-centered lines making it harder to read and looks messy.
- Bulleted Lists. This may confuse the reader – they are expecting a left aligned list with the paragraphs indented. Centering lists looks disorganized and tough to read.
Look to websites with large traffic and you will see text alignment patterns consistently used. There are of course exceptions, which gurus can effectively break. However, using the above techniques will contribute towards better communicating with your site visitors. Cutting down on alignment confusion also increases understanding of the hierarchy of your content and goes a long way towards a more enjoyable reading experience.
Do you have tips? I’d love to hear them, leave a comment.
Additional Reading:
Why You Should Never Center Align Paragraph Text, UX Movement
Quick Tip: Avoid Center-Aligned Text
How Text Alignment Effects Online Readability
More Website Tips!
Subscribe to the Arts Assistance newsletter for more tips to help you with your blog and websites. Tips are for non-coders wanting great info on what works best and increasing appeal to your audience.
Thanks Nancy for such helpful and well organized information. I have always wondered what the status quo is for paragraphs, quotes, etc. Very useful, thanks!
Great post Nancy! It IS much easier to read text that is left aligned than centered. Sometimes people go overboard trying to make things stand out. It’s good to know what the standards are because what might look good to the person setting up the page or post, doesn’t necessarily have the same impact for the reader.