Understanding EMs and REMs
As we know Bootstrap 4 is using em’s and rem’s instead of pixels, so its necessary to understand what these units are, and how they work. Let’s take a look.
There are few things that you should memorise about em’s and rem’s, these points will help you understand these units more easily.
Let’s try to explore these points more closely with help of an example.
I have created 3 DIVs with different IDs,
<html>
<body>
<div class="box" id="box1">Pixels</div>
<div class="box" id="box2">EM's</div>
<div class="box" id="box3">REM's</div>
</body>
</html> Now I have added width and height to all 3 DIVs in CSS, and added a font size on HTML element. Notice that i have used different units on all 3 DIVs, so that we can see the difference between them.
html {
font-size: 16px;
}
.box {
float: left;
margin: 10px;
border: 1px solid #000;
padding: 10px;
}
#box1 {
width: 100px;
height: 100px;
}
#box2 {
width: 6.250em;
height: 6.250em;
}
#box3 {
width: 6.250rem;
height: 6.250rem;
}You might have noticed that on box2 value of width and height is in EMs and on box3 values are in REMs, but if you run this code in browser, all 3 boxes will have same size.
How EM’s and REM’s are calculated?
Before we move ahead, let’s take a look at how EM’s and REM’s are calculated against pixels.
As i have mentioned earlier “Both em and rem units work relatively to a base font size, that is defined in pixels”.
Base font size is always the font size of root element, that is HTML tag in any html document. Default font size set by browsers in 16px, which you can change in your browser’s settings.We can overwrite base font size in our CSS file,
by assigning a font size to HTML element, like we did in our example.
But, what about calculations?
Calculation is actually very simple. In our example we have a 16px base font size, and 100px width and height for boxes. So its value in EM’s and REM’s is 100/16 = 6.25
Desired size in PX / base font size in PX = value in EM or REM
Or you can reverse the calculation 6.25 * 16 = 100
Value in EM or REM * Base font size = Size in PX
You need these calculations to find out what values you need to assign to EM and REM units while using them in your CSS code. Browser will do same calculations for rendering the code.
Changing the value of base font size on HTML element will automatically change the values of EM’s and REM’s everywhere they are used in CSS code.
Try to change values of base font size, and width or height values of boxes and notice how calculations are done.
Because both EM and REM work relatively to base font size, it make them these units flexible and scalable. You can easily change values of these units, just by changing the value of base font size at one place.
Difference between EM and REM
Now we understand how EMs and REMs work, and how they are different from Pixels. But we have not seen what’s the difference between these 2 units, let’s take a look.
REM’s are always relative to base font size, however EM’s are relative to font size of its parent element
Let’s add a font size on body
body {
font-size: 20px;
}If you look at the hierarchy of our HTML code, body tag is the parent of all DIVs we have added. Adding a font-size on body will change the values of EM units on #box2 because EM works relatively with font size of parent element. However this will not have any impact on other 2 DIVs with values of pixels and REMs.
So formula for calculation of EM’s is actually a bit different from previous one
Desired size in PX / element’s font size in PX = value in EM
Wait, element’s font size? i have been saying parent’s font size till now. Let me clarify.
W3C specification defines EM as: “Equal to the computed value of the font-size property of the element on which it is used.”
If you have not defined a value for an element, it will automatically inherit the font-size of its parent or ancestor element that have a font-size property defined.So if you add a font-size on .bo
#box2, that font-size will be used for calculations of EM unit. And if you don’t add a font-size on .box or #box2, they will inherit font-size defined on body or html, whichever have a font-size defined.
Let’s revise all 4 points once again, that i asked you to memorize for better understanding of EM and REM units:
If you have used EM or REM as font-size of element, or on a parent element, Browser will first convert that font-size in pixels, and then use this font-size for all other calculations.
Bootstrap 4 is following the idea presented by Chris Coyier, “px at the Root, rem for Components, em for Text Elements”. You can read more about this in his original article here: https://css-tricks.com/rems-ems/
About the author
Jaspreet Kaur
Jaspreet is a UI/UX designer with expertise in front-end development for web and mobile. She is passionate about designing solutions through collaboration, iteration, and following the best technology development practices.