Find your center?
7/3/2007 - Aesthetics

I know you do it.  Oh, sure - you think everybody does it, but here's a tip for you: stop it now before it makes you go blind.  You've got a problem with centering text in your web layouts and it needs to be dealt with.  The number of design scenarios where center-aligning text is the best choice approaches zero.  If you're still centering text, there's hope for you.  The key to overcoming your addiction is realizing why you're doing it in the first place.

There's something about centering text that's appealing, though, right?  It feels good - that's why we do it.  Center-aligning a block of text fills the space better than if you left-justify it.  Remember when you were a kid and you had to write a four-page book report?  What did you do?  Double-space it!  Centering text helps use all the space available without any glaring whitespace.

We also center text because humans like visual balance.  When we're critiquing our web page, we may find that centered text pleases us because it appears balanced.

And?

But those are good things, right?  Sort of, but not really.  Centered text is hard to read, for one thing.  We westerners start everything at the left and then move right, so it's easier for our eye to track when everything is left-justified.  The jagged lines at the edges of a centered text block creates visual noise.

But one of the worst things about centered text blocks is what it does to the rest of your design.  Once you start, it's hard to stop, and thus the result is that all of your text is centered in order to keep your design consistent.  Otherwise your content becomes a jumble of different text formats that looks disorganized.

What you can do

Centered text can be used to good effect occasionally if:

  • It fills nearly all the space available.
  • It's a small amount (one line) of isolated text .
  • You're displaying poetry - maybe.

Remember that white space is good.  Filling the page shouldn't be your goal.  Strive for a balance between the weight of your text blocks, images, colors and whitespace.  Frankly, few people really notice how you've carefully laid out your text when they're reading it, but they will certainly know (even if only subconciously) when they dislike what they're looking at.

If you feel like you need to isolate or distribute text differently, try using <blockquote>.  This will effectively center your block of text while keeping it left-justified. 

Where balance is concerned, focus on creating a balanced page instead of just balancing each block of text.  One way to do this is to sketch your page layout using paper and pencil.  Draw a few shapes representing your text and images, but leave out the detail.  Fill in each shape with your pencil, using more fill for dark sections, less fill for lighter ones.  Now take a look at your sketch - you can probably identify places where you need more or less whitespace, and which areas have more visual weight than others.  The goal here is to rearrange your content to provide a good overall balance to the page.

And by the way, this is a great time to consider which parts of your page attract the viewer's attention, and which ones should attract attention.

So there you go.  Try it.  Please.