Just to add a little extra to this, I use REM’s instead of EM’s as the math gets complex using EM’s.
REM’s base themselves on the HTML font-size. So nested font-sizes don’t get exponentially bigger/smaller/more complex.
If you use SASS/SCSS – don’t go alone, take this Mixin;
@mixin font-size($sizeValue){
font-size: $sizeValue + px;
font-size: ($sizeValue / 10) + rem;
}
// To use it;
html { font-size: 10px; } // or whatever size you want
.element { @include font-size(14); }
//This outputs;
.element {
font-size: 14px;
font-size: 1.4rem;
}
