Ems create cascading effects, are hard to calculate, and compromise responsive designs; use pixels, percentages or even better use rem!

When it comes to setting font sizes in CSS, there are two relative units that are commonly used: em and rem. Both units are relative to the font size of the parent element, but there are some key differences between the two. In this blog post, we’ll explore the differences between rem and em and when it’s best to use each.

First, let’s define what em and rem are. Em is a relative unit of measurement that is based on the font size of the parent element. For example, if the font size of the body element is 16px, then 1em would be equal to 16px. If the font size of a child element is set to 1.5em, then it would be 1.5 times the font size of the parent element.

Rem, on the other hand, is also a relative unit of measurement, but it is based on the font size of the root element (typically the HTML element). This means that if the font size of the root element is set to 16px, then 1rem would also be equal to 16px, regardless of where it’s used in the document.

So, what are the differences between em and rem? The main difference is that em units are relative to the font size of the parent element, while rem units are relative to the font size of the root element. This means that rem units are not affected by changes in the font size of parent elements, while em units can be affected by cascading effects.

Another difference is that rem units are easier to calculate than em units, especially when dealing with nested elements. Because rem units are based on the root element, you don’t need to calculate the font size of each parent element when setting font sizes.

So, when should you use em vs. rem? Em units are best used for font sizes that need to be relative to the font size of a specific parent element. For example, if you want the font size of a subheading to be 1.2 times the font size of its parent heading, you could use 1.2em for the subheading.

Rem units, on the other hand, are best used for font sizes that need to be consistent across the entire document, regardless of where they’re used. For example, if you want all headings to have a font size of 2rem, you could set the font size of the root element to 16px and use 2rem for all headings.

In conclusion, both em and rem units are useful for setting font sizes in CSS, but they have different use cases. Em units are best used for font sizes that need to be relative to the font size of a specific parent element, while rem units are best used for font sizes that need to be consistent across the entire document.