Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a specific media query.
For instance, if we opt not to provide a fallback for older browsers, we could implement the following:
/* Mobile Styles */
html { font-size: 1rem; }
h1 { font-size: 2rem; }
/* Specific desktop styles */
@media only screen and (min-width: 992px) {
html { font-size: 1.25rem; }
}
This setup would enlarge all fonts by a factor of 1.25 on desktop screens. A convenient approach indeed.
However, in order to accommodate IE8 with an alternative to rem, we are compelled to include a fallback system, such as:
/* Mobile Styles */
html { font-size: 16px; font-size: 1rem; }
h1 { font-size: 32px; font-size: 2rem; }
/* Specific desktop styles */
@media only screen and (min-width: 992px) {
html { font-size: 20px; font-size: 1.25rem; }
h1 { font-size: 40px; font-size: 2rem; }
}
The drawback, however, is that this approach necessitates redefining all font-size declarations within the desktop media query once again. Alternatively, using em as a fallback would avoid this issue, but it leads to font size escalation.
I am eager to hear your thoughts and recommendations regarding this matter!