Pixels vs REM vs EM: Breaking down CSS Sizes

Should you use px or rem or em?

PX vs REM vs EM with Examples

I'm so confused... what should I use?🤔 Let's find out

When I started learning CSS, I came across all these units of measurement and I got a lot of questions in my mind like

• Should I only use px?
• Is there any difference in user experience?
• Is there any convention of when to use what?

So, let's start with Pixels, and at the end, I'll show you how these 3 units perform differently with a basic example.

Pixels

px is one of the most known units of measurement in CSS. Generally, designers work in px.So, why not use px only? The reason is accessibility. When you as a developer use px as a unit for font size, line height & spacing, or element sizing, you are explicitly setting the sizes of all those things irrespective of what the user has, as a default setting. For example, let's say if there's a user who has set their browser's font size as 20px but you had set your webpage's font size as 16px then the browser will show your webpage's content in 16px and not in 20px and that's the problem. Although the user can zoom in or zoom out with ctrl + or ctrl - but still as a developer you should follow best practices.

REMs

REM stands for Root EM. rem is used to set font size based on the font size of the root element. This means 1rem = font-size of HTML element

If you want to change your webpage's font size in every element, then just change the root element's font-size

Now, you may be thinking if you had set your HTML element's font size as 100%, then what will be the value of 1rem?1rem will be the same as the web browser's default font size.

Now let's tackle another issue. Let's say you had set your root element's font size as 16px and in some other element you want the font size to be 20px but as you are working in rem unit, 1rem = 16px(root element's font size) what will be the rem value equivalent to 20px. Here you have to calculate and it'll be (20px/16px) = 1.25rem.

As you just saw, whenever you want to get an equivalent value of px in rem, you have to do this complex calculation. So, to ease it a bit what you can do is just set the root element's font size as 10px , and then you can just simply divide any pixel value by 10 and you'll get the equivalent rem value. For example, 24px would be 2.4rem, 32px would be 3.2rem.

But, this method causes a problem that we have already faced with pixels, the problem is accessibility.

You may be wondering how it affects accessibility?

You are setting your element's property in rem but at root element, it still converts the rem value to px value. But wait, there's a workaround through which you can have your ease of calculation and users can have their accessibility. You can just set your root element's font size as 62.5% and it's done.

Now, you may be wondering how does it work and why 62.5% and not any other value?

Now, let me answer that. To keep accessibility, you need to set the root element's font size in percentage but we also want the value of font size as 10px so that we can have easy calculations. To make this happen we should do this --> (10px/16px)*100 == 62.5%.So, that's how the magical number originated. But wait, all of this is not ideal, the ideal situation would be to set the root element's font size as 100% and do the complex calculations and here we can take the help of CSS-preprocessors like SASS, LESS, or something else. With the help of these CSS-preprocessors, we can have a function that can calculate all these numbers for us and we don't have to worry about anything😁.

Now, at last, let's talk a bit about EM.

EM

EM is pretty similar to REM but there's a key difference and I'll show you that difference with an example.

  <h1 class="rem">REM VIEW</h1>
  <p>REM TEXT</p>

  <h1 class="em">EM VIEW</h1>
  <p>EM TEXT</p>


html {
  font-size: 100%;
}


.rem {
  background-color: yellow;
  font-size: 2rem; /* here 2rem = (16*2==32px) */
  margin-bottom: 1rem;
}

.em {
  background-color: orangered;
  font-size: 2em; /* here 2em = (16*2 == 32px) */
  margin-bottom: 1em; /* here 1em = 32px */
}

So, let's get to the explanation. Here, In the above example you can clearly see that with the em unit, the margin-bottom is twice the rem unit's margin-bottom. This is where the em and rem diverge. REM always takes the root element's font size and calculates its value everywhere while EM when used with the font-size property it'll always take the parent element's font size as root value but if you'll use some other property in the current element with em unit like margin-bottom, then the em unit will calculate its value keeping the font size of the current element as the root value. That's why in the above example, in rem, the margin-bottom value is 16px because it's deriving its value using the font size of the root element and in em, the margin-bottom, value is 32px because it's deriving its value using its current element's font size which is 2em.

So, now let's see an example of all these 3 units and how they differ when a user changes its web browser's font size.

  <h1 class="px">PX VIEW</h1>
  <p>PX TEXT</p>

  <h1 class="rem">REM VIEW</h1>
  <p>REM TEXT</p>

  <h1 class="em">EM VIEW</h1>
  <p>EM TEXT</p>


html {
  font-size: 100%;
}

.px {
  background-color: green;
  font-size: 16px;
  margin-bottom: 16px
}

.rem {
  background-color: yellow;
  font-size: 1rem; /* here 2rem = (16*2==32px) */
  margin-bottom: 1rem;
}

.em {
  background-color: orangered;
  font-size: 1em; /* here 2em = (16*2 == 32px) */
  margin-bottom: 1em; /* here 1em = 32px */
}

My browser's default font size is 16px.

After changing my browser's font size to 24px, it looks something like this:

You can clearly see that px doesn't care about your default setting, while rem and em perform similarly.

If you have read this far, then congrats 🎉 you did a great job. Now there's one thing I haven't covered yet and that is when to use px, rem, and em. So let's do this now.

When to use px?

px can be good for layout and spacing but not for font size. I generally use px when I need to do some changes to an element that will look the same in every display size like I use px in border-radius.

When to use rem?

I prefer to use rem font size, margins, paddings, and almost everywhere as rem value is derived from the root element, hence it'll be consistent throughout the entire webpage.

When to use em?

I prefer to use em whenever the font size is relative to its parent element's font size.

Conclusion

At the end of the day, it's you who has to decide what unit to choose and it also depends on whom the website is going to be, maybe sometimes the accessibility is not that important then you may only use px.

There's one more thing to cover and that is media query and I'll cover that in another blog post cause I don't want the post to be too long. This post may get updated in the future if I get some more info on this topic or something changes in CSS. But that's it for today, I hope you like this post. Thanks again if you read it this far and If you have any feedback/suggestions please dm me on my social media profiles, I'd love to take your feedback and learn from it.

Originally Published here