Difference between px vs rem vs em

2 min

December 12, 2021

Table of contents
  1. CSS Units
  2. Pixels
  3. Rem
  4. Em
  5. Why use relative units?
  6. Extensions recommended
CSS units

CSS Units

In CSS you can find different units of measurement for all the elements that make up a document <html> the most used by all are the px , however there are many more as explained in MDN. This time We are going to focus on the main differences between absolute units and relative units em and rem .

The absolute units do not change in size, while the relative units change according to the font size of the parent element.

Pixels

The pixels are fixed units within the document and are not relative or depend on other units or font variations, in the following example we have a container with a class called .units of 200px wide and a height of 100px.

.units {
  width: 200px;
  height: 100px;
}
200px x 100px

Remember that by default most browsers have a font-size: 16px in the root element<html>for this case in which we are using absolute units so the font size of the root element changes, our container will remain with the same width and height defined initially.

Rem

The rem units are units relative to the root element of the <html>, remember that most browsers have a font-size: 16px, going back to our example of the container in which the size is 200px wide and 100px high, now that you mean this is relative to the root element, this means that 1rem = font-size of the root element.

1rem = 16px  //When the font size of the root element has not changed.

In the following example we will convert from px to rem, as you can see our container still keeps the width and height initially defined 200px x 100px since the font size is 16px.

.units {
  width: 12.5rem; // 12.5rem = 200px / 16px (font size of root element)
  height: 6.25rem; // 6.25rem = 100px / 16px (font size of root element)
}
12.5rem x 6.25rem

Now in the case that our source of the root element changes for example to 24px our container will have the following measures

.units {
  width: 12.5rem; // 12.5rem * 24px (new font size of root element) = 300px
  height: 6.25rem; // 6.25rem * 24px (new font size of root element) = 150px
}
12.5rem x 6.25rem

As they are units relative to the size of the font of the root element, this value is multiplied by the newly defined font value, which allows us to preserve the space of each of our elements.

Em

The em units are units relative to the parent element, going back to our example of the container in which the size is 200px wide and a height of 100px, this element has a parent container that has a defined font-size: 14px, this means that 1em = 14px for all units of the child element.

1em = 14px  //The font value defined for the parent element.

.units-parent {
    font-size: 14px;
}

.units {
  width: 14.2857em; // 200px / 14px (font size of parent element) = 14.2857em
  height: 7.1428em; // 100px / 14px (font size of parent element) =  7.1428em
}

font-size: 14px

14.2857em x 7.1428em

In this case, everything depends on the parent, in the previous example a font size was defined in absolute units (px). However, this does not mean that em units cannot be used with units rem . Yes, you can use both in the same context, for example, the root element has a font size of 16px and the parent element has a font size of 0.875rem which would be 14px, then we can deduce that the elements that are inside the parent, their font size will be 0.875rem which would be 1em, and every time the font size of the root element changes all the elements below it will change for example.

16px = 1rem  //Value of the root element font.
0.875rem(14px) = 1em //Value of the parent element font.
.units-parent {
    font-size: 0.875rem;
}

.units {
  width: 14.2857em; // 200px / 14px (font size of parent element) = 14.2857em
  height: 7.1428em; // 100px / 14px (font size of parent element) =  7.1428em
}

font-size: 0.875rem

14.2857em x 7.1428em

If the font size of the root element changes to 24px then

24px = 1rem  //Value of the root element font.
0.875rem * 1rem = 21px //Value of the parent element font.
.units-parent {
    font-size: 0.875rem;
}

.units {
  width: 14.2857em; // 14.2857em * 0.875rem (new parent font size relative to root element font size) = 300px
  height: 7.1428em; // 14.2857em * 0.875rem (new parent font size relative to root element font size) = 150px
}

font-size: 0.875rem

14.2857em x 7.1428em

Why use relative units?

Today all websites must be accessible to everyone, and one of the many practices to achieve this is to use relative units, because today there are different assistive technologies so that users can modify the base styles of an application web among those the font size, using this type of relative units ensures that the elements are displayed correctly on all devices. As application creators, we must ensure that each of our creations can be used by the vast majority of the worldโ€™s population, always taking into account accessibility (A11Y), which is very important for every business.

One of the extensions in VScode that help to be more productive and not have to do operations and conversions by hand is px to rem , you can read the documentation and configure it according to your needs.


Camilo Rincon
Camilo Rincon

Multimedia Engineer, Software Engineer front-end, entrepreneur, creating and sharing experiences and resources for developers.

ยฉ 2022, CARLMULTIMEDIA, from Colombia ๐Ÿ’›๐Ÿ’™โค๏ธ to the World ๐ŸŒŽ