Every designer has a different answer to what is that makes a piece of design great. In my opinion, negative space plays a big role.
A balanced composition will provide ease to the eye, and contribute to a more pleasant experience.
There are numerous ways to create such composition, one is using the Golden Ratio and another one – which we’re exploring today – is negative space.
What’s the difference between negative and white space?
Both terms mean the same. Negative or white space is the unused space in a design, commonly perceived as the background of an element. It’s space around and inside objects.
The reason why there are two terms to refer to it is that they came from different areas.
Negative space is a photography term. It’s the opposite of positive (the space occupied by the main element on the photograph).
On the other hand, white space is used by printing professionals. Due to the default paper color, negative space was always white space.
Ultimately, regardless of calling it negative or white space, it’s importance is undeniable in design. The right amount will let the design breathe, ensuring better comprehension and communication.
Also, negative space doesn’t need to be in a particular color such as white. It can be a pattern, a solid color, a gradient or even an image.
Negative space to create optical illusions
The human brain perceives objects in relation to each other.
If we take a single black dot and put it in the middle of a white background, our attention will be drawn to that dot because the background highlights the element.
This connection between element and background, allows designers to play with the combination of positive (figure) and negative (ground).
Sometimes we perceive the figure first, and others, the background.
Negative space in web design
When it comes to web design, negative space can be divided into macro and micro space. The first one is the space around the elements, while the micro space refers to the inside and between elements.
Web and UX/UI designers have to use the space between elements wisely and cautiously, to make sure the page isn’t too crowded, and distracting.
If done right, negative space ensures, and highlights visual hierarchy, reduces user’s distraction, and guarantees enough scannability on the page.
Just like mentioned before, if a page is too full, the user will have a hard time understanding the content and determining what’s important.
Proper use of negative space in typography ensures that the text is easier to read, especially in big chunks of text.
According to the Web Content Accessibility Guides, there are some recommendations for text spacing:
- Line spacing should be at least 1.5 times the font size;
- The space after paragraphs should be at least 2 times the font size;
- Tracking should be at least 0.12 times the font size;
- Word spacing should be at least 0.16 times the font size.
However, it’s good to keep in mind that with different fonts, some of these rules can have the opposite effect and make the text harder to read.
In logo design
This is my favorite usage of negative space since it plays with the duality of seeing both the figure and the background.
It’s great for enhancing elements, for introducing new ones, and for adding more than one interpretation to the logo.
I love using it whenever I can, but it’s harder than it looks when we see the result.
While too little of negative space can make the design feel cluttered and distracting, too much of it can also feel that something is missing.
So the best result will come from the proper use of space to guarantee a balanced design and a good experience.