7,642 reads
When and Where to Use REM and EM Units in Web Design?
by SidApril 25th, 2023
Too Long; Didn't Read
Using REM and EM both together in your web design is the best way to use these relative units.
Whether you are designing a landing page or a website, one of the most important considerations that you have to make before you start is choosing the units for measurement for your design elements.
There are a number of units that you can use to size elements in CSS. The most common are pixels, but the use of relative units, in particular, rem and em is increasing lately. And, for a reason!
Sizing elements in em and rem help developers make consistent-looking web designs across screen sizes easily and also makes the website accessibility friendly for the users!
We all know the importance of using em and rem, but when it comes to using them, we all get confused with which elements to size in em and which to size in rem and also where using absolute units like pixels would be a smarter choice than relative units like em and rem.
In this article, I will explain when and where to use em and rem units in your web design and also where you will be better off using pixels for sizing.
Before we dive into the specifics, let’s first quickly talk about how relative units rem and em work in CSS.
Rem Unit: The rem (root em) unit is based on the font size of the root element, typically the <html>.
For example, if the font size of the root element is set to 16 pixels, then 1rem is equal to 16 pixels.
Em Unit: The em unit is based on the font size of the parent element.
For example, if the font size of a parent element is set to 16 pixels, then 1em is equal to 16 pixels.
To learn more about the ems and rems, refer to CSS values and units on MDN docs.
Now that we have a basic understanding of rem and em units, let's explore their usage in web design.
When to Use REM?
You should use rem when you want to size the element in correspondence with the size of the root element.
Here are some specific situations where using the rem unit makes the most sense:
1. Setting Font Sizes
When setting font sizes, it's generally a good idea to use rem units. This allows the font size to scale with the rest of the site, making it more responsive and adaptable to different screen sizes.
2. Layouts With Flexible Widths
If you're designing a site with a flexible width, using rem units for layout measurements can be a good idea. This ensures that the layout will scale with the font size, making it more consistent across different screen sizes.
3. Accessibility
Using rem units can also improve accessibility for users who rely on screen readers or have other visual impairments. This is because the font size can be easily increased or decreased without affecting the layout of the site.
TIP: Use an online px-to-rem converter instead of doing the pixel-to-rem calculation on the calculator app on your phone or computer. It would make the job easier and also save a lot of your time.
When to Use EM?
EM unit is used in situations where you want to create a consistent design hierarchy.
Since EM units are relative to the size of the parent element, you can define the size of the main container and let the blocks and other elements inside that block adapt the sizes in accordance with the main container size.
Below are some specific situations where using the em unit makes the most sense:
1. Text Styling
When styling text, em can be useful for creating a consistent hierarchy. For example, if you want your headings to be twice the size of your body text, you can set the heading font size to 2em.
2. Component Sizing
When sizing components, em units can be useful for creating consistent proportions. For example, if you want a button to be twice the height of the text next to it, you can set the button height to 2em.
3. Layouts With Fixed Widths
If you're designing a site with a fixed width, using em units for layout measurements can be a good idea. This ensures that the layout will remain consistent across different screen sizes, even if the font size changes.
When to Use Both EM and REM?
Using both em and rem together to size different elements in your design is the best way of using these relative units. How?
Let’s understand it with an example.
Let’s say you want to create a two-column layout where the sidebar is always one-third the width of the main content; you could use a combination of rem and em here.
Talk is cheap. Show me the code.
Here you go!
HTML
<div class="container">
<div class="main-content"> <!-- main content goes here --> </div>
<div class="sidebar"> <!-- sidebar content goes here --> </div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
font-size: 16px;
}
.main-content { flex: 2; font-size: 1rem; }
.sidebar { flex: 1;
font-size: 0.875em;
}
In this example, the .container is set to use flexbox for layout, and the .main-content and .sidebar are given relative widths using the flex property.
The .main-content uses a font size of 1rem, while the .sidebar uses a font size of 0.875em.
This means that the width of the sidebar will always be one-third of the width of the main content, regardless of the overall font size of the site, and the fonts in each of those parts would also scale accordingly.
Now, it would be pretty much clear for you when and where to use em and rem to size the elements in CSS.
But before you go, refer to the best practices of using the rem and em that I have mentioned below.
Best Practices for Using EM and REM CSS Units
When using rem and em units in web design, there are some best practices to keep in mind:
1. Use a Consistent Base Font Size
It's important to set a consistent base font size for the root element when you are using REM. This allows the rest of the font sizes on the site to be easily scaled up or down as needed.
2. Avoid Nesting Em Units
When using EM, it's generally best to avoid nesting them too deeply. This can lead to compounding font sizes that are difficult to manage and can cause layout issues.
3. Always Test Across Different Devices and Screen Sizes
As with any web design technique, it's important to test your web page across different devices and screen sizes to ensure that your designs are consistent, responsive, and accessible to all users.
TIP: You can use Responsively to test your designs on different screen sizes and devices.
Conclusion
So there’s no one best CSS unit that you can swear by to create all your web designs. Different CSS units have their own unique properties so that they can be used to solve unique problems for your own web design-specific needs.
So having an understanding of all of them, and specifically, rem and em relative units, is crucial for all front-end developers.
I hope that this article gave you a pretty good idea about when and where you should use rem and em in your web designs.
Below are some FAQs, which are there to answer your further questions. If you have any more questions feel free to drop them below or ping me on my socials.
FAQs
Can I always use pixels instead of rem and em units?
While you can use pixels for font sizes and layout measurements, using relative units like rem and em is generally recommended for better responsiveness and adaptability.
Are rem and em units supported in all browsers?
Yes, rem and em units are supported in all modern browsers.
How do I set the base font size for the root element?
You can set the base font size for the root element using CSS, like this:
html { font-size: 16px; }
Can I use both rem and em units in the same design?
Yes, you can use both rem and em units in the same design for more responsive and adaptable layouts. In fact, it is the best way of using these relative units.
How do I test my use of rem and em designs across different devices and screen sizes?
You can test your designs across different devices and screen sizes using browser developer tools or other available online testing tools.
L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
TOPICS
THIS ARTICLE WAS FEATURED IN...
RELATED STORIES
100 Stories To Learn About Html5 #html5
May 07, 2023
10 Things You Probably Didn’t Know about Sass #css
Jun 29, 2017
