Vertical rhythm is an important element of typographic design on the web. Specifically, setting consistent increments of spacing between lines of text and other elements provides an underlying sense of order and structure. When designing A Simple Frame, I developed a method for setting consistent vertical spacing using rems that is easy, effective, and helps maintain consistency.
This is how it works: define the font-size of the html element as the basic unit of your vertical grid and then set all vertical spacing values (e.g. line heights, top and bottom margins/padding) in rems.1 This not only simplifies the math of your css values, but it aligns your code more clearly with the concept and structure of your vertical grid, thus helping to ensure vertical spacing consistency.
For example, the basic vertical grid unit (and, thus, the font-size value of the html element) on A Simple Frame is 9px. This number was based on the line-height of 27px used for the main body text.2 Thus, the default line-height value is 3rem (3 × 9). When adding vertical space, I simply add in increments of 3 rems. For large spaces, I can quickly add 6, 9, or 12 rems (instead of doing the pixel math) and know that the vertical grid will be maintained. Likewise, 1rem of top margin and 2 rems of bottom margin can be added to a heading (as long as the line-height of the heading is 3rem) and the overall vertical grid is preserved.
With this approach, I really like how the code values clearly reflect the grid structure. Seemingly arbitrary pixel values are replaced in favor of rem values that represent grid units. As an added bonus, the vertical spacing for the entire site can be changed proportionally by changing the font-size value of the html element. Of course, no approach is perfect, but this makes a lot of sense from my point of a view as a designer. I’d love to hear your thoughts.
-
I am intentionally using the term “vertical grid” rather than “baseline grid,” as true baseline grids (where the baseline of each line of type aligns to the grid line) is difficult, if not impossible, to achieve on the web. ↩
-
Practically speaking, 27px is the main vertical grid unit. However, I chose 9px as the most basic unit in order to easily and simply accommodate smaller measurements when needed. For example, instead of writing “.333333333rem” if 9px is needed (a subdivision of 27px), “1rem” is all that is required. ↩