Applying the 4 point grid system -for beginners-
When I started my journey in the UX field, all designers where talking about 8 point grid system to get the pixel perfect, which ensured that your design would be perfect and all your components would fit.
After making use of the 8 point grid system I detected that we needed to adjust some components that looked unaligned to the visual by moving them a few px to the desired side, that led us to make exceptions to this system and made developers doubt about the spacing.
With the 4 point grid system, spacing is placed on a baselined grid for vertical rhythm, this spaces out all components using multiples of 4 to keep consistency and get more flexibility in the UI.
What is a point?
A point (pt) is a type of measurement of space that depends on the screen resolution, we usually design in “@1x” that for design purposes equals to “1px”.
What is vertical rhythm?
The vertical rhythm is how the text is aligned to the grid in a uniform way by setting the line-height, this text will be always placed over the baseline grid. A good vertical rhythm ensures the design looks good but also helps users for easy readability specially in long texts.
The “line-height” or “leading” is the distance between lines of a text in a bounding box.
Why apply the 4 point grid system?
After some research I found the 4 point grid system gives designers more granularity at the moment of design components, ensuring to have more variations to align and create the designs. Basically instead of choosing between 16px o 24px, now we have the option of 20px too.
Additionally most of the screen sizes are divisible by 4 as shown below
What are the benefits of the new system?
- It is compatible with the 8pt grid system.
- Make reasonable the use of icon sizes of 16px, 20px, 24px, 32px.
- More variations of spacing between components e.g.: the space between two buttons that are related.
- Horizontal space between elements inside a component e.g.: the space between text and icon inside a button.
- More possibilities for vertical rhythm of components.
- Correct using of the line-height helping to be aligned to the grid.
- Helps designers to have more consistency on designs and fewer decisions to take.
- Helps developers code following and repeating these spacings set.
- Most of the breakpoints are divisible by 4px.
There are always exceptions
- When you center your icons or text vertically to a component, it doesn’t matter if they fit into the baseline grid.
- The text doesn’t need to fit the grid but the bounding box does.
- You can always break the grid when it stops helping you 👍
Baseline and other alphabets scripts
When a product or design system supports other than the Latin script, like Chinese, Cyrillic, Greek, Arabic, Thai, etc., these characters can have different measurements since their readability is different. In this cases no matter their measurements since the bounding box is the one that developers will take in count and put it into the code.
In the example shown below all scripts stays “centered” in the bounding box
It is important to mention that alphabets scripts in other languages might not be readable in the same size while having the wrong line-height, a good practice is to check the line-height of each different language in the Design System in order to get more consistency in components and avoid size variations of the same component. E.g.: Arabic typography can have an uppercase taller than latin alphabet, leading to mix between the lower case of the previous line.
Conclusion
- Even working with the 4 grid system you will have to make some decisions while designing.
- Try as much as possible to snap to the grid.
- Check for other alphabets line-heights to ensure the readability don’t be compromised.
- Don’t freak if your text is not aligned to the baseline grid.
- Your bounding box is what is important by selecting the correct line-height.
Peace🍟
