Essay · Craft · 6 min read
8px or 12px: a two-year argument with myself
On choosing spacing like it matters, because it does, just not as much as I pretended it did.
01The argument
For two years I’ve had the same argument with myself, usually at 11pm, usually about a button. Eight pixels of padding feels tight and confident. Twelve feels calm and slightly expensive. Neither one is wrong, which is exactly the problem.
Spacing rarely makes it into case studies. Nobody writes a retro about the gap between a label and its input. But it’s the thing people feel first and notice last: the difference between a screen that looks organised and one that just has everything on it.
02What the numbers actually do
Here’s what I eventually admitted: 8 and 12 aren’t competing answers. They do different jobs. Eight groups things. Twelve separates them. The trouble starts when you use one number for both jobs and then wonder why the layout feels mushy.
padding: 8px 12pxreads as a labelpadding: 12px 22pxreads as an actionOnce I stopped asking “which number looks nicer?” and started asking “should these two things feel related?”, most of the arguments ended on their own.
“If two things belong together, the gap between them should be smaller than the gap around them. That’s the whole system.”
03The rule I ended up with
I now start every project with a short scale and one rule: inside a component, use the smaller step; between components, use the bigger one. It isn’t clever. It just removes a decision I was making two hundred times a day.
| Token | Value | Scale | Used for |
|---|---|---|---|
| space-1 | 4px | icon ↔ label | |
| space-2 | 8px | inside a group | |
| space-3 | 12px | between groups | |
| space-4 | 16px | card padding | |
| space-6 | 24px | between cards | |
| space-10 | 40px | between sections |
The short version
Small gaps group. Big gaps separate.
Pick a scale with obvious jumps, then use it to say what belongs together. If you can’t explain a gap out loud, it’s probably the wrong one.
04Where I’m still wrong
Dense tools break the rule constantly. A finance dashboard with twelve columns doesn’t have room for good intentions, so 8 does both jobs and you lean on dividers and type weight instead. That’s fine. Rules are for the defaults, not for the exceptions you’ve actually thought about.
And yes, some nights I still open a file and nudge a button from 12 to 10 “just to see”. I’ve made peace with it. Some arguments are worth having forever.
Think I’m wrong? Good.
Make the case for 10px. I’ll read it, probably agree with half of it, and update this note with credit.
mistrymeet6338@gmail.comWritten by
Meet Mistry
UI/UX Designer in Surat, India. I design web apps, SaaS and complex products, and write about the craft in between.
More about me