I was recently conducting a peer review for some design explorations of a component for O’Reilly’s design system. During the review I noticed that some of the vertical spacing seemed “off”. After further discussion with the designer we came to the sneaking suspicion that we might be measuring designs in different ways.
Even though we were both utilizing the same 8px baseline grid, we were getting very different results.
In the midst of that conversation my colleague said; “So we’re actually using a 4px baseline grid, not 8.” That really got me thinking. Had we set up up our grid templates for failure? Would changing everything to a 4px baseline correct the issues we were seeing? I really wasn’t sure so I started doing some research to find out.
The first place I referenced was an article I had bookmarked some time ago. This post by Spec gives a comprehensive overview of the 8pt grid system which highlights a crucial and often overlooked part of designing with the baseline grid: using “hard” or “soft” grids. Reading that post was a bit of an aha! moment. On the surface it appeared that declaring “hard” or “soft” would address the major issue we were facing and that it was less about the setup of the baseline grid settings. To validate that I would need to put both methods to the test to see how they work in the real world and compare them with our current designs.
To start, let’s look at the arguments for each:
You can use oddly sized elements within a design and just reduce/increase the size of the surrounding block element to fill the space within the grid structure.
This mirrors the development environment more closely because programming languages don’t adhere to a hard grid structure.
“Don’t get hung up on the word “Grid” too much, when talking about a Soft Grid. It’s really more about a fixed sizing/spacing increment (8px in this case) of the elements relative to each other.” ~Anthony Collurafici