fbpx

The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

html { font-size: 62.5%; } //instead of having 16px default font we can use 62.5% font to make 1rem equivalent to 10px
body {
font-size: 14px; /*We can always add a fallback font incase the user use an older browser version*/
font-size: 1.4rem; /* =14px */
}
h1 {
font-size: 24px;
font-size: 2.4rem; /* =24px */
}

The em unit is almost the same unit as rem but is relative to the font-size of the parent.

for example I have this code

<div class="parentdiv">
test
</div>

See the font size of the paragraph after adding font size in parent div

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
.parentdiv {
font-size: 24px;
}
p { font-size: 2em; } /* = 48px */