The Comprehensive 8pt Grid Guide

Vitsky
Vitsky
Dec 27, 2019 · 7 min read

Start your UI project right with this extended framework for the 8pt grid: Typography, Icons and Layout.

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?

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:

iPhone XR: Artboard to Render to Screen

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.

iPhone X: Artboard to Render to 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.

Why 8?

The following ×2, ×3 and ×4 are easily scaled with any basic unit.

The second reason, well, Apple and Google advise so, albeit without stating too many reasons why.

The third reason — it’s a good basic unit to work with. the numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them. They’re kind of fun when you get use to them 🤓.


Typography

While font sizes may vary and stray from the 8 multiplication, it’s important the line height will not. The Paragraph font size can be 15 pixels for example, but the line height should be a multiplication of 8, so 24px is an acceptable value.

Typography system based on the 8pt grid. Font sizes may vary, however their line height must be a multiplication of 8.

In order to create a consistent typography system fast, I use one of my favorite tools: Grid Lover.

When our base font is 16px, and our line height is 1.5 times that, we’ll receive a 24px line height. This will remain consistent on the 1.618 scale factor.

Tip: Any font you got installed on your machine, will be displayed by entering the font’s name exactly as you would in a CSS document; usually, simply the font’s name.


Iconography

Exporting a 16×16 pixels icon for iOS will result in perfectly rendered icons in 16, 32 and 48 pixels.

If you intend on using icons in a different size, I would recommend designing your icon on 16×16 pixels grid, and another version on a 20×20 pixels grid. This way you’re covered for any size: 16, 20, 24 (16×1.5), 32, 40 and so forth.


Layout

Customizing the Bootstrap grid is natively supported and very easy to do; If you’re somewhat literate in CSS, here’s a guide for exactly that.

Horizontal Rhythm

The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the entirety of the width that is available.

The two types of a Bootstrap container and the width of a column with it’s 15px margins. An excerpt from my UI/UX course.

For each screen range there is a container width that is optimized to that screen range. At first it’s recommended to use the default sizes, however it’s pretty cool to customize when you’re further down the 8pt rabbit hole.

Layout table from Bootstrap. Here you can see the container sizes for each of the resolution ranges.

When our Bootstrap-based-website is displayed on any device, The browser checks to see home much space is available for display, and sets the layout according to that space. If we have a 414px wide iPhone, we’re in the Extra small category, and out container will take up 100% of the width available. When will switch to a wider device, let’s say a tablet (768px wide), our device category will change to Medium, and the container’s width will be 720px.

If you’re like me, you’d like to customize those settings. We’ll start by whipping out our calculators 🧮.

When designing for desktop I’d like to have each column be 72px wide, and have a gutter of 24px or 32px. A gutter of 24px will result in 12px on each side of the container, and a gutter of 32px will result in a 16px on each side. I usually opt for the 24px gutter.

(12 columns × 72) + (12* gutters × 24) = 1152px

*Technically there are 11 gutters plus two halves on each side of the container.

(12 × 72) + (12 × 24) = 1152

Designing for mobile presents a few new challenges. First, not all mobile devices’ width dimension is divisible by 8. In this case, it’s important to rely on your own instincts as a designer, and find a middle ground. Second, 12 columns aren’t really practical when designing for narrow screens. I myself opt for a 6 column layout on mobile, although when I experimented with a 2 column layout, the end results weren’t any worst off.

This one is up to you to decide for yourself.

For a screen that’s 375pt wide, use these settings:

Although not a perfect 8, this is the best middle ground I found.

Preserving the gutter width is more important than preserving the column width, since the gutters act as the white space between elements — and that is what actually determines the rhythm; while the columns dictate the width of an element.

If you’re more fond of the 2 column school for mobile, this is a more 8-friendly layout setup

A 1152px container isn’t very different from Bootstrap’s default 1140px container and is still in the device (desktop), range. So I’m not worried of any discrepancies or problems.

Important: Layout’s width should be based on the content and user needs. If you see it just doesn’t work with the 8pt grid, no worries. We’re designers and we should be flexible when we need to.

Vertical Rhythm

When designing for mobile (web or apps), vertical rhythm is the name of the game, since there isn’t much horizontal rhythm to work with. So maintaining that vertical rhythm consistent and beautiful is doubly important.

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

Pro Tip

small = 8px
medium = 16px
large = 24px
x-large = 32px
and so forth...

This way it’s easier to maintain consistency, it’s more logical and the developers are happy since they can safely assume spacing based on the relationship between the elements on the screen.

We are designers — not robots. If a number is not defined nor multiplied by 8 but it looks good, use it (albeit sparingly). Since you have based a system, even if the developers will miss that 12px nuance, it’ll look fine.

Design System

8pt grid Sketch template file

For now, here’s a 8pt grid Sketch template file to help you get started.


Feel free to reach out if you got any questions — I’m always up for some chit chat.

The Startup

Medium's largest active publication, followed by +587K people. Follow to join our community.

Thanks to Shira Eliash

Vitsky

Written by

Vitsky

UI/UX designer | Sketch instructor | Good vibes enthusiast. Israeli born and raised. Reach me at hi@vitsky.studio. See my work: www.vitsky.studio.

The Startup

Medium's largest active publication, followed by +587K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade