Design The 8px grid

Every number you use should have a reason to exist. If you use a margin of 34px, what is 34px? Where is it derived from? These numbers are often called “magic” numbers because they seem to be pulled out of thin air without any apparent reason. The more of these arbitrary numbers are used in a visual composition, the less consistent it will feel.

Less magic, more reason

Set up a base pad size. This number is where all other margins, paddings, gutters, and other numbers will be derived from.

In these examples, we’re using 8px. Notice how the outer padding is 16px, which is simply 8px × 2. This way, you will establish a subconscious sense of that all your elements are connected somehow.

The secret of 8px

The number 8 wasn’t chosen randomly. Bootstrap uses 15px, others use 10px. But the number 8 is special: it can be halfed (8 ÷ 2 = 4), and halfed again (8 ÷ 2 ÷ 2 = 2).

With 15, you can’t divide it by two. With 10, you can can still divide it, but only until 5. With 8, you’re assured that you can still reduce it as needed.

8px and mobile screens

I recommend 8px as the base pad size. The importance of this number is more apparent in the context of mobile screens. By keeping the base grid consistent at 8px, you can be assured that even if your design is scaled down by 1/2, there will be no uneven pixels.

Mobile devices can have different screen densities per device. iPhone 5's have a density of 2 (where 1px is equivalent to 2 physical pixels), while the 6S+ goes up to 3.

Android & Material design

Material Design's baseline grid is 8px. It subdivides this further for icons for a 4px grid. This helps give a consistent feel across all of its UI metrics.

Also see

This article was adapted from Rico's design notes.