The 8-point spacing system, explained plainly

If you have read anything about interface design, you have probably come across the phrase "8-point grid" or "8-point spacing system". It can sound more technical than it is. At heart it is one simple rule: make your spacing and sizing out of multiples of eight.

That is it. Margins of 16, 24, 32 or 48 pixels. Padding of 8 or 16. Buttons 40 or 48 pixels tall. The rule is plain, but the effect on a website's consistency can be substantial, and it removes a surprising number of small decisions from everyday design work.

Why have a spacing system at all

Without a system, spacing is chosen by eye, element by element. One designer gives a card 18 pixels of padding, another gives the next card 20, a third uses 15 because it "looked better". Over time a site collects dozens of slightly different gaps. None of them is wrong on its own, but together they create a faint visual unevenness, as if things were not quite lined up.

A spacing system replaces "what looks about right?" with "which of these few options fits?" That is faster, more consistent, and much easier to hand over to someone else.

Why eight in particular

There is nothing magical about the number eight, but it has several practical advantages.

• It divides cleanly. Eight halves to four, then to two. That gives you small values for fine adjustments without leaving the system.
• It scales well across screens. Many devices display content at pixel densities that are whole multiples of the base (one, two or three times). Multiples of eight stay whole numbers at all of these, which helps edges render crisply.
• The steps feel distinct. The difference between 16 and 24 pixels is easy to see. The difference between 16 and 18 often is not, which is why near-identical values cause trouble.
• It is widely used. Many popular design tools and interface toolkits use eight, or four, as their base unit, so the habit transfers easily.

Some teams prefer a 4-point system for finer control, especially for dense interfaces. In practice the two coexist happily: you use multiples of eight for most things and allow four for small adjustments, such as the gap between an icon and its label.

The basic set of values

You do not need every multiple of eight. A typical set looks something like this:

• 4 for tiny gaps, such as between an icon and text.
• 8 for tight spacing within small components.
• 16 for standard padding and the gap between related items.
• 24 for space between groups within a section.
• 32 for larger internal spacing and smaller section gaps.
• 48 for space between major blocks.
• 64 and 96 for space between page sections on larger screens.

Notice that the steps grow further apart as they get bigger. Small spaces need fine control; large spaces only need a few clear options. Nobody can tell the difference between a 72 and an 80 pixel section gap, so there is no point offering both.

Give these values names in your stylesheet or design tool, such as space-1 through space-8, or xs, sm, md, lg and so on. Named values are much harder to misuse than raw numbers.

Applying it: a worked example

Imagine building a pricing card for a dog-grooming business offering three packages.

• The card has 24 pixels of padding on all sides.
• Inside, the package name sits at the top. Below it, with 8 pixels of space, is the price.
• There is 24 pixels of space before the list of what is included.
• Each item in the list is separated by 8 pixels.
• There is 32 pixels of space before the booking button, separating the information from the action.
• The button itself is 48 pixels tall with 16 pixels of horizontal padding.
• The three cards sit side by side with 24 pixels between them on desktop, and stack with 16 pixels between them on a phone.
• The whole pricing section has 96 pixels above and below it on desktop, reduced to 64 on mobile.

Every number comes from the same small set. The result looks organised, and anyone making a fourth card later knows exactly what to use.

What about text?

Text is the awkward part, because font sizes and line heights do not always land on multiples of eight. A 17 pixel body font with a 1.5 line height gives lines of 25.5 pixels, which does not fit neatly.

There are two sensible approaches:

1. Be strict. Adjust line heights so each text style lands on a multiple of four or eight. A 16 pixel font with a 24 pixel line height, or an 18 pixel font with a 28 pixel line height, works well and keeps everything on the grid.
2. Be relaxed. Let text follow its own comfortable line height, and apply the 8-point system only to the spacing around text blocks and to component sizes.

For most small business websites, the relaxed approach is perfectly fine. The visible benefit comes from consistent gaps between elements, not from every baseline aligning to an invisible grid.

Sizing components with the same rule

The system is not only for gaps. Applying it to the size of elements makes everything fit together more easily.

• Buttons and form inputs at 40 or 48 pixels tall.
• Icons at 16, 24 or 32 pixels.
• Avatars and thumbnails at 32, 48, 64 or 96 pixels.
• Border radius at 4 or 8 pixels.

When a 48 pixel input sits next to a 48 pixel button, they line up without any fiddling. When everything shares the same unit, alignment tends to happen on its own.

Common mistakes

• Treating it as a straitjacket. If a 4 pixel nudge makes a label look properly centred, use it. The system serves the design, not the other way round.
• Offering too many values. A set of twenty spacing options defeats the purpose. Keep it to around six to nine.
• Mixing in borders carelessly. A 1 pixel border adds to an element's size. Either account for it, or draw borders inside the element so the outer size stays on the grid.
• Forgetting mobile. Large section gaps that look calm on desktop can waste space on a phone. Step down one or two values on small screens.

Getting started today

• Write down your spacing set: 4, 8, 16, 24, 32, 48, 64, 96.
• Give each value a name and store it as a variable or style.
• Audit one page: list every spacing value used, and round each to the nearest value in your set.
• Set button and input heights to 40 or 48 pixels.
• Define smaller section gaps for mobile.
• Use 4 for fine adjustments, and allow yourself an exception when your eye insists.

A spacing system is one of those quiet foundations that visitors never see directly. What they notice is that everything feels steady and considered, and that is worth eight pixels of discipline.