Distance is information
Elements placed near each other are perceived as a group. A larger interval tells the eye that one group has ended and another has begun. This makes spacing part of the information architecture, not the polish applied afterward.
Figure 01
A spacing scale
A limited set of intervals creates rhythm while preserving meaningful differences.
Figure note +
The specific values may change by product; the proportional relationships are the reusable idea.
Source
Proteus study
Build relationships, not gaps
A label should sit closer to its field than to the next field. A heading should belong to the content it introduces. These are semantic relationships expressed spatially.
Rhythm across screens
Responsive spacing should compress selectively. Outer margins may shrink before the relationships inside a component. Preserve grouping even when the field becomes narrow.
Exercise 01
Which interval creates a separate group?
Reveal the observation +
The largest interval. Repetition establishes the smaller gap as an internal relationship, so the break becomes structural.
Chapter summary
Keep these
ideas close.
- 01Spacing expresses relationship before content is read.
- 02A limited scale creates rhythm and reduces arbitrary choices.
- 03Responsive compression must preserve grouping.
Related topics
Keep exploring
References
Books
Designing Interfaces
Jenifer Tidwell et al. · Patterns grounded in visible relationships and behavior.
The Elements of Typographic Style
Robert Bringhurst · Rhythm and interval understood through reading.
Web & practice
Material Design Layout
A broad spacing system applied across products.
Every Layout
Intrinsic web layout explained through relationships.
Field exercise
Remove every border from a form and rebuild its grouping using only space.