visual design
Whitespace
Whitespace (or negative space) is the empty area between and around elements. It is not wasted room: it groups what belongs together, guides the eye, and makes a layout legible.
The demo
Adjust the spacing of the card below using the controls to see how readability, line-height, and margins change.
The Power of Breathing Room
When text is crammed together, the brain struggles to distinguish words and groups. Legibility drops because elements compete for your attention. Providing margin and padding makes reading effortless.
What this demo shows (text version)
An interactive card with adjustable layout spacing. Toggling 'Cramped' sets padding, margins, line-height, and element gaps to zero, collapsing all visual structure. Toggling 'Breathing' sets them to a balanced layout.
A fine-tune slider allows resizing the spacing smoothly from 0px to 48px. Additionally, checking the checkbox applies the cramped styling to the parent entry page, demonstrating that spacing makes the entire page readable.
Same words, same card - but the moment you gave it room to breathe it got easier to read. Whitespace isn't empty; it is the thing doing the grouping.
Cramming never saves space, it just bills the reader for the room you kept. A dense screen feels efficient to the person who built it and exhausting to the person using it.
My rule: space is a grouping tool before it is a decorative one. Things set close together read as related, things set apart read as separate - so before you reach for a box or a divider, try moving things nearer or further apart first.