Using White Space Effectively In Web Design

Brian — Mon, 12 Jan 2009 07:01:31 +0000

Jump To A Section:

What Is White Space?
How To Use White Space Effectively
White Space In Modern Web Design
@ Twitter
Further Reading

What Is White Space?

Put simply, white space is the space between different elements of a design – the area between text, images, paragraphs, headers, footers, links, etc. It is the space between different elements on a page, the space between letters, and the space between lines in a paragraph.

White space allows for easier scanning of a website. It reduces the amount of text visitors see all at once and makes reading much easier. It allows for the visual separation of design elements without adding any new elements such as visible lines or boxes. It is clean, looks professional when used correctly, and gives a site an uncluttered and fresh feel.

White space is sadly one of the most underrated elements of a strong web design. Just because it isn’t shiny or glossy doesn’t mean it isn’t important or essential to a website.

To start our exploration into this subject, let’s take a look at a couple of websites that are using white space effectively in their design.

1. Made By Sofa

Made By Sofa creates a strong design message by using a large image at the top of the site with content and navigation below. Sofa works with white space to separate three elements: titles, paragraphs, and tagline. Take a look at the following close-up:

Note: Shaded areas represent white space

This creates an organized and separated feel making it easier for readers and potential clients to scan their website quickly and efficiently.

2. Information Architects

Information Architects creates a clean and uncluttered feel on their website by using white space to separate their logo, text, paragraphs, and headings. The following image is a close-up of the Information Architects website.

Note: Shaded areas represent white space

How To Use White Space Effectively

Using white space effectively can be tricky business. Here are a few tips to get you started:

1. Line Spacing

The white space between lines in a paragraph makes all the difference when it comes to readability and scannability on a web page. If the lines are pushed too close together, it becomes nearly impossible to scan. If the lines are spread too far apart, your words will begin to float apart and feel disconnected from one another.

Line Spacing Is Too Close

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.

Line Spacing Is Too Wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien. Vivamus sit amet velit ut lorem luctus facilisis. Suspendisse potenti. Vestibulum augue turpis, ultricies quis, scelerisque id, pellentesque ac, ligula. Integer ullamcorper. Pellentesque facilisis. Nunc iaculis mi sodales elit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In blandit rutrum felis. Etiam malesuada.

You want your line spacing to be just in the middle of the above two examples – not too much, not too little. For information on controlling your line spacing with CSS, read this article on the CSS line height property.

2. Margins

A margin is the space around a particular element in a design. CSS Margins are a great way to control this space to your advantage. When working with margins, there are a few things to remember:

1. Consistency
Keep your margins consistent throughout your layout. The more consistent the spacing, the more organized and a professional your site will look. When thinking of margins, think in both vertical and horizontal separation, as both have an effect on the overall design.

2. Not Too Much
Don’t make your margins too large. Too much separation can make a website feel disconnected, as seen in our line spacing example above. Also keep in mind that there are only a certain amount of pixels that can fit on a screen, so don’t waste too much screen real estate on margins (unless of course the context of the site calls for such margins).

3. Not Too Little
Remember, we’re learning about white space here, so be sure that there is some! It looks shoddy to have text pressed up against a picture, sidebar, header, navigation bar, or any other element of a design. Keep these spaced out to give your readers room to breathe.

3. Minimalist Does Not Equal White Space

One of the problems in the modern design world is that too many people equate white space with minimalistic. That is just plain wrong. A site can be packed with content, but be very easy to scan and read with a clever use of white space.

Take Smashing Magazine for example. This is a website literally overflowing with content, yet they have managed to make their site easy to scan and read. They were able to achieve this through a careful selection of colors, text sizes, and the use of white space.

Upon closer examination:

Notice how there is visual separation between text and images, between navigation elements, and between the content and the sidebar? This is the effective use of white space.

4. Headings

Headings are a great way for you to separate your content into manageable chunks. By reading this article, you are seeing four different types of headings in use: H1, H2, H3, and H4. These headings are the large, bold, underlined “section headers” that you have been seeing throughout this post.

What you need to look at is the white space above and below these headings, and how they influence the scannability of this post. For example, my H2 tags (the second largest headers) have a 5 pixel separation between the text and the underline. They also have a 15 pixel margin above and below the text. This creates white space to help organize and section the content.

By creating this white space, it becomes much easier for readers to scan through the post and identify which bullet or which heading they would like to learn more about, rather than digging through twenty paragraphs of solid text.

If you’re interested in the CSS used to create my H2 tag, simply copy and paste this code into your style.css file:

h2 { font-size: 28px; padding-bottom: 5px; border-bottom: 3px solid #2a2a2a; letter-spacing: -1px; color: #2A2A2A; margin-top: 15px; margin-bottom: 15px; }

5. Images

The separation between images and text can make or break a design. If the words are too close to the picture, the content will become very cluttered and hard to read. If the words are too far from the picture, the post becomes disconnected and loses its flow.

On Web Design Tuts, I use a special class of images to help organize my posts and make them as visually attractive as possible. Whenever I write a post, much like this one, I use the following code for an image:

To style this image class in CSS, I did the following:

.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}

Notice how I have kept my margins a consistent 15 pixels in both my images and headers?

White Space In Modern Web Design

You now should be aware of why white space is needed: to clean up a site, make it easier on readers, and to appear more professional. You should also have a couple ideas of how to effectively use white space using consistent margins, text separation, and the visual separation of images and headers. However, you may still be wondering what a “good” use of white space really is.

Here are some examples of websites that effectively use white space to help communicate their message to their visitors.

1. Surfstation

Observe how the use of white space has effectively separated the content from the sidebar on Surfstation’s website. It is this separation that helps visitors scan the website, picking out information that is relevant to their own needs.

2. Jason Santa Maria

Jason’s website uses a wise combination of lines and white space to help present his content in a clean and elegant manner.

3. Digital Mash

Digital Mash, the website of Australian designer Rob Morris, utilizes a very simple design with a navigation, main image, and four content areas at the bottom of the page. Notice how the margins are consistent and the copy is very readable through the spacing of text and the use of headings and icons.

4. Odd Web Things

As a type-based website, Odd Web Things uses white space to separate their logo from their sidebar, their sidebar from their portfolio, and their portfolio from their blog.

5. Vitor Lourenco

Vitor’s site uses an all-white background with some typography here and there. A bold navigation, strong links, and simple color scheme make this website work.

@Twitter On White Space

When writing this post, I consulted a couple of my Twitter followers to get their opinions on the use of white space. I posed the question, “Why do you think white space is important in web design?” Here is what they said:

@Brendan – Whites space! I think it is critical in getting focus = conversion and it exudes confidence & professionalism when done well.

@Brandon – So that information and design elements can relate to each other properly, rather than blending in to a big mess of graphics.

@sthursby – When all you have is a couple seconds to entice a visitor into your site, you want the important info easily findable.

@Hyermish – White space gives the illusion of simplicity; sometimes helps to reduce clutter.

@Drew Douglass – My main reason would be to draw focus to a certain element on the page, and to leads eyes through the content.

Web Design Tuts » white space