robohash image acting as kam's profile photo

Tip 013 - Whitespace


Today's is less of a coding thing and more of a general design thing. And it goes like this: For the love of all that is holy, please provide whitespace.

Putting lots of space around and between things does a better job at segmenting content than a line or graphic will, generally. It will give the reader's eyes a rest, and even provide a more peaceful feeling, generally. And whitespace, combined with the typical reading direction of top left to bottom right, (or top right to bottom left if it's a LTR design) can help to illustrate the hierarchy of elements on the page, generally.

I say lots of "generally"s because it all depends on your design. The thing about design is that all the rules are breakable and everything is possible, provided you know what you're doing and why you're doing it.

Okay okay you talked me into it. Here's some code that can help with maintaining a consistent and rhythmic whitespace pattern. The credit for this method goes to Heydon Pickering & Andy Bell over at - an extremely useful resource in its own right.

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

You could set this rule at :root or at html, it doesn't matter all that much. You decide on a ratio and set that up front. Then every measurement of spacing is derived as a multiple of that ratio. The measurement is done in rem so it is consistent across the design, and doesn't change with the font size of the element, as em would. Then you can use these variables to define padding, margins, what have you.


Have you written a reply on another site? Put the URL here: