why, again? em px + rem

While fumbling with vim key bindings, I momentarily lost my understanding of how to size text. So, if you're looking for a refresher, here we go!

sizing with px

Pixels, we know these. Providing consistency, px-based layouts offer users with accessibility tools to minimize viewport concerns.

sizing with em

Modifying base font-size on the body using percentage, 1em equals to 10px (base 10) instead of default, 16px.


body { font-size: 62.5%; }  
h1 { font-size: 2.4em; } /* ==24px */  
p { font-size: 1.4em; } /* ==14px; */  

Problems, ahoy?
em-based font sizing compounds and this is frustrating. so, let's rem!

sizing with rem

css module level 3 introduces root em', which is relative to the root element meaning, we can define a single font size on the root element and define all rem units as percentage units of thatroot`(html).

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* 14px; /
h1 { font-size: 2.4rem; } /
==24px; */