Menu
html {font-size: 62.5%;} seems like the standard approach to set the base font-size to 10px.
E.g.,
html {font-size: 62.5%;} /* 10px */
body {font-size: 1.5rem;} /* 15px */
But this creates a dependency on the browser's font-size 16px. This seems unreliable in the long run... why not just...
html {font-size: 1px;} /* 1px */
body {font-size: 15rem;} /* 15px */
Is there a technical problem with this? It seems cleaner and much more reliable. Why don't I see people do this?
336
Once upon a time, there was IE and text scaling only. Other browsers came and abandoned the concept in favor of scaling the whole viewport. After all, if you're having a hard time reading the text, you probably have a hard time seeing images and other non-text elements too.
When you're working with relative font-sizes, at some point they have to be converted to the base pixels on the screen. The default modifier is by and large expected to be 16px, you can imagine it as a declaration on an element 1 level above <html>. Any base modifications, like 62.5% on the body for 1 relative unit to equal 10px, scale off that value.
With that in mind, what you're effectively doing is taking matters into your own hands, overwriting the browser base font-size above <html> and setting it to 1px value instead, resulting in 1 em/rem being always equal to 1px inside the body. However, there is a price - the browser is no more able to propagate it's own base font value because of your direct pixel value, so any font-size settings the user may have set are neglected by your declaration. In other words, using the 1px trick disables the pure font-size zoom of the browser. At the same time however, font-size only scaling remains fundamentally flawed in it's intention (look at google.com results with scaled font).
If you'd like to retain the ability of the browser to control the font-size only zoom AND at the same time work with 1rem = 1px, you probably want this instead. edit: I should note that this will be problematic in Chrome due to the minimum font size settings (6px default). Paddings and margins will scale off this value as minimum.
html {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
In 2020, you can do this in Chrome by going to:
chrome://settings/fonts
then slide the minimum font size from 6px to 0. Now, Chrome won't override the minimum of any font size.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
