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.