Sizing fonts using the em unit was always a bit of a pain due to its compounding nature. However, font-sizing with the “rem” unit solved this problem. My only question is: why wasn’t I using this earlier? The rem unit, which stands for “root em” is different from the em unit, which is relative to the font-size of the parent; this is what causes the compounding issue. The rem unit is relative to the root element (html), which means that we can define a single font size on the html element and define all rem units to be a percentage of that. Below are a couple rough examples of how ems work vs. rems.

Sizing using the em unit:

html { font-size: 62.5%; }/* 10px */
div { font-size: 1.6em; }/* 16px */
div p { font-size: 1.5em; }/* 24px */

Sizing using the rem unit:

html { font-size: 62.5%; }/* 10px */
div { font-size: 1.6rem; }/* 16px */
div p { font-size: 1.5rem; }/* 15px */

Here’s a good article that gives a more in-depth explanation of how it works: