Auditing Space and Size
The padding values in Tiffinbox's partner dashboard read like a random number list: 5, 6, 7, 8, 10, 12, 13, 15, 16, 18, 20 and 24 pixels. Buttons come in five heights, and icons in seven sizes. None of it is badly wrong on its own screen. Together it makes every page feel slightly off, and every new screen a guessing game.
The rule
Pick a base unit; every gap and size is a step on its scale.
Spacing. Collect every margin, padding and gap. Then choose a base unit, usually 4 or 8 px, and build a scale of multiples. Thali uses a 4 px base:
4, 8, 12, 16, 20, 24, 32, 40, 48, 64
Each step becomes a token, such as space-4 for 16 px. Designers and engineers then choose from ten values instead of any number that comes to mind, and gaps line up across screens.
Sizing. The same thinking applies to the sizes of things:
- Controls. Button and field heights on the scale: small 32, medium 40, large 48 px.
- Icons. A few sizes, such as 16, 20 and 24 px, all from one icon set with one style. Mixing outlined and filled icons, or different stroke widths, is a common audit finding.
- Touch targets. The area a finger can hit must be big enough, even when the visible icon is small. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels, and platform guides recommend more: 44 by 44 points on Apple's platforms and 48 by 48 density-independent pixels in Material Design.
The shortcut
Snap to the nearest step. For every value in the audit, move it to the closest value on the scale. When a value sits halfway, look at the screen and pick the step that looks right, then use that step everywhere the same job occurs.
Card padding: 13 px
Nearest step is 12. Snap to
space-3, 12 px.
The trap is snapping numbers without looking. The scale is a tool for judgement, not a replacement for it: an 18 px gap could become 16 or 20, and only the screen can tell you which.
Drills
Answer fast — trust the rule.
Thali uses a 4 px base unit. Which of these values is on its spacing scale?
The audit finds a 15 px gap. Following "snap to the nearest step", what does it become?
A close button shows a 16 px icon. What must be true of its tappable area?
The audit finds outlined icons on one screen and filled icons on another. What is the fix?
Remember
- Pick a base unit; every gap and size is a step on its scale.
- Shortcut: snap each audited value to the nearest step, and look at the screen when it is a close call.
- Trap: tiny hit areas behind small icons, and snapping numbers without looking.