Type snapped to a baseline grid
Live demo
drifting off the rules with every line it sets, a little further each time
landing on the rules every line, because the height was rounded up to the step
Caveat and fallback
CaveatBoth arguments have to be the same type, so a unitless line-height cannot be rounded against a pixel step; give it a length such as 1.48em and round that. The strategy comes first and there are four of them, up, down, to-zero and nearest, with nearest assumed if you leave it out. A step of zero yields NaN, which invalidates the declaration rather than falling back to something sensible.
FallbackAn engine that cannot parse the function throws the declaration away, so write the plain value on the line above and let the rounded one win where it is understood. The grid then degrades to ordinary leading, which is what the page had before. mod() and rem() arrived alongside it and disagree about the sign of a negative result, which is the detail that bites.
Source code
<p class="copy">set on a nine pixel grid</p>
.copy {
line-height: 1.48em; /* first, always */
line-height: round(up, 1.48em, 9px);
}Published