You’re probably already familiar with em units – they’ve been a common feature of CSS for the past decade – but a crash course: elements specified using em units are sized relative to the font-size of their parent element. For example, if a paragraph has a specified font-size
of 2em, and the div it’s inside of has a font-size of 10px, then the effective font-size of the paragraph is 10px × 2em, which is 20px.

.parent { font-size: 10px; }
.parent p.child { font-size: 2em; /* outputs to 20px */ } 

“Rem” stands for “root em”. Similar to em units, they calculate size based on an ancestor element’s font-size , except rem units always calculate against the html/root element’s base size. So if the html element has a font-size of 16px, then a paragraph with font-size of 2rem will always be 32px, regardless of the its parent div or any other element.

html { font-size: 16px; } 
.parent { font-size: 10px; } 
.parent p.child { font-size: 2rem; /* relative to html - outputs to 32px */ }