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.