css

The 4px baseline grid - the present

The problem

It drives me crazy that the text bounding box almost always brings in extra space above and below the actual text. Therefore, when the bounding box is used to measure space, it ends up being bigger than you intended. The bigger the line height, the bigger the problem. In the example below, the design was created by measuring the space between bounding boxes. When all the spacing is set to 32px (in the 1st card), visually all the vertical spacing is actually much bigger than 32px (as shown in the 2nd card), even though you meant them to be equal by setting them all to 32px.

The solution

Because of this problem, I use the 4px baseline grid to achieve a better visual accuracy. Here’s my process: 1. I set up a 4px grid in the background 2. I snap all the UI elements and text baselines to the baseline grid 3. I use the grid to measure vertical space around text instead of using the text’s bounding box. Specifically, I measure space above text from the grid line that’s closest to the type’s cap height and space below text from the text’s baseline 4. Additionally, I defined a set of spacing values for our team to use, inspired by this Medium article: Space in Design Systems by Nathan Curtis