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 is one of the most known units of measurement in CSS. Generally, designers work in . only? The reason is . When you as a developer use 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 but you had set your webpage's font size as then the browser will show your webpage's content in and not in and that's the problem. Although the user can zoom in or zoom out with but still as a developer you should follow best practices. px px So, why not use px accessibility px 20px 16px 16px 20px ctrl + or ctrl - REMs REM stands for . is used to set font size based on the font size of the root element. This means Root EM rem 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 , then what will be the value of ? will be the same as the web browser's default font size. Now, you may be thinking if you had set your HTML element's font size as 100% 1rem 1rem Let's say you had set your root element's font size as and in some other element you want the font size to be but as you are working in rem unit, what will be the rem value equivalent to . Here you have to calculate and it'll be . Now let's tackle another issue. 16px 20px 1rem = 16px(root element's font size) 20px (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 , and then you can just simply divide any pixel value by 10 and you'll get the equivalent rem value. For example, would be , would be . 10px 24px 2.4rem 32px 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 but at root element, it still converts the value to 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. rem rem px 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 is pretty similar to but there's a key difference and I'll show you that difference with an example. EM REM <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. always takes the root element's font size and calculates its value everywhere while 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 unit like margin-bottom, then the 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 , the margin-bottom value is 16px because it's deriving its value using the font size of the root element and in , the margin-bottom, value is 32px because it's deriving its value using its current element's font size which is 2em. REM EM em em rem em 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 doesn't care about your default setting, while rem and em perform similarly. px 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 can be good for layout and spacing but not for font size. I generally use when I need to do some changes to an element that will look the same in every display size like I use in border-radius. px px px When to use ? rem I prefer to use font size, margins, paddings, and almost everywhere as value is derived from the root element, hence it'll be consistent throughout the entire webpage. rem rem When to use ? em I prefer to use whenever the font size is relative to its parent element's font size. em 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 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. media query Originally Published here

Pixels vs REM vs EM: Breaking down CSS Sizes

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps