Negative Space

The empty part does the organizing.

Negative space is the empty area around and between elements. It isn’t leftover room: it groups and separates content, signals what matters, and gives the eye a place to rest, without a single line or box.

Origin

Artists have long treated the space around a subject as part of the composition, and the Japanese idea of ma (間), the meaningful interval, shapes garden design and architecture. In a two-tone image, reversing the tones turns the space around a subject into shapes of its own, a figure-ground reversal that the Danish psychologist Edgar Rubin made famous in 1915 with his vase that is also two faces.

Graphic design calls it white space, after centuries of black ink on white paper. The space around and between elements is what separates groups, signals hierarchy, and makes a layout feel calm. Some logos, such as FedEx’s hidden arrow, make the negative space the subject itself.

The Principle

Negative space is the empty area around and between elements. It is an active part of the design: it groups related things, separates unrelated ones, draws attention to what it surrounds, and makes a layout feel calm instead of crowded.

Origin
Art and design practice · ma (間) in Japanese aesthetics
Also called
White space
In practice
Give what matters the most room
When to Use
How to Use
Grouping 01 / 10

Space Groups, Lines Divide

By the Gestalt principle of proximity, things that sit close together read as a group. Put more space between groups than within them and a page organizes itself, with no borders needed.

Best for
Forms, lists, and settings
Use when
Content falls into groups
Avoid when
Groups must be compared cell by cell
RelatedGestalt PrinciplesChartjunk
Emphasis 02 / 10

Room Signals Importance

An element with space around it draws the eye. A lone button with generous margins outranks the same button crowded among links, so give the primary action the most room.

Best for
Calls to action and headlines
Use when
One element should lead
Avoid when
Several actions matter equally
RelatedVon Restorff Effect
Reading 03 / 10

Margins Help Reading

Generous margins and paragraph spacing frame text and make long reading easier. Book designers have balanced the text block against its margins for centuries.

Best for
Articles and documentation
Use when
Text is the main content
Avoid when
Dense reference tables
Figure and ground 04 / 10

The Space Becomes the Shape

In Rubin’s vase the white space reads as a vase and the dark space as two faces, and you can only see one at a time. Logos that hide a second image in their negative space reward a second look.

Best for
Logos, icons, and illustration
Use when
A second reading adds meaning
Avoid when
The double image would confuse
Density 05 / 10

Calm or Dense

Not every screen should be airy. Dashboards and expert tools need density, while marketing and onboarding benefit from room. Match the amount of space to how much attention each item deserves.

Best for
Choosing a density for a product
Use when
Users read more than they scan
Avoid when
Experts need many items in view
Systems 06 / 10

Use a Spacing Scale

Space looks intentional when it repeats. A scale such as 4, 8, 16, 24, and 32 makes the same relationships look the same everywhere, which is what lets space carry meaning.

Best for
Design systems and components
Use when
Many people build screens
Avoid when
A one-off editorial layout
RelatedGrid and Hierarchy
Typography 07 / 10

Space Inside the Type

Letter spacing, word spacing, and line spacing are negative space at a small scale. Too tight and words blur together; too loose and they fall apart. Adjust spacing with the size: large display type usually needs tighter tracking than body text.

Best for
Type settings and brand fonts
Use when
Setting tracking and leading
Avoid when
Tight display type is the look you want
Mobile 08 / 10

Small Screens Need Space Too

On phones it is tempting to cut spacing to fit more in. Space between touch targets prevents mis-taps, and space between sections keeps a long scroll readable.

Best for
Mobile layouts and touch targets
Use when
Targets sit close together
Avoid when
Content is read-only and short
RelatedFitts’s Law
✦

Negative Space in the Age of AI

Generative tools fill whatever space they’re given. Editing for emptiness is now as important as editing for content.

✦ AI Era 09 / 10

Generated Layouts Fill Every Gap

AI layout and slide tools tend to fill the available space with more text, images, and decoration. Edit for space as much as for content, and remove what doesn’t earn its place.

Shift
Filled → edited
Use when
Generating slides, pages, or screens
Watch for
Accepting every element the tool adds
✦ AI Era 10 / 10

Chat Answers Need Air

Long AI answers set as one dense block are hard to scan. Space between paragraphs, sections, and messages helps people find the part they need.

Shift
Dense block → spaced sections
Use when
Displaying long AI answers
Watch for
Removing spacing to fit more
Further Reading

Wikipedia