The Comprehensive 8pt Grid Guide
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.
