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.

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.

Image for post
Image for post

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:

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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?

Several reasons, the first being that it scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).

Image for post
Image for post
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 🤓.

Image for post
Image for post

Typography

When I establish a typographic system, I strive to keep my styles distinct enough yet consistent, so my design will have that inner logic that gives the design that Je ne sais quoi feeling.

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

Iconography

As mentioned above, icons designed on an 8pt based grid will scale perfectly:

Image for post
Image for post
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

Since I’ve been coding a part of the projects I work on, I’ve been using Bootstrap’s standard 12 grid with a minor modification. I’m a big believer in working with widespread tools — why? Well, there’s a reason they’re so widespread. They work and they’re efficient. Instead of reinventing the wheel, I prefer modifying the one I got. It’s cost efficient, fast and predictable.

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 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. These are the default settings, which I’ll configure to my liking, or ask the developer to configure.

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
(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:

Image for post
Image for post
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.

Image for post
Image for post
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

You guessed it, our rows are going to be 8px tall. Some may go even further and have 4px rows — This allows for any line height which is a multiplication of 4, which is great. However, I found out that it takes more energy to maintain than it gives value in the output. So 8px is good enough for me.

Image for post
Image for post

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.

Image for post
Image for post

Pro Tip

You can define your spacing values as variables:

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.

Image for post
Image for post
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

Stay tuned for the next article, where we’ll put the 8pt grid into an atomic design system. So. Much. Fun.

Image for post
Image for post
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 +771K 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 +771K people. Follow to join our community.

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 +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store