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.
Several reasons, the first being that it scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).
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 🤓.
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.
In order to create a consistent typography system fast, I use one of my favorite tools: Grid Lover.
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.
As mentioned above, icons designed on an 8pt based grid will scale perfectly:
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
You can define your spacing values as variables:
small = 8px
medium = 16px
large = 24px
x-large = 32pxand 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.
Stay tuned for the next article, where we’ll put the 8pt grid into an atomic design system. So. Much. Fun.
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.