8-Point Grid

011 min

The problem the 8-point grid solves

Elliot Dahl was a designer at the software company Pivotal. In 2016 he was helping to join the interface systems of Pivotal's products into one system. He then found that the top-corner branding differed a little from one product to the next. Teams in different parts of the world had built each product. Every team had the same idea, but each used different numbers for heights and padding. Padding is the space between the edge of an element and what is inside it. Margin is the space between an element and its neighbours.

Nobody was wrong, and that was the difficulty. No written rule said which height was correct, so no team had a reason to change theirs. Dahl saw the same pattern in his own work. A button can look fine on its own and still make a page look untidy when every size around it was picked by eye. A team of ten people will pick ten slightly different numbers.

022 min

How the 8-point grid works

Dahl's answer was a rule about sizes instead of looks. Dahl's rule was short: every height, width, margin and padding on the page is a whole multiple of 8. That gives a short list of allowed sizes: 8, 16, 24, 32, 40, 48, 56 and so on.

The unit is the point. A point is a layout unit that the screen turns into real pixels. On an ordinary screen one point is one pixel. On a sharper screen one point may be two or three pixels wide, and the artwork is scaled to match.

Here is a worked example, and its numbers are made up. A button holds one line of text that is 24 points tall. The designer gives it 16 points of padding above and below, so the button is 56 points tall, which is 7 times 8. Under it, the designer puts help text 8 points away. The next group of controls starts 24 points after that. Every number came from the same list, so nobody had to measure anything.

Hard grid and soft grid

There are two ways to apply the rule. In the hard grid method, the design tool shows a grid of 8-point squares and each element is placed onto it. In the soft grid method, no grid is drawn. Only the gaps and sizes are multiples of 8. The Spec guide to the 8-point grid describes both methods. The soft method follows how code works, because a web page or an app is built from boxes with margins and padding, not from a page-wide grid of squares.

032 min

Why the unit is 8 and not 6 or 10

A rule about sizes only helps if the unit fits the screens it has to serve. Dahl gave two reasons for 8. A screen that scales sizes by 1.5 cannot draw an odd size cleanly. And many popular screen sizes, he argued, divide by 8. He also said 8 gives enough choices without the extra variables of a 6-point system or the limits of a 10-point system. The first reason is arithmetic, so it can be checked.

042 min

Where the 8-point grid came from

The sources do not name one inventor. The grid appeared first in platform guidelines and was explained to designers afterwards. Material Design is Google's design system for Android and web apps, and its first version is now archived as no longer maintained. Google's Material Design 1 guidelines placed every component on a baseline grid of 8dp squares, and toolbar icons on a grid of 4dp squares. A dp is the density-independent pixel from the last section.

Dahl came to the idea later. He took an interest in it after hearing the designer Bryn Jackson talk about it, and he wrote up what an 8pt system could give his designs at Pivotal. His article names Jackson's own post as the most complete guide.

Before the 8-point grid: an 18-pixel baseline grid

The idea of one repeating vertical unit is older than 8. In April 2007 Wilson Miner described a baseline grid for text on the web in A List Apart. A baseline is the line the letters of a text line sit on, and his method puts every baseline on evenly spaced horizontal lines down the page. In his example, text of 12 pixels sat on an 18-pixel line height. That line height became the unit for his margins too. His unit came from the text. In the 8-point grid it comes from the screen, which is why text needs its own treatment.

051 min

How the 8-point grid handles text

Space is easy to place on a grid. Text is harder, because font sizes and line heights come from the typeface and the platform. The Spec guide pairs its 8pt layout grid with a 4pt baseline grid for lines of text. The 4 gives text finer steps than the layout has.

In practice the font size can be whatever the typeface needs, such as 14 points. The line height is a multiple of 4 or 8, such as 20, so every line takes a whole number of steps. In this made-up example, five lines of 14-point text on a 20-point line height make a block 100 points tall, which is again a multiple of 4. The gap before the next heading can then be 24. A typography scale picks the font sizes. The baseline grid picks the line heights that carry them.

062 min

The 8-point grid in real design systems

The rule is easiest to judge in systems that real teams use. Three public ones show it applied, and show where it bends.

Material Design 1: a button smaller than its touch target

Material Design 1 applies the grid and then departs from it in one place. Material 1 gives a button a height of 36dp inside a touch target that is 48dp high. A touch target is the area that responds to a tap. The visible button is smaller than the area around it that accepts the tap. The target, at 48, is 6 times 8 and is on the grid. The button, at 36, is not a multiple of 8, but it is a multiple of 4. So the rule held for the thing people tap and gave way for the thing they see.

