Using Whitespace For a Better Design
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.
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
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?
Now take a look at the same text, with whitespace applied.
To create the same style, we can use the
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
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.