Currently, I am exploring the implementation of a responsive typography solution using SCSS and rems. The goal is to utilize media queries solely on the baseline font-size in html rather than on each individual element.
After researching different approaches to setting the font size in html:
html { font-size: 100%; } // default browser font-size
html { font-size: 62.5%; } // 62.5% = 10px for rem calculation ease
html { font-size: 16px; } // fixed 16px
If we were to adopt the 62.5%-approach recommended by Jonathan Snook, managing headings and paragraphs could be streamlined with a mixin for px-fallbacks:
@mixin font-size($sizeValue: 1.6) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
h1 { @include font-size(3.2); } // 32px
h2 { @include font-size(2.6); } // 26px
h3 { @include font-size(2.2); } // 22px
h4 { @include font-size(1.8); } // 18px
h5 { @include font-size(1.6); } // 16px
h6 { @include font-size(1.4); } // 14px
Subsequently, applying media queries to the html font-sizes can help scale typography at various resolutions, like so:
@media (min-width: 768px) { html { font-size: 56.3%; } } // 56.3% = 9px
@media (min-width: 992px) { html { font-size: 62.5%; } } // 62.5% = 10px
@media (min-width: 1200px) { html { font-size: 68.8%; } } // 68.8% = 11px
Questions:
1. What is the most effective approach to setting the font-size baseline (px vs 100% vs 62.5%)?
2. What is the optimal strategy for implementing responsive typography with SASS / SCSS?