I am really having a hard time understanding rem units in the CSS - Measuring Units video. Was a simple concept for me to grasp at first but then when Mosh talked about 15rem, it really confused me. I watch it three times allready on three separate days and cant understand for the life of me why we are doing the 62.5 percent calculation if we know that 15rem is 15 times the root font.
Why are we breaking it down to 10px? What is the relevance of the 10px? Why are we using the 62.5 percent to reduce to 150px? What is the relevance of the 150px?
And then Mosh says “so when you see 15rem, you can assume it is 150px.” What does that even mean? I thought 15rem means 15 times the root font, which is 240…so what is the 150px relevance??? I am totally confused. Hope someone can help.
It’s literally just to make the math behind it easier. 10 * 15 is easier to calculate than 16 * 15. A root font size of 10px means that all your rems work in multiples of 10.
Thank you for the reply, I really appreciate your answer. Unfortunately I am still very confused. I think this is a case of assuming I am not an absolute beginner. So what makes sense to you, doesn’t yet make sense to me.
For example: You wrote “10 * 15 is easier to calculate than 16 * 15”…this is true BUT the sums are two different sums. 10 * 15 is 150. 16 x 15 is 240.
And if we are just ignoring that 15rem means 15 times the root element, then why say it? Why are we learning that 15rem means 15 times the root element and then saying “but nevermind” and do it a different way and get a completely different sum? What is the relevance and purpose of reducing it to 150? I know it’s a lot to answer but I’m super confused. Thanks in advance.
We aren’t reducing 240 to 150. We are reducing 16 to 10. When Mosh does this…
html {
font-size: 62.5%;
}
he is changing the the font size of the html element, which is the root element, from 16 pixels (the default font size) to 10 pixels. So now, because the root element is 10 pixels, whenever we use rem we are working in multiples of 10 which, as Ruu mentioned, makes the math easier. I can easily calculate in my head what 15 * 10 is, but 15 * 16, that’s a lot harder for me. With a 10px root element, when I see 15rem in my css then I pretty much instantly know that it means 150 pixels.
I think the 62.5% aspect of this is a bit confusing. It might seem more straightforward to do this instead…
html {
font-size: 10px;
}
But the reason we don’t specifically say 10px is that a user could have changed their browser settings to use a larger or smaller font, and we want the font size to grow or shrink based on the user’s preference, so we use a percentage instead of a specific value.
Does changing font-size to 62.5% affect user’s experience in any way?
LIke, will text appear smaller than on other websites?
I’m just wondering if there are any downsides to this practice
Yes, if you have a site that has been working with the default font-size and you switch it to 62.5%, your text etc. may shrink, depending on how your page is styled, and you would need to make further adjustments to make things look right again. But if you start out with the 62.5% font-size, then you would design your page with that in mind and everything would look however you design it. So for example if you wanted text in your div elements to be larger, you could do…
div {
font-size: 2rem;
}
and then the text in your div elements would have a font-size of 20px.
OK, but what about the client?
Somebody sets font-size as “Medium” in the settings of Chrome browser - which is 16px, if I remember correctly. He expects the text to be of this particular size. Then he goes to your website - and what happens exactly?
I’m guessing the number 16 is completely discarded in the choice of the font-size of the root html element - which is 10px in this case. So, even though it’s still up to me as a developer to choose what size of the text I want to use on my website, I’m guessing I should refrain from using anything less than 1.6ram for regular text - in order to keep up with people’s expectations.
Am I understanding this correctly?
I’ve got my browser’s font size set to medium, but looking at this page, the font-size for these very words that I’m typing is set to 15.008px. And as I glance around this page I see some text that is even smaller, and some that is larger. So I guess it depends!