Start your UI project right with this extended framework for the 8pt grid: Typography, Icons and Layout.
This article is the 1st in a two part series — to the next chapter in which I demonstrate how to create a Design System on top 8pt grid.
In this article I will try and convince you why using the 8 point grid is the best go-to grid there is, and why it can be applied to almost any digital design project you got going on, but especially product design.
Introduction to the 8pt grid
First of all: what’s pt?
pt = point.
Have you ever wondered why we use such small artboards while the devices we design for are huge? My iPhone XR isn’t 414-by-896-pixels wide, it’s actually 828-by-1792-pixel, twice as much!
What happens is this:
The artboard is rendered at twice as much pixels, since the iPhone XR has a Retina display that has twice as much pixels per inch (ppi), than a regular screen.
In the case of the iPhone X, the artboard is rendered at 3 times as much, since it has a Super Retina display that has 3 times as much ppi.
Designing for the smallest size allows us to scale our assets into the different sizes the different devices require, while maintaining pixel-perfect rendering. And so, 1pt can be translated into 1, 4 or 9 pixels at the @1x, @2x and @3x sizes, respectively.
So if we have an icon at the size of 16px, when we’ll export that icon at @2x and @3x, the rendered images will be 32px and 48px respectively, and will suit Retina and Super Retina displays.
For Apple’s guidelines on the subject of image size and resolution.