Text Link

Basics

A collection of insightful tips and guides to help you become a great designer.

<path d="M6.6729 18.3516C8.50093 18.3516 9.79065 18.989 10.3738 19.3626C10.5757 19.4725 11.0804 19.7802 11.215 19.8352V2.38462C10.4075 1.04396 8.23178 0 6.03364 0C3.06168 0 0.672897 1.62637 0 2.9011V18.5714C0.011215 19.5824 0.594392 20 1.30093 20C1.81682 20 2.13084 19.8352 2.48972 19.5714C3.16262 19.044 4.71028 18.3516 6.6729 18.3516ZM17.3495 18.3516C19.3009 18.3516 20.8486 19.044 21.5215 19.5714C21.8692 19.8242 22.1944 20 22.6991 20C23.4056 20 24 19.5824 24 18.5824V2.9011C23.3383 1.62637 20.9607 0 17.9888 0C15.7794 0 13.615 1.04396 12.7963 2.38462V19.8462C12.9308 19.8022 13.4355 19.4835 13.6486 19.3626C14.2206 18.989 15.5103 18.3516 17.3495 18.3516Z" fill="currentColor"/>
What's the Whitespace?

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!

Vector image with purple background and painting utensils and white paint.
Image source: elementor.com

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 Micro Whitespace is the space between smaller layout elements, such as the space between letters, the space between paragraphs, the space between lines (kerning), and line-height (leading).

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.

Purple background with orange-yellow-pink thorus knot on a violet rectangle.

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.

Bold letters in purple and orange.
Image source: vaccodadesign.com

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.

Panda with letters beneath.
Image source: Inspirationfeed.com

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”.

Side view of a Mac Book Air Laptop over letters on a white background.
Image source: impactplus.com

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.

Red apple on a white background with a text body.
Image source: Pinterest.co.uk

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.

Text body with parts of an oil painting depicting an old wise man.
Image source: barnyardmarketing.com

Now take a look at the organized Whitespace layout of the identical content:

Text body with parts of an oil painting depicting an old wise man.
Image source: barnyardmarketing.com

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.

Conclusion

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!

Download
Download the PDF version here.
https://www.toptal.com/developers/javascript-minifier/