Why You Should Use REM Instead of Pixels 

something I wish was mentioned in the video is media queries. When working in rem layouts, the correct way to do media queries is by using ems for max/min-width queries. Otherwise the media query calculations will be way off when the font is resized, which I have a feeling is a more common thing than people think. I'm just talking about using ems for the @media (min-width: ___ems) {} part, not the rules within the query. These media query properties like min/max-width ignore any font size you've set on the :root/html. ems are sized relative to their parent, so in the case of media queries there is no parent and they therefore get a font size of `medium`, which is usually 16px... even if you've put a :root font size of 62.5%, 14px etc. So things will get crazy if the user has changed their font size preference. Using ems to declare media queries is how to get your layout to act as it should regardless of screen size, zoom setting or font size preference. So let's say you had a media query: @media (min-width: 1024px) {} and wanted to convert it to your rem layout, you would divide 1024px by the typical font size of 16px, making: @media (min-width: 64em) {}. Now things will work as expected all the time, everywhere.

I believe most people I know don't even know they can change the browser default font size. They simply use Ctrl + mouse-scroll-wheel to zoom the whole page if needed.

I'm basically strictly backend & devops, but it's videos like this that help the little bit of frontend and CSS I end up writing better. Thanks! xD

I've been coding for a few years now, and yet I have never known this. Thanks for the recommendation, RU-vid! Great and explanatory video!

I have used every approach you mention here for years, except for your suggested one. Will start applying this everywhere. Thank you!

Thanks for making this, it really cleared things up.

Always so amazing and super cool explanaition

Thank you! I understand the importance of accessablity, but still struggle with the relations between px, em, rem and root font size. Now it makes perfect sense. Now that I know what to do, I have a whole lot of css to update.

Thanks so much! I've been trying to start using rem but I gave up every time because of how cumbersome it was to calculate it. This is a huge game changer.

Great video. I like using `em` for margin for typography. If I have something like `font-size: clamp(1.6rem, 3vw, 4.8rem)` then I can use `margin-bottom: 0.8em` to keep my spacing consistent. This obviously only works for some types of designs, but can be really useful!

