Whitespace: what’s that?


Headings, text, images and buttons aren’t the only elements that form the layout. There is also another element, which is pretty different from a visual point of view, and that cannot be neglected. I’m talking about whitespace or, as it’s been called lately, negative space. These two labels are interchangeable and refer to the exact same thing. I’m going to use whitespace throughout this article.

Definition of whitespace

Mark Boulton has defined whitespace as the space between elements in a composition. It is that room between boxes, buttons, paragraphs, lines of text, words and even letters. It creates breathing room and balance, bringing harmony to your design and highly increasing readability. Although it is commonly called whitespace, it doesn’t actually have to be white.

Any colour can act as whitespace. Let’s take, for instance, the design of an online photogallery. Most of them have black backgrounds in order to make pictures stand out more. In this case, whitespace would be the black background.

Whitespace is basically, any space on the page which is not occupied by content or heavy graphical elements.

Macro and Micro whitespace

There are two different kind of whitespace: macro whitespace and micro whitespace.

Macro whitespace is the space that separates all the major elements of the layout, such as the room that might lay between the header and the main content area or the logo and the top menu.

Micro whitespace is the tiny space between headings, paragraphs, images, lists, words and letters and all the other elements. Sometime it can be so subtle that you cannot even spot it. But it is there and it makes the difference!

Both of them are very important and, in my opinion, must not be seen as two separate things. You always should relate one to the another in order to ensure the right balance between whitespace and content bits.

Why do we need to get a grasp of it?

As Andy Rutledge said in his article “Design Psychology”:

“Whitespace works to set off and lend gravity to those areas that are occupied with content. So, using whitespace appropriately helps us to keep the page concise, simple, comfortable and focused.”

Whitespace helps to balance the different elements of the page. If you learn how to handle it, it will allow you to create simple, clear, and eye-pleasing pages for your users, enhancing usability, accessibility and, therefore, users’ experience.

Read my second article on whitespace entitled “Whitespace: empty space?“.

More articles on this topic will come in the next few weeks, so stay tuned!

Posted on Sunday 07 February 2010 at 16:42

Comments are closed.

Leave a comment

Please rate this article and help us plan future posts. Comments are moderated. Do not spam for any reason. Ever!