As front-end developers and designers, it is important to have a good understanding of the different units of measurement available in CSS. These units allow us to specify lengths and sizes for elements in a flexible and scalable way, making it easier to create responsive designs that adapt to different screen sizes and resolutions. Two of the most commonly used units of measurement in CSS are rem and em. In this article, we will explore the differences between em and rem units and when to use each in your CSS.
What is rem in CSS?
Rem is a unit of measurement that is relative to the font-size of the root element. By default, the font-size of most browsers is 16px. Therefore, 1rem is equivalent to 16px. But if you which to change the default root element in your CSS for 16px, you can do so using the HTML element or the :root selector using the following CSS:
CSS
html {
font-size: 18px;
}
or
CSS
:root {
font-size: 18px; /* recommended way*/
}
With this font-size set as the base, you can use rem units to specify lengths that are proportional to this base font-size. This allows you to maintain consistency in the sizing and spacing across your document, regardless of the font-size of individual elements.
Example of using rem units in CSS:
CSS
html { font-size: 16px; }
p { margin: 1rem; }
In this example, the margin of the paragraph element will be 16px because the rem unit is proportional to the font-size of the root element.
Below is a code pen example we created showing how to use rem units in CSS:
What is em in CSS?
Em is a unit of measurement that is relative to the font-size of the parent element. In other words, if a parent element has a default font-size of 16px and you apply a margin of 1em, the resulting margin will be equal to 16px. The em unit is particularly useful for consistent padding and spacing when you want to create flexible and scalable designs that adapt to changes in displays.
Example of using em units in CSS:
CSS
p {
font-size: 16px;
margin: 1em;
}
In this example, the margin of the paragraph element will be 16px because the em unit is proportional to the font-size of the element.
Below is a code pen example we created showing how to use em units in CSS:
Difference between rem and em units in CSS
The main difference between rem and em units is that rem units are relative to the font-size of the root element, while em units are relative to the font-size of the element they are applied to. This means that if you change the font-size of the parent element, the values of child elements specified using em units will also change, while values specified using rem units will remain unchanged.
An example that demonstrates the difference between rem and em units:
CSS
/* Set the font-size of the root element to 18px */
:root { font-size: 18px; }
/* Regular sized card */
.card {
font-size: 1rem;
padding: 2em;
margin: 2em;
}
.card-large {
font-size: 1.25rem;
}
.card-small {
font-size: 0.875rem;
}
In this example, the font-size of the (regular-sized) card element will be 18px because it is set to 1rem, which is proportional to the font-size of the root element. However, the padding and margin of the card element are set in em while the font-sizes of the large and small card versions are set in rem.
Therefore, the text size (font-size) will remain consistent and relative to the root element at 18px. While on the other hand, the padding and margin of the cards will be proportional (increase or decrease) to the specified font-size of each element. You can see that while both are scalable, rem is ideal for consistency and em is ideal for proportionality.
When should you use em vs rem?
Rem units should be used instead of em in most cases to maintain consistency in the sizing and spacing across your document because it is relative to the root element. This in turn makes rem scalable, predictable, and less complex to use than em which makes it extremely useful for maintaining the overall design and layout of your document.
Use em units only in specific isolated use cases when you want proportional sizing and spacing of elements to change based on the font-size of the parent element. However, em should only be used in certain instances due to its complex compounding effect as it can become unpredictable when you have multiple nested parent and child elements. The code pen button spacing example above is a clear example of when you should use em units over rem.
In general, it is recommended to use rem units as your primary unit of measurement in your CSS and to only use em units when you specifically need to create flexible designs that adapt to changes in the parent element’s font-size.
Final Thoughts
In conclusion, em and rem units are both useful units of measurement in CSS, and each has its advantages and use cases. Understanding the difference between em and rem units and when to use each can help you create more flexible and scalable designs that adapt to different screen sizes and resolutions. By using rem units as your primary unit of measurement and only using em units when necessary, you can ensure consistency in your designs and maintain the overall layout and spacing of your document.
