What is the difference between the CSS units em and rem?

Well, these two CSS units are quite similar, but they have one fundamental difference.

• The unit em It has the font-size of the current element as its measurement reference.
• The rem unit its size reference is the font-size of the root element, the tag (in English it would be like “root em”).

Now in detail: You already know that em and rem are two relative CSS units. Specifically, they are relative to the existing font-size. However, while em references the font size of the element where that unit is used, rem references the font size defined in the root element.

It looks much better with an example. We start from this markup:

Now we are going to take into account the following CSS:

html { font-size: 16px; } .heading { font-size: 24px; background-color: #ddd; padding: 2em; }

We have assigned our division with class=”heading” a font-size of 24 pixels. On the other hand we have defined a padding of 2em. What do you think the computed pixel padding of that element will give you?

2em in this case equals 24px * 2 = 48px (ie twice the font-size set for this element)

Now let’s see this CSS that is practically the same. We have only placed a padding of 2rem instead of 2em as we had before:

html { font-size: 16px; } .heading { font-size: 24px; background-color: #ddd; padding: 2rem; }

In this case we are using the rem unit and therefore, the padding will be relative to the font-size of the root element of the web page, the tag. We see that for such a label we have set a font-size value of 16px. How much will the padding computed for the heading tag be worth in pixels?

In this second case 2rem equals 16px * 2 = 32px (ie double the font-size set for the element)

I think by now it should be clear enough. As you can see, it is true that the two CSS units serve more or less the same thing and are similar. But using one or the other depends on what reference you want to have when calculating the final sizes.

Now on to your second question what would be the recommendation of use between em and rem?

Well, it depends a bit on how you like to work and what you need.

The rem units are usually much easier to use, in the sense that the calculation of the units always depends on a single element. To put it in some way, with rem you are exposed to fewer surprises.

So when you want to calculate precisely how big an element should be in pixels, it’s much easier to rely on rem, because we only have to look in one place. However when you use em you have to look at what the font size is in the element, which can be variable, depending on many factors such as the tag hierarchy.

As a general rule keep in mind:

• If you are making a style that you intend to use on many different elements, for example a CSS class that you intend to use in several parts, it is better to use rem.
• If you want the size to be variable based on where you’re using the style, use em. Although this second case I see less usual.

Another relevant detail is that users can have different sizes of default fonts configured in the browser (some people want to navigate with larger text sizes to make it easier to read). This browser-configured size is applied to the element, so it would be taken into account when using rem units. In most cases that user setting would also be taken into account when using em, but if you are mixing absolute units for font sizes somewhere and then use relative units in em, the size would not be taken into account. of font configured by the user in his browser.

To decide whether to use rem or em, in my opinion, the most important thing is that you know what these two CSS units mean and what nuances can be applied when calculating the measures.

In conclusion, say that generally designers advise the use of remfor these reasons:

• Because of how easy it is to perform the calculations, since with rem we only have to focus only on the element
• Because rem is capable of respecting user settings in a more faithful way, since the user’s preferences in the browser will always be taken into account.
• Finally, although in some points of the application absolute font sizes are used, if the measurements are specified with rem, we make sure that increasing or decreasing the size of the text in the browser, enlarging or reducing the font, this has a significant impact. more faithful in the measurements of all the elements of the page.

But of course, all this must be understood. Since what interests us is precisely what is achieved thanks to em.