I came across an article by Mark Boulton at A List Apart. He writes about the importance of micro and macro whitespace.
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.
When I was assisting my Rockwell International, Reliability Director on NASA’s Space Shuttle Operations doing Power Point presentation on budgets and projects we researched font and white space impacts. The research clearly showed that good white space and a block type fonts were the easiest to read – and people remember the presentation longer and could more clearly recall the presentation.
Dark background text are dramactic but people don’t remember very well. Having a bold titles and larger font size than the detailed text is what works better. My site are designed to provide good portion of white space and good font size so that titles can be read in flashing, clicking through a site. The mind remembers these title words and will flash back in a person memory – thus providing memory recall and return the your site.
Be nice – let people see your information that is relevant and of value!
Obviously whitespace is more effective key to represents your information in more powerful way. The above information inspires me to improve the utilization of whitespace more carefully. Can u explain me more about active and passive whitespace?