4-Point Grid System for more consistent interface design

Consistency is a very important aspect of design to impart a professional outlook to it. imagine in our day to day life if we find any part of the online site not consistent with the rest of the experience of that site, it immediately throws us off. therefore it is very important to have a consistent unit of measurement for a layout. A little consistency goes a long way.

As a Designer, you all must have heard a lot about an 8-point grid for an interface design. there are very interesting articles by Elliot Dahl and Bryn Jackson which covers almost everything about an 8-point grid system, hard and soft grids, it’s use according to the Box model, etc.

What is the 4-point grid?

This simply means to use ‘increments of 4’ to size and space out the elements on a page. any defined height or width should be divisible by 4, including padding, margins and line heights.

The reason ‘Why 4-point’

• Desktop design tools like Sketch, Figma, Adobe XD, etc. have fairly dense interfaces optimized for productivity and speed of use. With such a dense interface, an 8pt scale simply doesn’t provide enough granularity. building denser interfaces requires a high level of fidelity provided by a more granular grid. even Material follows this 4-point grid layout throughout their design.
• Using an even number to size and space out components is more usable. for example, devices that have a 1.5x resolution will have a hard time cleanly rendering an odd number. Scaling 5px by 1.5x will result in a half-pixel offset. So particularly 4pt grid instead of other even numbers is because it offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system.
• Another reason to use 4pt and 8pt grids is that most modern display and monitor resolutions are divisible by 4 or 8, both horizontally and vertically. and as we said 4pt for more granularity.

Things start to align magically!!

As you start making components on the page/screen based on this grid unit, there is less scope for vertical misalignments as we are using a narrow set of variables. you can test it out!!

• Start with defining margins for the whole screen. then finalize what all components do I need for this screen (input box, type scales, picture, set of icons etc.)
• Then start fixing the size of high-level components in the multiple of 4. also fix the line height for typography scales in the multiple of 4.
• Now start arranging those components with spacing of 4-pt grid. In sketch, you can also set the horizontal and vertical grid layout with 4 pixels columns. which helps to adjust those spacing in an easier way.
• I recommend counting the spacing from the bounding box of the element, because counting from baseline will not help developers at all. so for making this right we need to fix the line height and bounding box for the rest of the components in the first place.

When to go for breaking the grid:

Like any other design principle, we should follow the grid religiously — until it stops helping and starts getting in the way. there are less number of exceptions here.

Here’s a more in-depth example:

The 12px text inside the input box and input box of 24px height results in 6px spacing on the top and bottom of the text. But this makes perfect sense and doesn’t break anything for either designers, developers or users.

At the heart of every layout grid is the core unit, used to calculate everything else. Having a design system that’s entirely based on the core unit allows for seamless scaling of the whole interface through theming.

• The benefit for the Designers is Efficiency, fewer decisions to make while maintaining a quality horizontal and vertical rhythm between your elements.
• It also speeds up the design and development process as spacing rules are defined by designers are easy for designers to collaborate and the developers know the components can always be coded following these consistent spacings too.

In the end, the “system” is only good if it is easy to follow and repeat.- Elliot Dahl

Please feel free to drop suggestions in the comment box, Thank you!!