What's the Whitespace?
Learn what's the meaning of the design term Whitespace and how can it be used in graphic design.
The term White Space signifies the white, empty space between design elements in layouts and page illustrations, but also the space between single readable letters and characters. In some cases, the White Space is called Negative Space. The term was derived from print design projects, where the white paper was used to print the design campaigns.
It initially might seem strange that the empty white background is considered a design element, but the strategic placement of white space can improve the composition of a campaign or design dramatically. The White Space lets the eye and brain of the viewer process and rest from the onslaught of information and visual content.
The implementation of Whitespace reduces the cognitive load of the viewer significantly. It organizes large blocks of information so that they are still easily digestible by the viewer by dramatically optimizing the legibility of the content.
The strategic implementation of white space is the ideal tool to direct the eye of the viewer, this is not a waste of space!
White space is not just an insignificant blank space, used strategically, it can become an important design element. The average attention span of the viewer is getting progressively shorter, which makes the clever use of Whitespace essential!
The Different Types of White Space:
Within the umbrella term of Whitespace, there are four defined sub-categories:
The Macro Whitespace:
Macro Whitespace is the space between the design elements such as the text body, the images, and graphic design elements. The main purpose of macro white space is to improve the layout of your website and make it easier to understand and navigate. A substantial amount of macro space surrounding a design element can magnetically force the look of the viewer to that design element.
Examples of macro white space can be found:
• In the margins of a website
• Around the logo in the icons
• In hero images
• In Separation of the main content and sidebar
• Around CTA buttons
The Micro Whitespace
The main purpose of micro white space is to improve the legibility and readability of your content. The importance of Micro Whitespace in letter spacing should not be underestimated, as the aspect of kerning and line height of the text body and of the individual letters are of great importance for the general legibility of a text. A mixture of lower and upper case letters f.ex. is much easier to read than only upper case letters, due to the variation of negative space between them.
The Active Whitespace
Active Whitespace means that the content of a website or print campaign flows well, the reader is easily directed to all the CTA (Call to action) elements and the focus of the reader is steady and well-directed.
The Passive Whitespace
Passive Whitespace is the space that is an automatic consequence of the placement of graphic elements or text. Letters and design images need a certain distance, otherwise, these elements would overlap and would render the campaign or website completely unreadable.
What's the Difference Between White Space and Negative Space?
To answer the question, there is no difference, these two terms can be used interchangeably.
The term Whitespace is derived from printed campaigns or layouts. The parts of the white paper that remained unprinted were called the Whitespace. The Whitespace space is not limited to the white coloring and can consist of every color perceivable to the human eye.
The term Negative Space comes from photography. Defined as positive space are objects that catch the attention, the negative space consists of the background elements.
How to Use White Space
The strategic use of Whitespace can change the visual focus and direction of the viewer. Plenty of whitespace around a design element, a text body, or a single letter can isolate the element visually and thus catch the immediate attention of the viewer.
The use of Whitespace can even be an essential part of the branding of a company or most luxury brands. Websites, layouts, or advertisement campaigns f.ex. that include generous Whitespace are perceived as clear, sophisticated, and luxurious.
In the next part of this Design Tip, we will show you some prime examples of the strategic use and placement of White Space in layouts, lettering, and logo design, the so-called white-space logos.
Why Whitespace Is Used in Design:
To Highlight Hidden Elements Within Logos
Whitespace is a design element that can be used in logo design too, here are a few brilliant examples:
One of the most famous uses of negative space is the logo of FedEx. The negative space between the “d” and the “E” letter is used as a strategic design element. The negative space between the letters “E” and “x” creates a right-pointing arrow.
Another brilliant design of a Whitespace logo is the one of the WWF (World Wildlife Fund). The eyes immediately form the panda in the visual perception, the Whitespace is so brilliantly implemented that you almost overlook that it’s formed with negative space.
To Drive the Attention of the User to Certain Objects
Below, you can see two examples with a truly masterful use of Whitespace.
Here, you can see a massive amount of Whitespace surrounding the product and its name, leaving the viewer with absolutely no other choice than to admire the design of the new MacBook Air. The whitespace gives the captivating hero image the center stage and replacing the horizontal lines of the letters “A” and “R”.
In this masterful design for a poster for the film Snow White and the seven dwarfs, you can see that Whitespace can be used to create another image. The emptiness suddenly forms an expressive image in the eye of the viewer.
To Make the Text More Readable
Disorganized layouts suck the joy out of every reader. Take a look at the cramped, disorganized magazine layout page below. Does this look like an enjoyable read to you? Just looking at it makes you tense, and you would rather want to throw the magazine in the trash than read the article.
Now take a look at the organized Whitespace layout of the identical content:
Aaahh, so much better, you immediately want to fish the magazine out of the trash, sit down and read the article, and that perfectly illustrates the incredible power of good Whitespace design! The visual weight and chaos have been lifted! The content becomes immediately appealing and digestible!
The Visual Hierarchy
Visual Hierarchy is a term that describes how the eye of the viewer travels. The idea of visual Hierarchy is based on the Gestalt Principles. The first Gestalt Principles were devised in the 1920s by German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler—who wanted to understand how humans generally gain meaningful perceptions from the chaotic stimuli around them.
The Visual Hierarchy is a composition technique that systematically directs the eye of the viewer.
Learn more about the aspect of visual Hierarchy in Lettering and design layout in this video with Designer Will Paterson.
Visual Hierarchy can direct the viewer by the use of whitespace, color, symmetry, movement, grouping, contrast, and many more design aspects.
Read more on our Blog about how Designers can use Visual Hierarchy strategically in Graphic Design.
The Law of Proximity
The law of proximity is one of the Gestalt Principles and states that objects that are close to each other are perceived as more related than objects that are far apart.
In this case, the systematic use of Whitespace helps to group related content elements together to ease the orientation and navigation of the content for the viewer.
This theory should be considered especially in the Whitespace implementation in UX And UI Design and information visualization. Grouping UX and UI-related elements together by using the whitespace technique eases the overall legibility and navigation. By using this technique, you help the viewer to easier connect the dots by grouping the connected dots (aka design elements) closer together.
Read more on our blog about the Gestalt Principles in general and the Law of proximity.
Whitespace is a crucial design element to direct the eye of the viewer, organize content, and for the cognitive rest of the viewer. The aspect of Whitespace improves the overall legibility of the content, sets the tone of the design and branding, and generates focus and attention.
Before we can make information digestible, we must understand the meaning and appropriate use of Whitespace. The systematic use of Whitespace can be somewhat viewed as the “art of optical spacing.”
Don’t be afraid of empty space, use it to your advantage!