Purely visual grouping can fail after zooming or resizing text, once spacing ratios shift
Aliases: reflow · text resize · proportional spacing
What it is
Grouping by spacing never depended on any single gap's absolute value — it depends on the relative ratio between within-group spacing and between-group spacing: tighter inside, looser between, and that difference is what lets a user see where the boundary sits. Many users with low vision rely on zooming the page or increasing the system text size to read an interface. If that operation only enlarges the text while the within-group and between-group gaps are hard-coded to fixed pixel values, their relative ratio gets thrown off: once the text size goes up, the previously tight within-group spacing takes up proportionally less visual weight, and the once-wider between-group spacing no longer looks meaningfully larger by comparison. As that ratio flattens out, the grouping cue fails along with it.
Why it happens
Proximity works because the visual system judges the relative relationship of "which gap is smaller," not the absolute value of any gap on its own. If font size and spacing are set as two independent values, and font size scales up for a resize or zoom while spacing stays put, the relationship "within-group spacing is clearly smaller than between-group spacing" gets disproportionately compressed by the expanding text. In the extreme case, once the text is large enough, within-group and between-group spacing become visually almost indistinguishable, and even though the content itself is all still there, users can no longer tell who belongs with whom from spacing alone. This problem only surfaces once the text has actually been enlarged — no amount of careful spacing design at the normal size will reveal it.
Where it stops holding
If spacing is set in units relative to the font size and scales in the same proportion as the text (spacing grows proportionally as text size grows), the within-group-to-between-group relationship holds up and scaling does not break the grouping. The ratio only flattens out when spacing is set to a fixed, unchanging absolute value that does not scale along with the text. Whether a given design carries this risk depends on how the spacing is implemented, not on whether the spacing looks reasonable at its normal visual design size — a spacing scheme that looks flawless at the default size can still collapse once zoomed, if its implementation does not scale.
Applying it
- Set the spacing that conveys within-group versus between-group relationships in units relative to font size wherever possible, so it scales proportionally with text size instead of being hard-coded to a fixed value that never changes.
- Treat "does the grouping still hold once text is enlarged" as its own dedicated check, rather than assuming a spacing scheme that passed testing at the normal size will still work once zoomed.
- To verify: set the page's text size to a larger or even the largest setting the system supports, or increase browser zoom to a high level, and check whether content grouped by spacing still shows a visible within-group/between-group boundary. If the two gaps become hard to tell apart visually after enlarging, the spacing implementation needs to scale with the text rather than staying fixed.
Related
- Same group: A2.15.1 Grouping by color alone fails for users with color vision deficiency · A2.15.2 Spacing-only visual grouping does not survive a screen reader's linear read-out · A2.15.3 Low-contrast container cues can be entirely invisible to users with low vision · A2.15.4 A critical grouping relationship needs a non-visual, perceivable encoding as a fallback
- Nearby: F4.16 Dynamic type and user font size · J2.07 Low vision and screen magnification · A2.01 Proximity
- Search terms:
reflow·text resize·proportional spacing
Cards in the same group
- A2.15.1Grouping by color alone fails for users with color vision deficiency
- A2.15.2Spacing-only visual grouping does not survive a screen reader's linear read-out
- A2.15.3Low-contrast container cues can be entirely invisible to users with low vision
- A2.15.4A critical grouping relationship needs a non-visual, perceivable encoding as a fallback