White space, or negative space, on a web page is, quite simply, the area between elements on the page. It is sometimes used in the “micro” sense of the space between words or list items (or even letters), but most often – and for our purposes – it’s the empty space between major design elements – e.g., between two graphics or between a graphic and a block of text or between a block of text and the edge of the page (or screen) and so on.

For the sake of clarity, no, white space technically doesn’t have to actually be white. In fact, it usually isn’t. It can be any colour (or pattern) that’s in the background of the page. If your page has a red background, you might want to call the negative space “red space” but then if you changed the background colour to pink, you’d have to call it “pink space” and that’s just too confusing for everyone. So we stick with “white space” because, well, that’s the way it’s always been.

So? Why is this a big deal? Well, as you may have guessed, based on the title of this article, white space can be used to your advantage, if used properly on your website. Here are some ways how:

Focus

If enough white space is used around an element, your eyes are naturally drawn to it. Size, colour, and other factors, of course, affect what you may focus on, but if there’s nothing around for miles, you’ll certainly see the one item in an ocean of blankness. Take a look at the photo below.

What do you notice? I’m going to bet it’s the cup of coffee. Don’t ask me how to explain how I did that trick, it’s top secret. Maybe it’s just that you’re feeling a bit tired and need a pick-me-up, but I’m guessing it’s more likely due to the vast amount of nada surrounding the mug.

If the above image had been cluttered with other items, such as sugar cubes and creamer, your eyes wouldn’t have so readily gone to the coffee. Leaving large amounts of space around an object is a great way to get your audience to focus in on a single item. This, of course, is a great technique to use for call-to-action buttons.

Association

As the amount of white space around an element increases, so does its separation. Conversely, the less space there is between items, the more likely they are to be considered related to one another. Look at the image below.

Which of the four pencils stands out? Please tell me you said the orange one. It’s clearly its own person, whereas the other three amigos have dependency issues.

Grouping or segregating items can help make the organization – i.e., what belongs together – on your page much easier for your viewers to see, be it products, news items, or team members.

Understanding

Studies have shown that proper use of white space in and around blocks of text increases reader comprehension. Compare the two blocks of text below.

When we’re dealing with seconds, in terms of people’s attention spans on the Net, it’s best to make text as easy to read as possible.

Tone

Through proper use of white space, you can create an almost zen-like experience for the user. Having few elements, nicely spaced out, can make the site visitor feel at ease, largely because they instinctively know what they should be looking at. Compare that to a page that’s cluttered with tightly spaced text and graphics that can evoke a sense of panic. There may be cases where the latter approach is appropriate. But in most cases, you’ll want your website to feel like a warm, cozy pair of slippers to your audience. Chances are they’ll be much more inclined to stay a while and see what you’ve got to say.

In conclusion, white space can be a great tool to add to your design arsenal. Use it wisely and, sometimes, even with fun. It can help to effectively get your message across. Your site visitors will be appreciative (even if they don’t know it).