CHAPTER 9 The Next Steps for Web Typography
baSeline gRiDS
To help us compose to a vertical rhythm, we can create a repeating pattern
in the background and adjust the baseline grid to our needs. We used to
create a GIF for this, but today we can dynamically create gradients in CSS.html {
background-image: -webkit-linear-gradient(top, #fff 0, #fff 95%, #f00
95%, #f00 100%);
background-image: -moz-linear-gradient(top, #fff 0, #fff 95%, #f00
95%, #f00 100%);
background-image: linear-gradient(top, #fff 0, #fff 95%, #f00 95%,
#f00 100%);
background-repeat: repeat-y; background-size: 100% 24px;
/* Background size height equals rendered line height at the respective
breakpoint */
}Web designers find it very hard to compose to a vertical rhythm and I
agree. It’s not the easiest skill out there to master, but this doesn’t mean we
should give up.
Daniel Eden and Matt Wilcox each developed jQuery plugins54 55 that
calculate bottom margins of images that fall out of the rhythm. With more
and more solutions like these, there is no excuse not to align everything to
a baseline grid. At first, it’s a struggle, but over time, composing to a base-
line grid becomes second nature.fonts as a Progressive enhancement
With a fair share of browsers still unable to handle Web fonts optimally
(e.g. Android 2.2–2.4) or lacking support for more advanced features (e.g.
data URI in IE6–8), Web fonts should be considered a progressive enhance-
ment. They still don’t work optimally outside the box and to make them
work properly we occasionally need to use complicated syntax.54 Baseline.js by Daniel Eden https://github.com/daneden/Baseline.js
55 jQuery Baseline Align by Matt Wilcox https://github.com/MattWilcox/jQuery-Baseline-Align