Principle 03 · Proximity & spacing
Proximity & spacing
Proximity and spacing help people see which elements belong together. Smaller gaps connect related content, while larger gaps separate distinct groups and make a layout easier to understand.
Distance makes relationships visible before the words are read.
See the principle
Unclear grouping. Clear grouping.
Make better design decisions.
One practical visual design lesson, delivered every other Tuesday.
No spam. Unsubscribe any time.
Make better design decisions.
One practical visual design lesson, delivered every other Tuesday.
No spam. Unsubscribe any time.
Nothing else changed. Smaller gaps connect related elements, while larger gaps separate distinct groups.
Practice
Now group the related content.
Adjust the space between each pair so the relationships in the newsletter signup are easy to understand.
Interactive exercise
Make the relationships clear.
Select a spacing handle, then move the related elements closer together or farther apart.
Complete
Clear grouping ✓
Proximity makes relationships visible. Related elements stay close, while larger gaps signal the beginning of a new group.
Compare
The principle
Why proximity works
Smaller distances imply stronger relationships. Larger distances separate groups and tell someone that a new piece of information is beginning.
Spacing communicates structure before a person reads the words, helping a page feel organized and easier to understand.
Continue learning
Next principle · 04
Contrast
Use meaningful differences to improve emphasis and legibility.
View all principles