The same guidelines allow a second unit for large layouts. For large layouts, Material 1 also allows another unit: any standard element's height, like a 56dp action bar, can be one increment. Since 56 is 7 times 8, even that unit stays on the grid.

Atlassian: a base unit with smaller steps

Atlassian's design system also starts from 8. Atlassian's space tokens are fractions and multiples of an 8px base unit, so 2px, 4px, 6px and 12px sit on the scale beside 8px. Each space token is named for its share of the base unit: space.100 is one unit, 8px, and space.200 is two units, 16px. Teams write the token name in their designs and in code instead of a raw number, which is the job of design tokens. A change to a value is then made in one place.

The scale also lists each size in rem, a CSS unit equal to the root font size of the page. Atlassian shows space.100 as 0.5rem, which is 8px when the root size is 16px. So the base unit is 8, but the scale is not limited to whole multiples of it.

IBM Carbon: one unit for the whole layout

IBM's Carbon design system uses 8 for more than gaps. Carbon's 2x Grid is built on an 8-pixel square called the mini unit, and columns, rows and boxes are multiples of it. Padding and margin follow the same unit. The idea there covers the layout as a whole and not just the space between parts.

072 min

When a screen does not divide by 8

The grid meets its hardest test at the edge of the screen, where the device fixes the width. Say a designer lays out a list of cards for a phone that is 375 points wide, as the iPhone 6 is. They choose a 16-point margin on each side. The card is then 343 points wide, since 375 minus 32 is 343. The number 343 is not a multiple of 8, and that is acceptable.

The Spec guide gives the iPhone 6 screen as 375 by 667 points and suggests keeping margins and padding on the grid while the block element fills the remaining space. In code this is a box with a flexible width. The fixed parts, which are margins, padding and gaps, stay on the grid. One part takes whatever width is left. The fixed parts are what make screens look alike, so they are the ones to protect.

Small parts and dense screens

The steps of the grid are coarse. Going from 8 to 16 doubles a gap. Icons and tight spaces often need something between. That is why Material 1 puts toolbar icons on a 4dp grid and why Atlassian keeps a 4px token. The reasons for the unit in this article come from screen arithmetic and team practice. The sources here report no usability test that compares an 8-point layout with another unit, so treat 8 as a good default and not as a proven optimum.

081 min

The 8-point grid and touch targets

A spacing rule does not say whether a control is large enough to use. WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), asks that most targets measure no less than 24 by 24 CSS pixels. The criterion is at Level AA. The number 24 is 3 times 8, so a size taken from the grid can meet it. A 16-point icon button is also on the grid, and it is too small unless an exception applies.

People with hand tremor or limited fine motor control miss small targets, and targets that sit close together make wrong taps more likely. Larger targets are also quicker for everyone to hit, which is the finding behind Fitts's law. The grid gives the sizes to choose from. Accessibility requirements decide the smallest one you may use.

091 min

The 8-point grid vs. nearby grids

Four ideas are called grids, and they answer different questions.

The 4-point grid is the 8-point grid with half-size steps, not a rival. A column grid, such as the ones in grid systems, divides the width into columns and says nothing about the height of a button. Web frameworks such as Bootstrap and Tailwind ship their own spacing defaults, and a team can match them to the grid or replace them. The one axis that separates the 8-point grid from the others is that it constrains the size of every element, in both directions, with a single unit.

102 min

Applying the 8-point grid

A team can adopt the grid in a few steps.

1. Choose a scale from the grid, such as 8, 16, 24, 32, 48 and 64, and give each step a name. Use 8 between closely related parts, 16 inside components, 24 between groups and 32 to 48 between sections. These are starting values and not a rule.
2. Size components by their padding around the text, so a button's height comes out on the grid without anyone setting it.
3. Keep the space inside a group smaller than the space around it. Parts that sit close together read as one group, which is the effect of proximity. A bigger step also ranks an element higher on the page.
4. Let one flexible element take the leftover width, and keep margins and gaps fixed.
5. Use 4 for icons, small parts and text, and write down each exception so the next person does not repair it.
6. Record the scale as design tokens, set the grid in the design tool so elements align to it, and write the rules where developers will read them.

The rule backfires when it is applied to everything. A designer who forces a dense table into steps of 8 makes it taller than it needs to be. A designer who bends a size by 2 points for optical balance, because a shape looks off-centre, is allowed to, as long as the exception is recorded. Choose 8 as the main step if the product is mostly spacious screens. Choose 4 if it is dense, or if many parts are small.

?4 questions

Questions people ask

§8 sources

Sources