Please stop using px for font-size.

It is totally fine to use pixels for things like spacing: margin, padding, gap; as well as border and border-radius. In those cases it actually might be slightly better to use pixels, because having your spacing not scale up will leave more real estate on the page for the text, which can help with readability. But I think you can use either px or rems/ems for these cases and they are both fine solutions.

The main reason I started using em/rem is because it just looks more consistent since all of the font sizes are multiples of the base font size which makes the design of your site look more consistent. I had no idea about the accessibility benefits but I'm glad I do now! Great video :)

For some reason, I have never even thought about using rem on media queries. But it makes total sense!

🚨 I misspoke at 14:15 - 14:33 -- if you're using the 62.5% hack, I said that "everything on your website will be smaller," but what I meant was the 3rd party packages will be smaller on your website. And you may have to make their sizes LARGER (not smaller) to work on your website

Oh my god, I was searching for how to use Rems and ems a few minutes ago and your video was on the suggested panel! I'm so happy I'm subscribed to this channel!

Love the way you explained every case with examples. Great work. Thank you!

Happy 500k subscribers Coder Coder! <3 I'm so happy for you! :))

Love this content 😍 Well done!

I've been setting html {font-size: 10px} then body {font-size: 1.6rem} etc for a long time. After watching this, I set the browser font size to 'very large' and the font-size on my web page stayed the same! (as I'd predicted after watching your video). But, following up on an earlier comment on this thread, I went looking for a vscode extension and found one that works: "Convert px to rem" v0.0.10 - by gwanduke. So you could write your entire CSS file in px, then select all/some, then Ctrl+Shift+P, then type: convert px to rem of selections. PS. Excellent video, very informative!

It's great to see videos on a tip like this! Thank you 😀

This really explained rem usage clearly and well... Thanks a lot 👍🏿😊

I really liked how you explained the merits. Very well done. On the topic of using var vs SCSS functions; I think the issue root vars solve is of distributed values being harder to modify / maintain / update. root variables help centralize the different values used across the system and SCSS functions are not a replacement to it. Even if you use a SCSS function to convert pixels to rem; you now have hundreds of places where magic numbers are used - 16, 32, 24, 1000, etc. As leads / reviewers; I'd like a more consistent model of defining & standardizing those values. So both root vars and SCSS functions can and should be used together. One (root vars) helps in make change configurable and centralized, the other (functions) makes it consistent and reliable.

This is the best argument I have seen for useing rem over px. Great video

Thanks so much for your time and knowledge - total respect !

I like the content learned new. thank you & keep it up.

Thank you Coder Coder. CSS is my kryptonite so it's great to see videos with detailed explanations and examples. I'd had this vague understanding that I was supposed to be using ems instead of pixels but it's nice to have all the ins and outs. Outstanding video as usual.

Great video! Your tips on responsive design and using rem units really helped me fix scaling issues. Thanks for the clear and practical advice!

I've gone back and forth with this topic in the past, but I'm sticking to pixels these days. I do appreciate that your video covered the often forgotten media query aspect, which I think is important if you do end up using relative units. I disagree with calling font size based scaling a "modern approach", considering that's basically the original approach from before responsive design and variety of devices was even a concern. Zooming in its current implementation is a more recent addition and answer to user needs. It's more accessible to the user, has a default setting and easy on-the-fly adjustment. Zoom is consistent as everything scales equally. The WCAG criteria "1.4.4 Resize" that you referenced in the video, also supports zooming as a sufficient technique. In fact, if you were to take the rem approach and only apply it to font-sizes, you could easily end up failing that criteria due to clipped text in smaller areas. In this regard I think pixels are far simpler to work with, not to mention the work between designers and coders. I recognize that the font size setting still exists and that a select few may use it, but whichever your approach is, you have provided an accessible way to resize. Chances are many such users are already using the Scale setting in Windows for example as well. They have plenty of good options available :)

NIce!!! Thankyou!! You are the first Female coder on YouTube that I saw. I just Subcribed as well one again thankyou!!

1. Heading size in REM. Does having a full-screen title really improve accessibility? The size of the title itself is sufficient, there is no need to increase it further. So using REM matters. 2. Use REM to determine width. It makes sense in the demo, but if you're designing a page where you want 300 pixels, you really want 300 pixels there. The content part on the left may not fit what normally fits. So using REM matters. 3. Using EM in media queries also matters. If the desktop design is supposed to be two columns, why should it be affected by the font size? It works in some cases, but really everywhere? This way I might see the tablet version on my desktop with enlarged font. So use REM and EM, but wisely.