There is a steel ruler sitting next to my trackpad right now. It has been there for about four years, ever since a project for a furniture retailer called Hendricks & Loop forced me to look at real-world proportions instead of guessing at them. I use it more than I use most of my Figma plugins.
The Object on My Desk
The ruler measures a ceramic mug I bought at a shop in Porto. The handle sits 34mm from the rim. The base is 72mm across. None of this seems relevant to interface design until you realize how often we invent spacing values out of thin air, call them 16px or 24px, and never check them against anything tangible.
A Cup, Not a Grid
Most spacing systems come from habit. Someone used an 8px grid in 2016, it worked, and it got copied into every project since. I am not against grids. I am against grids nobody can explain. When a client asks why a card has 20px of internal padding instead of 16px, I want an answer better than "it felt right."
Where the Habit Started
The habit started with a mistake, not a system. I was designing a product page for a radiator manufacturer in Leeds, a company called Calder Rad, and I set the hero image margin by eye. It looked fine on my 16 inch laptop. It looked cramped on the client’s 27 inch monitor, and oddly empty on the warehouse tablet their sales team used on the showroom floor.
The Radiator Grille Incident
Their product manager, a woman named Priya Chandrasekaran, sent me a photo of an actual radiator grille next to her screen. The gaps between the slats were consistent, precise, and nothing like the spacing in my mockup. She wasn’t being difficult. She was showing me that the object itself had a rhythm I had ignored.
I went back and measured six radiator models. The slat gaps ranged from 11mm to 14mm, scaled consistently with the unit size. I rebuilt the spacing system around that logic, translated through a rough 1mm equals 3px conversion, and the layout suddenly felt like it belonged to the product instead of floating above it.
Translating Millimeters into Pixels
This is not a universal formula. A radiator grille has nothing to do with a checkout form. But the underlying move does transfer: find a physical reference with real constraints, and let your digital spacing argue with it instead of with your own memory of what looked good last time.
The 4px Problem
Most design systems default to multiples of 4 or 8. That’s a fine starting point, but it quietly discourages anything in between. I’ve started keeping a small list of measurements I return to, pulled from objects rather than conventions:
- 18mm, the width of a standard light switch, useful for touch target reasoning
- 42mm, the diameter of a teacup saucer, close to a comfortable thumb-reach icon size
- 6mm, the gap between keys on a mechanical keyboard, a decent minimum for tap target separation
- 210mm, the width of an A4 sheet, still the most intuitive reading-width reference I have
None of these are rules. They’re anchors. When I’m stuck between 16px and 20px for a padding value, I ask what’s actually being represented and whether a real object gives me a better number than my gut does.
What Changed in the Work
The clearest example came later, on the Hendricks & Loop project. We were redesigning their checkout flow, and the spacing between line items kept feeling either too tight or oddly loose depending on cart size. I measured the gap between items on a physical receipt from their flagship store in Bristol. It was 9mm between the item name and the price, consistent across every receipt I checked.
The Checkout Flow for Hendricks & Loop
We used that relationship, not the exact number, as a reference for the visual weight between a product name and its price in the cart summary. It gave the layout a kind of familiarity that none of our earlier versions had, even though most users would never consciously notice why.
Good spacing doesn’t announce itself. It just stops you from questioning the layout at all.
Priya never knew her radiator photo started a habit that outlived the project by years. I still don’t bring it up on calls, because it sounds like a strange thing to admit: that a ruler bought for $11 at a hardware shop has done more for my spacing decisions than most of the design theory I read in my twenties.
A Small Practice, Repeated
I’m not suggesting every designer needs a drawer of measured objects. But I’d argue most of us could use fewer inherited assumptions and a few more real ones. The ruler isn’t a gimmick on my desk. It’s a reminder that the numbers in a design file are supposed to describe something, not just repeat themselves.
