Member-only story
Hard and soft grids are just tools, not rules
Thoughts on using vertical grids for text in UI design
Grids have always been one of the core design tools. In some cases, such as columns in newspapers or magazines, the grid is taken for granted. But in the case of vertical grids in UI (especially when it comes to text), it’s not so simple.
The most common vertical layout systems are hard grids (also called base grids) or soft grids. Hard grids align content to a fixed vertical grid, while soft grids define the space between elements on the page. Both approaches have their supporters and opponents.
Advantages
Hard grid
The hard grid is probably logically the easiest thing to understand. Why? Probably because most of us in childhood learned to write on the grid. And when you start to draw interfaces sometimes you want to put the texts in the usual way — along the lines.
Soft grid
The soft grid operates with spacings between elements, setting the rhythm of the design composition. These spacings are especially handy to use when it comes to the implementation of the design in the code because developers do not have any hard vertical grid to which they could stick the design elements (except pixel coordinates, but these are already extremes).
The spacing values can be synchronized between design and development.
A soft grid also works well with Dynamic Type and other user-side text size manipulations.
