Since we wrote about grids and how we work with typography, a few people have asked us why we tend to place text between (or sometimes straight on) the baselines, rather that on top of them. There are two main reasons for this which we’ll quickly explain below.
The first reason is that if we want to keep a consistent vertical distance between objects above and below the text while still aligning those objects to the grid, placing the text on top of the lines would make this impossible, as shown below.
Placing the text between the lines instead will keep the vertical distances equal, or at even multiples of the baseline height, while still keeping all objects perfectly aligned to the grid.
The other reason is that if we use buttons or similar objects which contains text within the shape, we want both the shape itself and the text inside of it to align to the grid. By placing the text either between (or straight on) the baselines this can be achieved, as shown in the first column, while placing it on top of the baselines would either misalign the text from the button shape (column 2) or the button shape from the grid (column 3).