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 , 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. importance of using 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. The rem (root em) unit is based on the font size of the root element, typically the . Rem Unit: <html> For example, if the font size of the root element is set to 16 pixels, then 1rem is equal to 16 pixels. The em unit is based on the font size of the parent element. Em Unit: 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. Use an online 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. TIP: px-to-rem converter 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">  </div> <div class="sidebar">  </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 is set to use flexbox for layout, and the and are given relative widths using the flex property. .container .main-content .sidebar The uses a font size of 1rem, while the uses a font size of 0.875em. .main-content .sidebar 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 that I have mentioned below. best practices of using the rem and em 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 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. set a consistent base font size 2. Avoid Nesting Em Units When using EM, it's generally best to them too deeply. This can lead to compounding font sizes that are difficult to manage and can cause layout issues. avoid nesting 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. You can use to test your designs on different screen sizes and devices. TIP: Responsively 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.

Personal website

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

When and Where to Use REM and EM Units in Web Design?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps