Vertical Rhythm in Typography
blog.8thlight.com
blog.8thlight.com
Notice that the links in the left-hand column do not use the same vertical rhythm so the baselines of the links do not align with the baselines of the main text. That is the type of bad effect that vertical rhythm is supposed to help avoid. But, I bet most visitors didn't notice it and weren't bothered by it.
Most implementations of "vertical rhythm" on the internet for a single column of text result in vertical gaps that are unnecessarily large. That is, implementing this concept is often counter-productive for must web pages. Notice in this blog post that there is too much space about the "Getting to work" heading, for example.
In the author's first image, where the horizontal lines don't line up with the text, why not just draw the horizontal lines in a different place? As far as I can tell he doesn't explain why he drew the lines where he did.
Second sentence after "PARAGRAPHS AND BODY TEXT".
Those lines are 20px apart so that, in his opinion, text sitting within those lines would be comfortable to read.
If you're rendering typographic baselines in a browser, then you're drawing the lines every 20px starting with 0,0 in the upper left corner of the browser viewport, so you want your text to line up with that.
The problem I have, then, is that he never really explains why that's a good approach, or from where one would pick a line height to key off from. How will thinking in terms of rhythms be an improvement over fiddling with font sizes and line heights until it looks "right"?
You start with your base font size, you choose an appropriate line-height for that (based largely on designerly notions like visual weight, column width, contrast, intuition, etc.) then that lineheight (in pixels) becomes your rhythm.
The idea is that elements like headings, short quotes, possibly images are less sensitive to line-height than body copy, so it's okay to fudge them a little bit to keep the overall rhythm intact.