Now that you know what it is and why it is so important, let me elaborate briefly on the two types of whitespace: micro and macro. Only then can we understand how it becomes such a helpful tool when it comes to improving the overall design.
What Is Micro Whitespace?
Micro whitespace can be many things. Most notably, it applies to the space between characters and lines in these so called “walls of text” Maribeth has mentioned. Letter spacing is something we don’t generally notice, unless it is handled poorly. We’ll typically only introduce letter spacing if a typeface is very tight, to the point that words become difficult to read due to letters colliding.
Line height is a much more common instance of micro whitespace. Think back to high school...your big essay is due tomorrow morning! You need five pages, but you’ve already run out of things to say with only four and a half pages filled. I’m willing to bet you went into your preferences and bumped that line height up from 1.5 to double spaced.
In addition to sneakily fulfilling the need for five pages, you’ve unintentionally improved the readability of your document. By giving your lines enough vertical space between them you can vastly improve readability and comprehension. Also, your wall of text suddenly appears less dense and intimidating, and could actually increase engagement and ultimately conversion. Congratulations!
What Is Macro Whitespace?
Macro whitespace refers to the negative spaces formed between larger elements on a page. Space around graphics, spacing between paragraphs and headings, and even padding at the top and bottom of site “layers” would be considered macro whitespace.
When a client struggles with being concise and maintains a desire for more items and content to be visible on a page, this beautiful padding is seemingly the most obvious thing to eliminate. However, as you may have surmised from reading about micro whitespace, similar unwelcome effects can manifest from condensing your elements too far.
A wise designer long ago once taught me the importance of CRAP. Stay with me. CRAP refers to an important “keys, phone, wallet” style mental checklist for ensuring your design will be well received and that content has been organized optimally.
Stay tuned for a future article on this topic, but to prove I’m not being crass, CRAP simply stands for Contrast, Repetition, Alignment, and Proximity. The proximity of items is one of the most important mental context clues as to how information is grouped and should be understood. When proximity isn’t used intelligently as a design tool, you can say goodbye to sensibility and hierarchy.
Why Does Whitespace Matter?
Legibility and Ease
Whitespace will improve your users’ ability to read and enjoy your content. When things are easier to read, people retain that information, and if that isn’t the most important thing then I don’t know what is.
Organization and Focus
The negative space between elements is key to improving the hierarchy and flow of your content. When items aren’t competing for attention, your user can focus on the task at hand.
Audience and Purpose
Because you usually aren’t pressed for real estate on the web, you can afford to spare a little space. Most people are on your site to learn something, not to marvel at how much content you were able to cram onto a single screen. Be sensible and do your audience a service.
“Breathing” Room and Aesthetics
The last and likely the most intangible argument for creating plenty of white space, is the ease and euphoria your brain feels when it isn’t struggling to make sense of cramped content. This reason cannot be undersold. An “open” and “airy” aesthetic is actually the result of so much more than you probably initially realized.
Now that you have an understanding of what, where, and when to use whitespace, take a look at your current website and content. Does your design include adequate whitespace? If not, let’s talk!
