\
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 */
}
```

 ![rem and em difference](https://cdn.hackernoon.com//images/KDUtb6NJFHTCTCEFxifRpfv9X1z2-2022-03-27T07:59:53.744Z-cl18zqs28001u0as6al8kcqcj)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.

\
 ![example of how px, rem, em works](https://cdn.hackernoon.com//images/KDUtb6NJFHTCTCEFxifRpfv9X1z2-2022-03-27T07:59:53.746Z-cl18zqs2a001v0as60xe4bmje)After changing my browser's font size to 24px, it looks something like this:

 ![example of how px, rem, em works](https://cdn.hackernoon.com//images/KDUtb6NJFHTCTCEFxifRpfv9X1z2-2022-03-27T07:59:53.747Z-cl18zqs2b001w0as61hbkcwqp)

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](https://devquarters.com/px-vs-rem-vs-em-with-examples)*

Yellow

2022 - HackerNoon Contributor of the Year - Css

2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

Pixels vs REM vs EM: Breaking down CSS Sizes

Too Long; Didn't Read

Company Mentioned

@introvertedbot

RELATED STORIES