The comprehensive 8pt Grid Guide - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

published 7 ideas

The comprehensive 8pt Grid Guide

medium.com

Pt  = point

We use small artboards while the devices we design for are huge. For example:

  • The iPhone XR has a Retina display that has twice as many pixels per inch (ppi) as a regular screen, meaning the artboard is rendered at twice as many pixels.
  • On the iPhone X, the artboard is rendered...

STASHED IN:

6

Why the 8pt grid

  • It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).
  • Apple and Google advise so.
  • It's a good basic unit to work with. 4 and 8 are easily multiplied, are flexible and consistent. 

STASHED IN:

6

While the font sizes can vary and move away from the 8 multiplication, the line height will not. 

For example, the Paragraph font size can be 15 pixels, but the line height should be a multiplication of 8, so 24px is an acceptable value. 

1

STASHED IN:

6

Iconography

Icons designed on an 8pt based grid will scale perfectly.

If you want to use icons in a different size, one recommendation is to design on a 16 x 16 pixel grid or a 20 x 20 grid. This way, you're covered for any size:16, 20, 24, 32, 40 etc.

STASHED IN:

6

The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column, resulting in a 30px gutter between columns plus 15px to the left and right of the grid. 

The entirety of the grid is called Container. A container can be either fluid or responsive in size. A f...

STASHED IN:

6

Vertical Rhythm

Rows should be 8px tall. 

Maintaining a vertical rhythm when designing for mobile (web or apps) is vital since there isn’t much horizontal rhythm to work with.

A typographic system that is designed based on the 8pt grid will sit wonderfully on an 8pt vertical grid. 

STASHED IN:

7

Start your UI project right

... using the extended framework for the 8pt grid: Typography, Icons and Layout.

The 8 point grid is the best go-to grid and can be applied to most digital design projects, especially product design.

STASHED IN:

5

0 Comments

Discover and save more ideas by creating a

FREE

Deepstash account.

Develop a

reading habit

, save

time

and create an amazing

knowledge library

.

GET THE APP: