Start with a type scale
A type scale is a small set of font sizes that relate to each other by a fixed ratio. Instead of choosing sizes at random, every heading and paragraph comes from the same ladder.
The most common ratio is 1.25 (a "major third"). Start from a base of 16px and multiply:
12.8px (small / captions)
16px (body)
20px (h3)
25px (h2)
31px (h1)
39px (display)Because every step is a consistent multiple, the type feels harmonious even before you touch any other spacing.
A spacing system in 4 steps
Spacing is where most layouts fall apart — a 12px gap here, a 17px margin there, and nothing lines up. A spacing system fixes that with a finite set of allowed values:
- Pick a base unit (4px is a good default).
- Define the scale:
4, 8, 12, 16, 24, 32, 48, 64. - Use only those values for every margin, padding, and gap.
- Name them as tokens:
--space-2,--space-4, and so on.
The 8-point grid
A popular shortcut is the 8-point grid: every spacing value is a multiple of 8. It's coarse enough to be simple, fine enough to look deliberate. Buttons, cards, and sections all snap to the same invisible grid, and the layout suddenly looks intentional.
Putting it together
Type and spacing work as a pair. The type scale gives you the hierarchy; the spacing system gives you the rhythm. When both come from fixed ratios and named tokens, a screen starts to feel designed rather than assembled.
Start small: pick a base size, a ratio, and a base spacing unit. Enforce them for one screen. You'll feel the difference immediately — and your team will thank you the next time a layout just needs to "look right".
