Start using rem the right way in css
“ I use pixel units in my css. Everything works great. I begin to make my project responsive. So, I start reducing each of the pixel values using media queries. It’s a lot of work. I get headache all over my body….Dead! “
If you still use px in css, it’s the right time to switch to relative units like %, em, rem, vw, vh etc. In this article, we are going to talk about rem as it is perfect for creating scalable layouts. It will change your responsive game. Follow this article to know how.
What is rem?
REM is a unit whose size is relative to the font-size of the root element (<html>). The default font-size of the root element is 16px. That means, 1 rem is equal to 16px, 2rem is 32px and so on.
Before we begin. Get to know why we are using rem?
By using rem, we are making sure that each and every element, image or anything present on the webpage is using a relative size. REM unit makes everything to take their size relative to the root font-size. If we change the root font-size, all element will automatically change their sizes and hence, no need to make each element reduce size on small viewports.
Got confused? Don’t worry. Everything is explained below. Follow up.
How to use it in place of px?
Like this —
p { font-size: 2rem; }
Now, what is the font-size of p? It will be 32 px and you know why. Because, it depends on root font size which is 16px by default. So, 2rem is 32px.
Now we don’t always want elements to be 32px(2rem), 48px(3rem)etc. What if we want p to be 5px? We need to convert px to rem as we have to use only the rem unit.
So, 16px → 1rem;
1px → 1/16rem;
5px → 5 * (1/16)rem (0.3125rem)
You see the struggle here? Since, root font size is 16px, we need to do all the calculations with 16.
What if we change the root font size to 10px instead of 16px? Calculations would become much easier and faster. No need to use calculator as well.
For eg, in the example above, if the root font size is 10px and we want the paragraph to be 5px, we can write —
p { font-size: 0.5rem; }
Look. Easily calculated as root font is 10px, so 1rem = 10px. Hence, 0.5rem = 5px.
Here’s a popular convention while using rem
We found that calculating font-size in rem becomes easy if the root font-size is 10px. So, it’s a convention to convert default root font-size from 16px to 10px when using rem.
How to convert the root font-size?
Since, html is the root element. We just need to target it in css —
html { font-size: 10px; } //default value is 16px; we convert it to 10px
Now, 1rem = 10px. See how easy our calculation are now —
I want a font-size of :
10px → 1rem,
14px → 1.4rem
16.7px → 1.67rem
53.2px → 5.32rem
Note that rem works with any type of values. Eg.
width: 12rem; //120px
border: 0.7rem solid green; //7px
More advanced trick! You will love it.
Let’s convert this 10px to a percentage value. I will tell you the benefit later.
html { font-size: 62.5%; } //this means, font-size: 10px
16px means 100% font-size. (since 16px is the default size)
1px means 100/16% font-size.
10px means (100/16) * 10 % → 62.5%
Just basic maths here.
Why we did this?
- Suppose a user with poor vision changes the default font-size from 16px to 20px. But, this change will have no effect on the page. Why? because we are changing 20px back to 10px in our css. So, the increment/decrement feature of the font-size will be of no use.
That’s why we change 10px to 62.5%.Now, If the user changes the default font-size to 20px, the font-size of our html will become 62.5% of 20px i.e. 12.5px. So, user can now +/- the font-size as per need. - Now in smaller viewports, we just need to reduce the html { font-size} and all our elements will be automatically reduced because we used rem everywhere. And rem depends on root element’s font-size. Using, % here helps us to reduce the root font-size much easier.
For eg, at 768px (tablets ), we want to reduce the sizes of our elements.
We can do something like this —
@media (max-width: 768px) {
html {
font-size: 50%;
//just experiment with it. Reduce it to whatever fits your need.
}
}
Magic!! You just need to reduce font-size in one place and everything will get reduced accordingly. This is the power of rem.
I highly recommend you to try this once on your project for a better understanding. I use it in all my projects and I don’t get headaches now while making my layout responsive. 😂
Thanks for reading. Give it some claps if you liked it.
Read my previous stories —
2. Fetch initial data on page load in React-Redux application
Let’s connect —
