When to use em, rem, and px in CSS when designing for the web?
If you are a web designer or developer, understanding CSS units is as important as Flexbox, Grid System, and Media Queries in CSS.
There are over 20 length units that are beyond the scope of this article to discuss, but I have referenced some links at the bottom of this page where you can learn more about these units. With that said, in this article, we will only focus on px, rem, and em which are the most used units among designers and developers.
Let’s dive in.
CSS has 2 types of units for measurement which are absolute and relative units.
1. What are absolute units?
Absolute units are fixed values that stay the same no matter what viewport/screen size you’re on.
Examples of absolute units are px, pt, in, cm, and much more.
Absolute units are good if you’re just designing for print, rather than digital design and screens.
Using px
px short for pixel, is the most common and most used unit among all CSS units. 1px is equal to a single dot on the screen. Many web designers and developers use px values in their projects for almost everything size-related when designing for the web, which is not a good practice.
You might have come across a code snippet like below, which uses pixel values for sizing, spacing, etc.
.heading {
font-size: 18px;
font-weight: medium;
margin: 4px 8px;
padding: 2px;
}Or, a code snippet like this:
.card {
width: 200px;
height: 200px;
margin: 0 8px;
padding: 5px;
border-radius: 4px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
font-size: 16px;
}This might be okay for spacing, but it’s no longer recommended to use pixel values for much of the sizing. Also, it does not follow the web accessibility standards.
Pixel values can be used for spacing, border sizing, and box shadows as in most cases we want them to be the same in different devices.
.card {
margin: 0 8px;
padding: 5px;
border-radius: 4px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
font-size: 1rem;
font-weight: medium;
}If you’re designing responsive user interfaces for different screens such as mobile phones, tablets, laptops, and large screens, it’s a good practice to avoid using px for sizing and instead use relative units.
2. What are relative units?
Relative units are scalable units that change their value based on the screen size. These units are good for responsive design and they meet the web accessibility standards.
Examples of relative units are rem, em, vh, vw, vmin, vmax, lh, and, a lot more.
Using em
An em value is relative to the parent element. If a <div> has a font-size of 16px, then 1em is equal to 16px for the parent and child elements.
.heading {
font-size: 1.2em;
font-weight: medium;
margin: 0 8px;
padding: 4px;
}
/* Font-size output: 19.2px */If we don’t specify the font size for the child element, then it will inherit the font-size of the parent element.
.parent {
font-size: 1em;
}.child {
color: #333;
margin: 4px auto;
}/* Output: 1em for both parent element and child element */Using rem
rem is another relative unit for measurement in CSS that is tied to the font size of the root HTML element. Rem values are scalable, which is the perfect choice for responsive design.
.heading {
font-size: 1rem;
}
/* Output: 19.2px */The default font-size of a web browser is usually 16px, therefore 1rem will be 16px and 2rem will be 32px. However, in a case where the root font-size is changed to 10px for example; 1rem will be 10px and 2rem will be 20px.
Example taken from MakeUseOf blog:
<div class="div-one">
<!-- EM -->
<p class="one-em">1 em based on container (40px)</p>
<p class="two-em">2 em based on container (40px)</p>
<!-- REM -->
<p class="one-rem">1 rem based on root (16px)</p>
<p class="two-rem">2 rem based on root (16px)</p>
</div>.div-one {
font-size: 40px;
}.one-em {
font-size: 1em;
}.two-em {
font-size: 2em;
}.one-rem {
font-size: 1rem;
}.two-rem {
font-size: 2rem;
}
Closing thoughts
These CSS units can be used in different circumstances and must be used cautiously when designing for the web. Pixel values are great for spacing and when you know that it must stay the same. The em unit is recommended when there is one nested element, but not for deep hierarchy. Similarly, the rem value is recommended in most cases as it is always scaled appropriately with the default/base font-size.
