The Design Secret Behind Perfectly Balanced Whitespace

Make information easier to read and scan

The most challenging design element to work with is whitespace. Whitespace is the invisible element that permeates every screen between the cracks and crevices of each component.

There’s no standard on what the perfect amount of whitespace is. Designers must use their intuitive feeling to space elements, which is quite challenging. As a result, many designs either have too little or too much whitespace.

When you have too little whitespace, you make information harder to read. Elements cramp and crowd together, making them hard to distinguish individually.

On the other hand, too much whitespace makes information harder to scan. Elements look distant and separated, making their relationship hard to distinguish.

The perfect balance of whitespace makes information easy to read and scan. Individual elements are easy to discern, and their relationships are also apparent.

The secret to finding the perfect balance of whitespace is to use a spacing system in multiples of six pixels. Multiples of six allow you to divide whitespace into halves and thirds to get a whole number. As a result, your elements will look more symmetrical and harmonious with each other.

The other secret is to apply less spacing around elements with a relationship and more spacing around unrelated ones. In other words, the more related two elements are to each other, the closer they should be. The less related they are, the further away they should be from each other.

For example, this card component with balanced whitespace uses a 6-pixel and 18-pixel spacing. Eighteen pixels is three times six, giving proportional spacing all around.

Since the “Current bid” and “Remaining time” text labels are related to the numeric data, they share a 6-pixel spacing. However, these text labels don’t directly relate to the title or buttons. As a result, there’s an 18-pixel spacing that separates them.