Goodbye 8-point grid, hello 4-point grid?
By: Dries De Schepper
Tags: UI, Design, Typography, Product Design, Sketch

Goodbye 8-point grid, hello 4-point grid?

4-point-grid — Width & Height

With the rise of tech, many graphic designers are making the switch or have already made the switch to UX/UI Design. I studied Art Direction, so I’m more than familiar with baseline grids in Graphic Design. When I started doing UI Design about six years ago, I wasn’t following any specific guidelines. I was mostly looking at other apps and websites for what kind of spacing they used but soon found out that everyone was doing it differently. I saw all sorts of numbers. Margins / paddings of 12px, 13px, 15px, 20px,… It didn’t seem very important back then.

A few years ago, I read about the 8-Point Grid and the two methods, “soft grid” and “hard grid” on Spec.fm written by Bryn Jackson. As someone who is extremely detail-oriented, this was heaven on earth for me. I started applying the 8-Point Grid in all my designs, and I would get annoyed if others didn’t follow this method. But soon, I discovered that it limited me in quite a few cases, definitely in enterprise software or for interfaces with a lot of copy, text fields, hyperlinks, tables and buttons. I started changing it to a 4-Point Grid without really researching anything about it. But fortunately, I found out that I wasn’t the only one out there using this 4-Point Grid:

Ok, but what is the 8-Point Grid?

The basic principle is that everything is a multiple of 8 (8, 16, 24, 32, 40, 48,…80,…96,…). It’s the spacing between all of your elements. For example, your input field has a height of 48 px, and the space between the other input field would be 16px.

An example of an 8-point-grid spacing system for a sign-in screen.

Ok, but why exactly 4-Point over 8-Point?

It gives you more granularity, read more options. Instead of choosing between 8 or 16, you could go for 12. Think about icon sizes, the spacing between elements, the horizontal spacing between text and an icon,…

Better typography. I used to align my text to a baseline grid of 8 and always had the issue that the text on multiple lines was too tight or too big. Now I align my text to a baseline grid of 4 with a line-height multiple of 4. I highly recommend the good line-height tool made by Fran Pérez for this. I will try to illustrate this with a few examples:

An example of 14px font-size with 16px line-height

An example of 14px font-size with 20px line-height

An example of 14px font-size with 24px line-height

I think a line-height of 20px is perfect in this case. The example of 16px line-height is too tight, and the one with 24px line-height is just a bit too big for my taste. Without a 4-Point-Grid, you would have to choose between the first and the last example. Below you will find the spacing I have used for the 2nd example:

An example of 14px font-size with 20px line-height

As you can see, I align the bounding box to the grid and not the baseline of my text because this is how my text will be implemented in CSS. And yes, I know many designers would align the text to the baseline grid rather than the bounding box for optical margin reasons.

Can I break the grid?

The below example shows you some numbers that are not multiples of 4. The 14px text with a line-height of 20px inside the table row results in a spacing of 10px on top and at the bottom of the text. We could make the height of our table row 44px as in the second example, but you would have the same ‘issue’ with the checkmark icon that results in a spacing of 14px at the top and 14px at the bottom. In both examples, it’s totally fine to break the grid.

An example of a table row with 14px font-size with 20px line-height

An example of 18px font-size with 24px line-height

“Type can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item. When placed outside of the grid but centered within a component, text can still appear vertically center-aligned.” — Google Material Design

Conclusion

Constraints are normal, and sometimes needed but don’t we want fewer constraints as designers? A 4-Point Grid will give you much more flexibility in your UI work. You’ll be surprised how many times you will use 12px instead of 8px or 16px as a spacing value.