# Confused about 15rem exercise from Measuring Units

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.

1 Like

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.

2 Likes

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.

1 Like

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!

1 Like