So I’ve been reading The Elements of Typographic Style Applied to the Web, specifically the part on maintaining a proper vertical rhythm. The method detailed on that page for maintaining a faux baseline grid seems great on the surface, but appears to fall prey to certain problems with headers that are larger than the body text size but smaller than the baseline grid division. Let’s say you’ve got 12px body text, 16px headers and an 18px baseline grid. One of two things happens:

1) the header keeps the standard line-height (1.5ems = 24px) but gets additional margins to make the whole block divisible by the baseline grid interval (so 24px header line-height + 12px top margin = 36px), which is fantastic so long as all your headlines are only one line (48px two-line headline + 12px top margin = 60px = DANGER WILL ROBINSON), or;

2) the header’s line-height shrinks to the baseline grid interval, which results in horribly crushed text (16/18 = a line-height of 1.125em, compared to the body text line-height of 1.5em).

So it seems like the system only works if you become a headline Nazi: everything must fit on one line or you risk a firing squad! Unfortunately, this just isn’t an option for the vast majority of sites, which are either community-based and won’t tolerate such exacting restrictions, or else are run by media outlets that still prioritize print over web. That isn’t to say that this is strictly a web problem; the math doesn’t work out regardless of whether you’re defining a grid for print or the web. It’s just that it’s much easier to institute draconian controls in a print environment than in a web environment. So sadly I have to abandon baseline grids for a website I’m currently working on.