Grid

8 Pixel Grid for Vertical Spacing

Uses increments of 8 to size and space out the elements on a page. This means that any defined height or width, margin or padding will be an increment of 8 (pixels).

Nowadays, the majority of popular screen sizes are divisible by 8 which makes for an easy fit. Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 pixel system, or limiting you like a 10 pixel system.

What is the value of using this system?

For Designers

Efficiency, less decisions to make while maintaining a rhythm between your elements.

For Teams

An easy system of communication between designers and developers (no fussing over pixels). A developer can easily eyeball an 8pt increment instead of having to measure each time.

For Users

Consistent aesthetic to the brand they trust. No blurry half-pixel offsets on their preferred device.