Centering Dos and Don’ts for Blog Posts and Web Pages

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.

• 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.