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

Use multiples of 4 for more user interface flexibility.

With the development of technology, many graphic designers are switching or have already switched to UX / UI design. I ve studied directing, so I m more than familiar with basic grids in graphic design. When I started UI design about six years ago, I didn t follow any specific guidelines. I basically looked at what interval other apps and sites were using, but soon found that everyone was doing it differently. I ve seen all sorts of numbers. Margins / padding 12px, 13px, 15px, 20px … It didn t seem very important at the time.

Modular grids in digital interfaces. History, theory, rules of use

The purpose of this article is to give you a good understanding of grids, what they are and how to apply them in the design process. Understanding how to use grids will come from practical experience.

Several years ago I read on Spec.fm article on 8-pt mesh and two methods, “soft mesh” and “hard mesh”, written by Bryn jackson… For me, as a person who is very attentive to details, it was heaven on earth. I started using the 8-pt grid in all my projects and it annoyed me if others didn t follow this method. But I soon found that it limits me in some cases, especially in enterprise software or interfaces with lots of text, text boxes, hyperlinks, tables, and buttons. I started changing it to a 4-pt grid without doing much research. But luckily, it turns out that I m not the only one who used this grid:

Ok, but what is an 8-pt grid?

Its basic principle is that all values ​​are multiples of 8 (8, 16, 24, 32, 40, 48 …, 80 …, 96 …). This is the distance between all of your elements. For example, your input field is 48px high, and the distance to another input field will be 16px.

Okay, but why exactly 4 points and not 8?

• This value gives you more detailing, that is, more options. Instead of choosing between 8 or 16, you can choose 12. Think about icon sizes, spacing between elements, horizontal spacing between text and icon …

• Better typography. I used to align my text to an 8-pt baseline grid and always ran into a problem where text on multiple lines was too dense or too large. Now I am aligning my text to a 4-pt baseline grid with inline height, a multiple of 4. I highly recommend good toolmade Fran Pérez… I will try to illustrate this with a few examples:

I think a line height of 20px is ideal in this case. The example with a line height of 16px is too narrow, and the example with a line height of 24px is too big for my taste. Without a 4-point grid, you will have to choose between the first and the last example. Below you will find the spacing I used for the 2nd example:

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

Can I break the grid?

The example below shows some numbers that are not multiples of 4. 14px text with a 20px row height inside a table row results in 10px spacing at the top and bottom of the text. We could have made our table row height 44px as in the second example, but then we have the same “problem” with the checkmark icon, which results in a spacing of 14px at the top and 14px at the bottom. In both examples, it is perfectly normal to break the mesh.

“Text can be positioned outside the 4dp grid if it is centered inside a component such as a button or list item. When placed outside the grid, but centered within a component, text can still be displayed vertically and centered. “

Google Material Design

Output

Constraints are okay and sometimes necessary, but don t we designers want less constraints? A 4-point grid will give you much more flexibility in your interface design. You d be surprised how many times you use 12px instead of 8px or 16px as your spacing value.