Space by relationship: closer means related
People read distance as meaning. Keep a label close to its field, and put more space between groups than inside them, so the structure shows before anyone reads.
Why it matters
Before anyone reads a word, they see the shapes on the screen and group them by distance. Things close together read as one unit; things far apart read as separate. This is the Gestalt principle of proximity. When every gap on a form is the same, each label sits as close to the field above it as to its own, and people have to work out which goes with which.
How to do it
- Use a few spacing steps, not one. For a form, something like:
- 4–8px between a label and its field
- 20–32px between one field and the next
- 48px or more between sections
- Make each step clearly bigger than the one before, about double. A 12px gap next to a 16px gap doesn’t read as a difference.
- Space by meaning: a help text belongs to its field, so it sits close; a button that submits the whole form sits apart from the last field.
- Squint, or blur a screenshot. If the groups still show, the spacing is doing its job.
When it bends
When items really are equal, like the photos in a grid or the rows of a table, equal spacing is right. That sameness says so.