When we're building Web pages we often focus on the stuff that shows in the design, you know, the fonts, colors, images, etc. But often the part of a design that has the most impact is the part that doesn't really show - the white space or negative space between the elements. Unfortunately, most Web designers (and many Web clients as well) think of white space as "empty space". In other words, it's space that could (and should) be filled with content to get people to read, click, and buy. But white space serves a very important purpose. White space sets the tone of your design and affects the usability dramatically.

What is White Space?

At its most basic, white space is the characters that don't print anything when you type them, for instance: tab, space, and carriage return. These are white space characters. But there is more to white space than just these characters.

White space in a design is the spaces around elements in the design to help them stand out or separate from the other elements. This includes the space on the edges of a fixed width layout and the space in the margins and padding around pictures and blocks of text (margins and padding). White space also includes the space between lines of text (leading) and letters in words (tracking and sometimes kerning).

Remember, too, that white space doesn't have to be white. If the background color of a design is black, then the white space will be black. White space is the areas of a design where there is no element placed by a designer.

How Does White Space Affect Design?

White space is used in two ways in design:

  1. LegibilityWhite space at the micro level (leading, kerning, and tracking) can help improve or destroy the legibility of a Web page. If you have a lot of content you need to get across in a small amount of space, you can increase the leading or tracking to make the text easier to read. If you look at the print version of the Wall Street Journal, the paper always has many columns of text with very little margin or padding around it. But the space between the lines and letters makes the columns readable.
  2. ToneWhite space at the macro level (spacing around the biggest objects on the page) can convey a sense of elegance or down-market quality to a design. The more white space there is the more expensive and high-quality a design may seem. If you look at the advertisements in an expensive women's magazine, you will notice that most ads have very little non-negative space. The text is small, leaving more room for background images, and there are very few elements on the page. Contrast that with a direct mail advertisement and you'll see large blocks of text covering multiple images and very little negative space.

Start Playing with White Space in Your Designs

On the next page you design instead of thinking about where to put that image or how much space you should allocate to the text, ask yourself if there's enough space in the margins and padding to convey the tone and legibility you want. Learn to manage the margins and paddings around your elements. Work with the leading and tracking on your text.

If you're feeling really ambitious, create your design in two ways: once with lots of white space to convey an elegant tone and once with very little to convey a more down-market tone. Use the exact same elements in both designs, just change the spacing between them. Feel free to show off what you've built in the Web Design forum.