In your example code you are referring to the p tag as the base value, where as REM always refers to the root element or the html value. You have mentioned it before but you seem to be contradicting yourself in the code.

Awesome article though!

I’m interested how do you work out margins in design and code for typography while accommodating for the line-height box but still adhering to a sort of baseline/vertical rhythm.