The 8-point grid, and when to break it

A spacing scale is the quickest way to make a layout look considered. I use multiples of 8 for almost everything, with 4 for the small gaps. Here’s how I set it up, and the few times I ignore it.

Start with a short scale

You don’t need every multiple of 8. A scale of 4, 8, 12, 16, 24, 32, 48 and 64 covers nearly every screen. Fewer options means fewer debates and more consistent work.

Inside is smaller than outside

The space inside a group should always be smaller than the space between groups. If a card has 16px of padding, the gap between cards should be 24px or more. Break this and items start to look like they belong to the wrong neighbour.

Let type set the rhythm

Line heights on a 4px grid (20, 24, 28) keep text lining up with everything else. A paragraph next to an image then ends where you expect it to.

When to break it

• Optical alignment: icons and round shapes often need a pixel or two of nudging to look centred, even when the numbers say they already are.

• Borders: a 1px border throws off an 8px rhythm. Count it as part of the padding instead of adding it on top.

• Big display type: at headline sizes, how the letters sit matters more than the grid. Trust your eyes.

Give it names

Put the scale in your design file and your code as named values, like space-2 or space-4. Once the steps have names, people stop typing 13px.