To put it simply, whitespace on a page is everything that isn’t the content. By content I mean text, images and other design elements.
Micro whitespace is the space between lines, characters and smaller elements on your page. Macro whitespace is between major elements, like blocks of content etc.
Micro whitespace plays the role in ensuring legibility and macro whitespace gives you the feeling of breathing room and cleanliness.
Before the popularity of CSS, most of the styling was with
font, bold and italic tags. Most sites had standard font sizes (usually 12pt) and standard whitespacing.
Once CSS became popular, almost all design elements could be styled. Spacing between characters could be easily changed, as well as line spacing. Cross-browser and cross-platform incompatibility resulted in pages looking good in some browsers and extremely pathetic in others. Reduced line-height and font-spacing resulted in cramped text. Text became illegible and even good articles became a real pain to read.
Mark’s article brings to focus how whitespace can actually make a differnce. He cites two examples; one of Erik Spiekermann‘s redesign of The Economist and the second of brand positioning while designing graphics.
He then goes on to explain the use of active and passive whitespace in a simple article with pictures and examples.
I think the article is a must read for both theme and graphic designers. I plan on implementing some of his suggestions in my designs as well as my websites.
Let me quote his closing paragraph:
Once you know how to design and manipulate the space outside, inside, and around your content, youâ€™ll be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light.