Here’s what I use for sizing everything on my website: calc(calc(var(-phone-factor) * 10px) + calc(var(-desktop-factor) * 20px) That’s basically saying if it’s on mobile do 10px and if it’s on desktop do 20px, and those factors default to 1 on one based on your user agent but once your browser receives the website some client code adjusts them to fit the displays conditions best. It calculates them by clamped linear interpolation of your screen size compared to a phones screen size and a computers average screen size and using a class on the body past a certain threshold it will change elements styles drastically to adapt to what can be considered definitely a phone screen, allowing for the site to become styled like an app would with different options available like drop downs instead of toolbars

Thank you, very useful!

Great video!

This is excellent. I started adjusting my browser font size when my eyesight started deteriorating I'm my 40s. That changed a lot about how I wrote and understood CSS.

Great video like always! However I would recommend a couple things: 1. Don't touch the base font-size because, like people have already commented, its a legacy feature and there are easier ways to deal with calculating px to rem, but I will get to that in point number 2. Before going there tho, I'd like to point out that nowadays many designs follow the "dividable by 4"- format with spacing, where every spacing is dividable by 4. A good example of this is the very common Tailwind and its scaling system: '1': '8px', '2': '12px', '3': '16px', and so on. These scales easily turn into 0.5rem, 0.75rem and 1rem. These are not only easy to remember values, but also super easy to work with and still keep a consistent design going. 2. Okay now to the "Make life easier" portion: There is an extension called "px to rem" by Marco N in VSCode that automatically changes the px to rem with one click so you never have to calculate the values because the plugin does it for you. This is also extra handy when you have values like 243px that calculates to 15.1875rem, which is (in my eyes) a terribly ugly number, so maybe I will round it down to 15rem so its equal to the scaling I'm using. In the end there is really not a THE correct way to code, everyone does how they feel is right for them, these are just my thoughts 🙂

To make the discussion more interesting, some thoughts for you. On new mobile devices it doesn't matter if you use px/rem/em, because increasing the font increases all units (even px)! I tested this on different phones and different browsers. I myself did not know that the topic has changed so much! It is a well-known recommendation to write the entire page in em/rem, because a user may want to zoom in on the font-size and then they will have zoomed in on the entire page. So why doesn't that user use zoom? After all, the effect will be almost identical. And what about other units. For example ch. What if a user walks around the web, where 99% of the pages are in px and are not susceptible to font-size changes (annual css surveys show that px is the most frequently chosen unit). Then either such a user will use an additional plugin, maybe set himself a default zoom, or use another zoom application. And 99% of the pages will be zoomed, but yours will be zoomed 2x, because you have additionally zoomed him on a font-size basis. Why do people worry so much about the ability to enlarge font-size, but at the same time overlook the fact that the user may want a dark background, serif font, bold text, maybe black text on yellow background etc.? Changes to most of these options are either provided by the browser or additional plug-ins. In my opinion, this is where it should go. Ps. REM/EM are super useful and give us super options. But font-size changes by the user these days doesn't seem to be the most important one.

Words of wisdom.. Subscribing the channel definitely..

I mean holding ctrl and scroll is faster for zooming because not every site is going to use rem, so kinda fighting a losing battle.

thank you for your pedagogy, !

Useful. thanks for sharing.

Thank you for this explanation none manage to explain

You should em for padding (or margin) like wise you can une for example 1em for padding and change the font size of the button in rem them the padding will adapt without changing its size. It’s very useful 👌

I've been "that guy" on all sorts of forums and blogs where they end up posting some lengthy explanation that goes "NEVER use pixel, ALWAYS use rem!!" You are the first person I see that cuts to the chase and actually distill ALL information down to ONE conclusion: One can change the preferred font-size in the browser and OS, therefore scale those values that SHOULD scale when you change said preferred font-size, with REM and EM. I've seen people argue that you should substitute EVERYTHING for rem. As such, I've seen 0.1rem been used as a substitute for 1px. Their explanations never go beyond "because it scales", or "because a CSS px isn't a physical pixel". Both of which are absolute non-reasons when all you want is a thin border... I'm going to bookmark this one to link to it in those replies of mine. Again, you are the first person to present an objective view and who doesn't add unnecessary details like niche use-cases. Thank you :) 💙💜🧡

I never post two comments under the same video, but here goes: For those that have started to argue that changing the root font-size is a legacy feature, there's also a thing called maintainability. Should you code your website cleverly with there relative values, and Mr. Big Boss comes and demands all the fonts be bigger, it is YOU that will be happy when you're literally done in a handful of keystrokes. Now add the rem-stuff to your boilerplate and bam, you have the benefits on each and every project going forward.

You're providing very useful information. Please try to upload more videos. Thank you ❤️ Love from Pakistan ❤️

subscribed, dang this is new to me.

Nice! You made this into a full length vid! Loving your work - keep it up. For so many professionals this just "feels natural", but there are very few who can explain the "why" in a way you do. Will use this as my go-to reference video when I see people defining stuff in px, pt etc. 👍

This year I was finally able to implement ems and rems properly on a complete UI rebuild of one of our large production websites. It's so exciting and feels so nice to finally be building on a solid foundation. Seeing things act properly when I resize my browser font size feels great, rather than before where the pixels only played nice with simple browser zooming (ctrl +)

Browsers use scaling for the page, and as I see from my research, rems rarely being used even on most popular websites, Google included.

Thank you sir for that eye-opener. 🙏. But, for clarity, setting the root font-size to 10px or 62.5%, does not affect the use of units such as vw, vh, cqw, cqh, vmin, vmax, etc.? Does it?

Tanks for this clear and to-the-point explanation! Question: Wouldn’t it be easier to use 6.25% on the root element and then use rems as if they were pixels?

Makes sense

I don't agree with the "full rem" approach. Take gutters for example : If gutters is calculated with rem, a bigger font size results in larger gutters ... and tighter elements if the page is constrained by window width. So, the font will be bigger, with smaller spaces for text, resulting to less readable paragraphs. Relative units are importants, but not with a no-brainer "full rem" way in my opinion.

underrated content!

Cool video! I've never considered browser font-size settings before, so new day === new knowledge)) But, I would make a comment about cases where using rem is not an option At my work, we are utilizing Browser portal technology where multiple separate "extensions" (separate es6 modules) might be lazy-loaded/unloaded at random time, so if each of them someway redefines or at least assumes a certain value of the base font size and use rem, then it is getting super unconfident to alight them. So, as a summary from me, when you can control the whole site (or widget e.g. in ) using rem is definitely a way (it provides many cool features like the video I'm commenting), but in complex solutions, it might be complicated to align all sources for base the font-size, and maybe using px is a much reliable thing. So, if you struggle to make everything work in complex cases, just use px, it is ok too 😊😊

