Proximity is a Gestalt grouping principle, and interface designers, typographers and print layout artists all lean on it for form fields, cards, menus, paragraphs and chart legends. Elements set close together read as one unit. Elements set apart read as separate.
The effect is perceptual rather than stylistic, so it isn’t limited to vision. Overvliet, Krampe and Wagemans (PLOS ONE, 2013) found grouping by distance in haptic contour detection, a task based on touch alone.
What is proximity in design?
Gap size is the whole signal. Items placed close together read as related, items set apart read as separate, and no border or label has to be involved.
Nielsen Norman Group describes proximity as strong enough to overpower similarity of color or shape, so two differently colored buttons placed side by side still read as one pair.
Textbooks call it the law of proximity, or Gestalt proximity when they’re being formal. Robin Williams teaches it in The Non-Designer’s Design Book as one of four basic rules. Contrast and repetition are two of the others, and alignment is the fourth.
White space is the material proximity works with. Leaving white space between groups widens a gap, and trimming it pulls items together.
It helps to keep a few neighbors straight. White space is the tool, not the principle, and a page full of empty space can still group nothing. Alignment is a separate cue built on shared edges. Similarity groups by shared color, shape or size instead of by distance.
Spacing adds no visual weight, which makes it the first cue to adjust before reaching for borders or fills.
How does proximity group elements?
The visual system compares gaps. When the gaps inside a cluster are smaller than the gaps around it, the cluster reads as one unit, whatever the elements look like.
What counts is the ratio of distances, not a fixed pixel value.
Where the law of proximity comes from
Gestalt psychology grew out of the work of Max Wertheimer, Kurt Koffka and Wolfgang Köhler. They began together at the Frankfurt Psychological Institute, and Berlin later became the center of what’s known as the Berlin school.
Wertheimer’s 1912 paper on phi motion is widely treated as the start of Gestalt psychology (Wagemans and colleagues, Psychological Bulletin, 2012). His 1923 paper in Psychologische Forschung (volume 4, pages 301-350) is the standard reference for the grouping factors, proximity among them.
A centennial review in Psychological Bulletin in 2012 lists proximity first among the classic grouping principles and reports that psychophysical work made them quantifiable. That matters for designers, because a rule of thumb became something measurable.
Distance and grouping strength
Oyama’s lattice experiments in 1961 found that grouping strength follows a power function of relative spatial separation, as van Lier and Wagemans reported in Acta Psychologica in 1997.
Kubovy, Holcombe and Wagemans described a pure distance law in Cognitive Psychology (1998). Kubovy and van den Berg then modeled proximity and similarity together in a single probabilistic model (Psychological Review, 2008).
For a layout, this comes down to comparing gaps with each other, not with a pixel number. A 16 px gap groups items sitting beside 64 px gaps and splits items sitting beside 4 px gaps.
Equal gaps everywhere produce no groups at all, and changing a single gap changes how its neighbors read.
How to set spacing between and within groups
Keep the gap inside a group smaller than the gap between groups, and draw both values from a single spacing scale. The scale holds the ratio steady when components or screens change.
Most design systems start from an 8-point grid. Material Design’s spacing guidelines align components to an 8dp baseline grid and allow a 4dp grid for icons, type and some elements inside components.
Apple’s Human Interface Guidelines for boxes take a related position. Show subgroups inside a box with padding and alignment, because nested borders make an interface feel busy and constrained. I’d say that’s the right instinct, since borders are usually the lazy fix.
Setting gaps with auto layout in Figma works best with one frame per group. Figma’s Help Center guide (updated June 2025) documents gap between items and padding as separate properties, so a label-and-input frame can carry a small gap while the frame holding all the fields carries a larger one.
One documented trap: a gap set to Auto spreads items to the largest possible distance. On a group meant to stay tight, the items drift apart.
A worked example for a checkout form (illustrative values on an 8 px scale, not a published standard):
| Relationship | Gap | Effect |
|---|---|---|
| Label to its own input | 8 px | Reads as one pair |
| Field to the next field | 24 px | Pairs stay distinct |
| Group to the next group | 48 px | Sections separate |
Nielsen Norman Group gives the payoff. A single form with 12 fields looks heavy, while three groups of four look simple.
The scale itself can fail. Adjacent steps need a visible jump, and if two steps look the same on screen, the scale has one step too many.
Proximity in UI, graphic, typography and data design
Proximity applies wherever a layout holds more than one element: form fields, card contents, menu items, paragraphs, chart legends. The job is the same everywhere. Make the gap between related items smaller than the gap to anything else.
Forms
A label belongs closer to its own field than to the next one. Where the label sits relative to the field is a different question, and the research disagrees about it.
Penzo (UXmatters, 2006) found that labels above the fields shortened the eye jump between label and input on a mocked-up form with four fields, and right-aligned labels ranked second.
Das, McEwan and Douglas (NordiCHI, 2008) worked with 11 users and found left-aligned labels slower to complete. The authors recommended right-aligned labels, at least for multi-column forms, which contradicted the earlier advice.
A study in the Journal of Information Science and Technology (2013) found that field length and number of columns affected completion time significantly. Label alignment did not.
A review on the Effortmark usability site points out that Penzo himself said his test setup did not resemble real conditions. Sample sizes of 4 fields and 11 users are small too.
Label alignment stays contested, and I wouldn’t bet a design on any one of those studies. The rule underneath does not change: keep each label nearer to its own field than to the next one.
Cards and navigation
Inside a card, padding stays smaller than the gap between cards. That ratio is what makes each card read as one object.
A card-based layout repeats the relationship across a grid. Image, title, price and button sit tight, and the next card starts after a wider gap.
A common slip is 24 px of inner padding and 24 px of outer gap. Nothing groups.
Menus follow the same logic. In website navigation, a category header sits closer to its own links than to the group above it, so each block reads as a unit.
Typography and print
Text has always used proximity. A paragraph break groups sentences, and a heading groups everything beneath it.
A heading needs a smaller gap to its own paragraph than to the previous section. Line spacing should be tight enough that lines read as one block. Captions go directly beside or under the image they describe, and pull quotes and sidebars need a larger gap from body text than body paragraphs have from each other.
Print follows the same rules with one difference. A printed page is fixed, so the gaps get checked once instead of at every screen width.
Data visualization
Legends, axis labels and annotations belong next to what they describe. A legend parked far from its series forces a look-up trip the reader should not have to make, and direct labels on the lines remove the trip altogether.
Dashboards apply the rule at block level. Related metrics, filters and charts form one block, with white space between unrelated blocks.
Proximity compared with similarity, common region and alignment
No single cue always wins. In lab studies, enclosure and connecting lines often beat spacing, similarity beats it under certain conditions, and the outcome depends on how strong each cue is on its own.
| Cue | Groups by | Against proximity | Typical use |
|---|---|---|---|
| Similarity | Shared color, shape or size | Overrides it under some conditions (Quinlan and Wilton, 1998) | Tags, icons, status colors |
| Common region | A shared container | Result follows the stronger cue (Montoro and Luna, 2015) | Cards, panels, table cells |
| Uniform connectedness | Lines or links joining items | Faster as object count grows (Han and Humphreys, 2003) | Timelines, steppers, org charts |
| Alignment | A shared edge or axis | Not tested in the studies cited here | Backs up any cluster |
Palmer introduced common region in 1992 (Cognitive Psychology, volume 24). Palmer and Rock followed in 1994 with uniform connectedness, which they proposed as an entry-level organizing principle that works before the classical factors, proximity included.
Han and Humphreys put that claim to the test in Science in China Series C (2003). With one or two global objects, targets defined by connectedness and by proximity were found equally fast, but connectedness pulled ahead as the object count rose.
For layouts, that means a handful of grouped items can live on spacing alone, while a dense grid leans on containers or connecting lines.
The sources don’t fully agree on the ranking. Nielsen Norman Group’s guidance puts proximity above similarity of color or shape, yet Quinlan and Wilton (Perception, 1998) found that common color and common shape can each override proximity under certain conditions.
A study first published online in April 2021 used a repetition discrimination task and found luminance similarity dominating proximity, with common region dominating connectedness.
Montoro and Luna (Spanish Journal of Psychology, 2015) explain the split for proximity and common region. When the two cues differ in strength, the stronger one sets the result, and when they are close in strength, cooperating cues combine into something stronger than either.
A wide gap beats a faint background tint. A saturated color can beat a narrow gap.
Alignment sits outside that research, which pits proximity against similarity, enclosure and connection. In layouts it works as a backup cue that gives a cluster a shared edge.
When a border should replace spacing
Spacing alone is enough when the gap between groups can be clearly larger than the gap inside them.
Once the layout gets dense, the item count climbs, or the gaps cannot grow (cards on a narrow screen, say), add a container. And keep an eye on color. Items in different groups that share a fill or hue can get pulled together across the gap by similarity.
When proximity fails
Proximity fails when the gaps stop matching the real relationships, or when a stronger cue outweighs them.
Gaps that are too tight let neighboring groups merge, which is crowding. The reverse, over-separation, pushes related items so far apart that the relationship breaks. A label can end up nearer to the wrong field, or stranded midway between two (an orphaned label). Distance can also send the wrong signal so that unrelated items look grouped, a proximity conflict. And a border, line or strong color can pull items into a group the spacing never intended.
Uniform gaps also flatten the visual hierarchy of a page. A heading stops owning its paragraph when it sits no nearer to that text than to the section above.
Fixed-position content is the case where spacing cannot be tuned at all. W3C’s target-size guidance notes that map pins must sit at their true locations even when they crowd together, so their gaps carry no grouping.
In those cases, containers and labels have to do the grouping, with color as extra help.
How to test proximity in a layout
Run the checks at more than one width, because a responsive layout compresses gaps unevenly.
- Blur a screenshot. Nielsen Norman Group teaches the squint test for judging hierarchy, and the same blur shows whether clusters hold together as blocks.
- Strip the borders and fills from a copy. Groups that survive are held by spacing alone.
- List the gaps side by side. Every between-group value should exceed the inside-group value next to it.
- Resize to 320 CSS pixels wide, the width WCAG 1.4.10 (Reflow) sets for vertically scrolling content that must work without two-dimensional scrolling. Check that the ratios from the previous step still hold.
- Apply the WCAG 1.4.12 text-spacing values: line height of 1.5 times the font size, paragraph spacing of 2 times the font size, letter spacing of 0.12 times the font size and word spacing of 0.16 times the font size. Confirm the groups still read and nothing clips.
The last step earns its place because a user override rewrites the ratios you set. W3C’s Understanding document for 1.4.12 lists cut-off text as a typical failure, and fixed-height containers are the usual cause.
Tight control groups carry a second spacing requirement. Under the web accessibility standard WCAG 2.2 (success criterion 2.5.8, Level AA), pointer targets must measure at least 24 by 24 CSS pixels, or sit far enough apart that a 24 px circle centered on each does not intersect another target (W3C).
Common Questions About Proximity in Design
Where does proximity sit among the principles of design?
Design courses list proximity as one of the basic layout principles, alongside contrast, repetition and alignment. Perception research files it under Gestalt grouping instead. The two lists overlap but differ, so the number of principles changes with the author.
Can proximity be used in logo design?
Yes. The gap between a symbol and its wordmark decides whether the two read as one lockup or as separate marks.
Tight spacing joins related parts, and a wider gap splits them.
Does proximity work outside vision?
It does. A study of grouping in touch, published in Psychological Research, found that spatial proximity dominated texture similarity when the two cues competed.
The grouping effect is not limited to what people see.
Why is proximity important in design?
Distance is the lightest grouping cue available, since it adds no border, fill or label to a layout.
The trade-off is strength: a container, a connecting line or a strong color can outweigh spacing alone.
Adjust Spacing Before Adding Borders or Color
In a cluttered layout, proximity in design is the cue to change first, because the gaps set the baseline that every border, line and fill must either support or outweigh.
Widen the gaps between groups and stop as soon as the groups read. If they still don’t, add a container where the gaps cannot grow. Color and fills come last.
The price of working spacing-first is that grouping stays tied to distance. Any later change to padding, font size or screen width can reopen the problem.
This order reflects the grouping studies and WCAG 2.2 as verified in October 2026. A WCAG revision that sets spacing requirements for groups would change it.
The next layer up is the grid system that sets the columns those gaps sit inside.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
