All sizes (font size, spacing, etc) on this template are based on a 8px grid system. You can find some references about this system here and here. I prefer to use px to set up the base unit and EMs to define the sizes and scale.

Basically it works like this:

• Define the base font-size on the Body element (16px)
• Font sizes, padding, spacing, etc, defined in EMs

Why EMs and not REMs?

REM is awesome and is your friend. But I prefer to use EMs as a size unit because it allows you to set the scale of your components individually, since it's relative to the parent element, not the root element.

Consider this scenario: you have a box component, which all elements are sized using EMs. On mobile, the component feels too small. How do you fix that?

• With REMs, you would need to change the scale of all the elements inside that box individually.
• With EMs, all you have to do is change the font-size of the box element that holds all the content. You can change the size using PX or EMs, it doesn't matter. On place to change the scale is more maintainable.