HTML
<h1>Header h1</h1>
<p>As on <a href="http://www.modularscale.com">www.modularscale.com</a>. I like to use rem units with px fallbacks for font-sizes. As with much else, which unit to use is ofc. opinionated...</p>
<small>Smaller sized text</small>
SCSS
// Base size and ratio
$base: 1; //= 16px
$ratio: 1.5; // Perfect Fifth
@mixin ms($value, $ms-ratio: $ratio, $ms-base: $base){
$size: pow($ms-ratio, $value)*$ms-base;
$sizepx: $size*16;
font-size: $sizepx +px;
font-size: $size +rem;
}
h1 {
@include ms(3); // 3 means the third size in the defined scale
}
p{
@include ms(0); // 0 means the base size in the defined scale
}
small{
@include ms(-1); // negative numbers means text that is smaller than the base size of the defined scale
}
