Keep vertical space consistent between text, images, borders, and any other height-bearing elements. The key to keeping the grid is to set all vertical dimensions in increments of the default line-height. The xy.css stylesheet establishes a base typographic rhythm of 18 pixels via the <body> tag:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.75em;
line-height: 1.5;
}To streamline styles, we combine these properties into a single property using font shorthand notation:
font: 0.75em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;Notice that we exclude units on the line-height property. Using unitless line-height helps to ensure consistency and flexibility throughout your design.
Calculating the baseline for the xy.css vertical grid begins by defining the ratio of pixels to em units. Keeping things simple, we declare the conversion ratio as:
1em = 12px
This equation enables the calculation of the default font-size and line-height for the vertical, typographic grid:
/*
a. default font-size = 12px = 1em / 16px x 12px = 0.750em
b. default line-height = 18px = 18 / 12 = 1.500 (unitless)
*/With this baseline established, keeping a strict vertical grid involves calculating all height-bearing distances in multiples of these default values.