Using Whitespace For a Better Design

fantastic

I'm sure you've gotten junk mail via snail mail before. Especially the ones that are all crowded with unreadable advertisements. Maybe sometimes they were so cluttered that you actually went out of your way to not buy their product. The same applies to web design as it does in print design. Use of whitespace can mean the difference between a good-looking website, and this.

Haven Works

There are two main goals of using whitespace. The first is to lead the user's eyes to the most important section of the page. The second is to help improve readability of the content.

Remember that, since both of the goals are to help the content, you need to carefully pick out which elements of the page are the most important, and make sure that the user's eyes are lead to those sections. This should be easy for simple sites with a content section and a sidebar. If your site has multiple content sections, you will have to think about which ones are more important.

Whitespace In Page Layout

The main thing to remember when using page layout whitespace is to give important elements room to breathe. For example, a site about some software may have a download button on the front page. You would want to keep some whitespace around this button so that it doesn't blend in too much with clutter around it.

You can use the CSS properties margin and padding to apply whitespace
to the overall layout of the page. Here at FWebDe.com, I mostly use margins and paddings of at least 10px, giving page elements room to breathe. The areas with the biggest margins are the main content and the search box.

Whitespace In Typography

Whitespace is also important in typography, too. In typography, whitespace that can easily be controlled with CSS includes line spacing (or leading) and letter spacing. The letter spacing in CSS can also include kerning, and I may talk about that in another post.

Take a look at this image. It’s pretty hard to read, right?

An exmpample of poor use of whitespace

Now take a look at the same text, with whitespace applied.

The same text with good use of whitespace

To create the same style, we can use the line-height, letter-spacing and word-spacing CSS properties to change the line spacing, letter spacing and word spacing, respectively.

I usually like to set the line height for the p selector to about 1.5em, because I think that it gives the perfect spacing between lines. With letter-spacing and word-spacing, you should test out different values and see what you think looks best.

I also like to set the margin-bottom property of paragraphs to about 1em, to give some space in between each paragraph. Because each paragraph should be a separate idea, the spacing helps to separate these ideas.

Examples of Excellent Use of Whitespace

Here are a few excellent examples of whitespace in various websites.

1. Vitor Lourenco

vlourenco

2. Jonnotie

jonnotie

3. Black Estate

black

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

8 Comments

  1. September 3, 2009

    I think you're totally right about the importance of white space. It's a well known dictum in blog writing that list posts are often popular I think this is at least partly because:

    1. Lists Break up text.

    2. Spread out words are easy to read.

    3. It gives any post added emphasis.

  2. September 3, 2009

    Casey Brazeal(North and Clark): I really should write list posts more often.

  3. September 10, 2009

    Yeah, leaving white space can help us read easilier.

    • September 10, 2009

      Britney Jean Spears: Yeah. I don't like it when poor use of whitespace interferes with readability of the content.

Trackbacks/Pingbacks