1. Well, now I have to test my layout on many arbitrary font sizes, just in case an user might override it. This will require a ton of additional hacks for the kind of complex UIs that I usually make. 2. I disagree with you, I will always override the root font size in my CSS. Visually impaired users will use "zoom" feature, as they likely need everything bigger, not just fonts. Why would they ONLY want fonts bigger? Makes no sense.

I think your description of EM units is a little off. EM is calculated as a proportion of the current font-size. If the font-size of the current block is 16px, 1em is 16px. It's that simple. Great for creating inline icons using SVGs.

Instead of overrideing the standard messurement of the browser I suggest just learning the learn the 16 table. I understand that calculating 10s could be easier for some but calculating in 16s aren't that hard either as you would mostly just have to add 4 (.25) or 8s (0.5) to the base walue so 20px becomes 1.25 rem and 24px becomes 1.5 rem and then 32 (2 rem) and 48 (3 rem). If you're the single developer on the project then by all means do what comes natural to you but as a developer on a team changing standard values in one project and not all just makes it harder do do your job correct as you need to adjust to this change or figure out why sizes aren't behaving as they should.

Why don't google Chrome and Firefox change REM instead of PX?

I'm probably not the first one to comment something like this, but-. I've been coding frontend for about 5 years now and I have NEVER taken this into account as much as I should have. Granted, calculating REM values can be a pain, but it does make the site more responsive and way more accessible.

But REM values render different sizes in scaling ie. 120dpi, 150dpi while pixels always show the same size. Try setting REM for laptops (150dpi in Windows 10) vs desktops

So because most websites cannot be relied upon to avoid pixel font sizes i think most users just zoom their browser window

There is an article online that exactly explains why rem ist not necessary in modern browsers - they will account for base sizes automatically by modifying the pixel raster. This is a misconception across the web. Please check this. Also using rem for everything - you’ll have to adjust values with 6 digits to hit a design… 😢

16 is fine. 0.5 = 8, 0.375 = 6, 0.25 = 4. These numbers become second nature and it's a lot less fiddly than doing, say, 1.9rem. Sure that's 19px in your scenario, but it still feels like you'll end up with a million different sizes I declare all of my values in the root. Generally md, lg, xl, sm, xs etc which are calculated off of rem = 16px and can be used anywhere. SASS mixins make life a hell of a lot easier if you go that route, but they're almost obsolete with the proposed CSS changes coming in the next standard

px or ems or rems or whatever, people overall developers don't know css and the site look crap. and mui still using px with spacing option, so really i don't see that for casual user or casual developer px or rems make some sense. I've worked on project with all rems and project all px, and it's the same...

If you change 1rem from 16px to 10px, why would you stop here? In this case it would be even easier to just set 1rem = 1px and to use rem as pixel without necessity to divide by ten

But what about google search using pixels? Why visually impaired can scale it up, but they cannot do that for your site?

I prefere vw and vh, or in rare cases % over both px and others

discord ????

just press ctrl + to scale UI. nobody even know about this setting should I test my UI in multiple root fornt sizes? It's complicated. What if a new browser appear with another default font size? Nonono, please, don't confuse devs

What if I want to make website for people with eyes? Like making a website is already a huge waste of money, and by caring about font size you just wasting your time for the less than 1% users of the web. That's just stupid.

Losing my pixels religion

use tailwind

This is such bad advice. Just learn rems. Don't fuck up standards by changing a rem to be smaller. You don't need pixels. You just use rem. There is no calculation you need to do.

Stop using css, use tailwind instead

nice video