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.
I’d argue padding and margin should use rems as well since they are often meant to be proportional to text. Someone who needs to set their default font to 32px probably also want spacing between paragraphs to be increased. Also, the way to deal with conversion between pixels and rems is to stop thinking in pixels and use rems. If you’re worried about rounding to full pixels, use one eight granularity for the dimension (i.e. only .0, .125, .25, .375, .5, .625, .75 and .875 fractions; you can use one 16th but it’s harder to remember all the fractions).
No it's not. If you use absolute units for spacing, your website is gonna look different on different viewports, so it's gonna look different on the desktop with a widescreen monitor then on a small 1366x768 laptop screen and again different on a mobile screen. Currently I'm using px only for setting min and max w/h, but I'll probably switch even those. Don't use pixels.
🚨 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.
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 :)
me too, i always use rem when possible but maintain media querries in pixels :D but why frameworks like bootstrap uses pixels ? or newer bootstrap does not ? or bootstrap is a dinosaur ?
@@peterpancikbootstrap is a dinosaur. It used to be essential, but I haven’t heard of anyone using it these days now that we have flexbox and grid in our toolbox.
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!
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!
Thank you for considering accessibility in this video! I AM someone who uses the built-in font size setting in my browser for accessibility reasons and always wondered why it didn't always affect things in the way I expect. I see many comments from viewers who don't understand why someone would use the font size setting rather than just zooming. For my own needs, the answer is that the the font size setting's intended behaviour specifically involves increasing the font size across all websites. Zooming w/ ctrl+ or a page's menu increases the size of everything, which is not always what I want. It also functions on a per-website basis unless you use a global zoom setting, which is right next to the increase font size setting in the browser I use anyways. It's not any more work to set a global font size vs a global zoom setting on my end as a user, and font size is more likely than per-page OR global zoom to give me the behaviour I want. If you just need to zoom in to get a better view of one particular thing every so often, per-page zooming works just fine. For someone who needs or prefers ALL fonts to be a certain minimum size across all websites, without significantly impacting the viewing experience of other elements of the page, setting the font size setting in browser is a much better choice. If you read the Josh Comeau article Coder Coder linked, his article explains much the same thing as I've found through my own personal experience.
Thank you for sharing your experience! I hope that even though a lot of people are resistant to using rem, that my video can at least help educate those who are willing to change the way they set font-size.
@@TheCoderCoder I really appreciate it! I am new to web development and in addition to my *own* accessibility needs, I think it's fascinating to learn all the ways I could be able to make things that are accessible to as many people as possible! There's so many reasons standard practices shift over time to accommodate different usage needs anyways, imo accessibility is something people should strive to see as simply another creative challenge to learn about
The "rem" function is a great idea. One improvement though, instead of concatenating with "rem", better multiply by 1 rem, so that the result is treated as a unit "rem" rather than a string "rem". Instead of "math.div($pixel, 16) + rem;" use "math.div($pixel, 16) * 1rem;". That way, you can reuse the function in other Scss calculations.
I started building a new Drupal theme for the first time in 10 years and came accross rems in the coding standard. Your video really helped me understand how to use them and why this is important. Thank you.
It took me 10 minutes until I noticed you weren't Kevin Powell, excellent video. Thank you for explaining the maths I always thought rems and ems were just voodoo magic numbers.
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.
My mother knows how to zoom in but prefers a larger font size. Some people said users can just zoom in but I find it a bit annoying when having to swipe left and right continuously just to read text on a website. That's why browsers support changing font size.
Hello! I'm new to English so I'll try my best to show my gratitude, I must have to get advanced in english and consume much about programming, because here in Brazil the resources are rare. I think I understand what you propose to show in this video, I like the level of English it's easy to know what you are talking about. So starting today I will just use Rem/Em, thanks too much for this video! Peace ✌️
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.
So the main thing isn't just not using Pixels, the main thing is not to set default font size for the website? So that the fonts can be changed from the browser
Thanks for the video Coder Coder. I'll admit that I've had trouble absorbing the use of em's and rem's. However, I have been using such unit of measurements more and more. I never thought to use em's and rem's in media queries. You've given me something to think about.
That was interesting video. As a backend developer who only knows basics about frontend stuff I have been always wondering why some websites that render correctly on desktop mix way too large font with way too small font. Seems like the answer is that they mix px and rem. If you make more design videos you could even enter smartphone's DPI and font size settings to your dev tools for even more dramatic effect.
I still feel like designs should stop using tiny fonts and then this would not really be a thing anymore. This came about because some designers insist on using very tiny fonts to cram more into a smaller space. I have worked on mobile apps where the UX designer insisted on using 11pt fonts to fit more. The designs were so dependent on fitting things into a small space like an e-commerce product list page that we had to purposely block the ability for the font size to increase. Not saying that was the right thing to do. Just that I really think this depends and isn’t an end all rule. Px still exists as an option for a reason and telling designers/developers to not use it anymore feels odd to me. Of course the designs should adapt as much as possible and every effort should be made to support this. That’s not always possible however and sometimes we have to pick our battles with UX and business partners. If designs didn’t insist on using such tiny fonts to begin with this may not even be much of a concern anymore. The reality is if a design feels it needs 11pt fonts to work then allowing the user to blow that up to 24pt or 32pt font size is likely going to do a lot of damage. If the design works well with adaptable font sizes then it probably shouldn’t be using 11pt fonts in the first place because it’s unnecessary. This all depends on the primary of the project. Is it purely content based or more design structured. A blog, wiki or news site absolutely support this. E-commerce, well that may be a bit more challenging and this might become more of a well it depends.
13:19 It seems like there is a mistake in the explanation of the ‘62.5% hack’. In @media (width < some relative size) {}, the rem and em units inside the condition are calculated based on the browser’s default font size (16px). Even if you set the HTML font size to 62.5%, the values inside the parentheses will still work according to the browser’s default font size. Therefore, even when using the 62.5% hack, you still need to use 62.5em or 62.5rem in media query conditions. Your media query operates at 1600px.
Thank you for speaking out on this. Being a legally blind developer, I can validate what you’re saying 100%. There is absolutely no reason nowadays to constrain layouts and font sizes to pixels. Somehow devs think that their job is to copy a Figma template. No. Our job as devs is to care for the user and recognize the designer was just using a tool the way they knew how. Maybe the devs who can’t even think outside the pixel-size box (pun intended) will be the first to be replaced by AI!
i cant remember the last time i used pixels for anything other than as a 0px minimum size or a 1px border or outline... i do everything like margins padding or gap with em or rem, ocassionally for vertical padding i will use vh instead.... with fonts its always em or rem, sometimes i will use % of the parent element.... when im defining a universal base size for different repeating text tags i always use a font size with a min size clamp so i dont need to redo anything with media queries for them.... yeah the 62.5% trick does have compatability issues when it comes to third party packages, simple solution there is i dont use any third party packages, theres nothing that bootstrap, tailwind or any other package can do that I cant if i take the time to sit down and do it
Nice video. I feel that the tricks to keep using pixel values will be counter-productive in the long run though. Take the plunge and stop thinking in pixels.
If this hack doesn't break things too deep (where you can't adjust) then I could concider this extra work as a small tradeoff to the benefit of using the whole rem based system instead of px based. I will try this on some of my next projects. And by the way, thank you for this great advice/tutorial!
What if your side bar needs to be 300 pixels on tablet and desktop? My client runs ads in the side bar so I need to keep the width fixed for tablet and desktop
I haven't worked with ads but I could definitely see using pixels for cases like that where you don't want it to scale up, esp for image or video ads that are exactly at 300px
Also on mobile most phones have a designated base font size, and many people increase it for accessibility, comfort or personal preference. Ive seen 20smth year olds have it super small to fit more text, or bigger than normal to aid in study effectiveness
The only real use case I can think of for using REM, is to scale everything responsively by lowering the base font-size in your media queries on lower resolutions. Padding, margins, text and everything else will take up less space. You can clamp your actual text size tokens/CSS variables to avoid them going below 14px - and of course other minimums for e.g. medium and large sizes, so you don't go below accessibility requirements where you might have low contrast.
@@mverma7845rems are only dependent on the root font size, but em's are dependent on the parent and any ancestor element. So if you have multiple nested elements that have em's, you will have a compounding effect which can make the element's size much larger or smaller than you would expect. Rems were created specifically to not have the same quirk. Hope this helps!
@@mverma7845 I'm not sure if this is what you're doing, but you don't need to set the root's font-size in your CSS (like html { font-size: 1rem; } ) -- it will automatically take it from the browser settings. But yes, setting a font-size of any element to be 2rem will be 2 * the browser font size.
Nice video. You would think browsers would have an option to automatically upscale fonts specified in pixels for users who require larger fonts. There are so many accessibility gotchas that I wonder why more of the responsibility doesn't lie on the browser rather than the developers.
So for text should we use rem's or em's. I always don't know the difference between the two. Or its fine to use both. Because I am a beginner and want to get the best practice
You can use either, but I usually use rems. Em's have a quirk where if you have nested elements that are using em's they have this multiplier effect that can make the text have an unexpected size
After moving to tailwindcss, it's made it simple to use rems and sectioned layouts. Yeah, it's a dependency, but I get so much more than just a style library.
So why exactly do people change the font size instead of using browser zoom? I think if I follow the advise from this video, my website is going to look like zoomed when the font size is increased.
This is a nice video; Don't think I'm gonna use it at my job any soon, tough We work with a mobile app, so vh/vw and hard on px gonna still be my main units
She explained it; You want the actual feature of the browser to change font size to be, you know, usable. What's the point of having it if you make it useless?
@@haz6908 However, that particular feature originated in an era quite a while before zoom became a thing in browsers. One could argue font-only scaling has long been made obsolete by the now ubiquitous zoom feature.
I always knew I should be using rems and ems for (for responsiveness, but I didn't know what I was making responsive, I initially thought the font just scales down on smaller devices) sizing but always sticked to using pixels since its just a lot easier working with them (as a junior developer focused on making things look good on 3 breakpoints and standard base font size). I didn't know I needed this video, it was very useful, I finally understood the concept behind ems and rems. What do you think is the difference between ems and rems though? Why do we typically use rems for all things fonts and ems for all thing elements? Would really appreciate your response to this
I personally use rems for everything, because em's have this quirk where there's a multiplier effect if you're nesting multiple elements that all use em units. I do think one useful application for em is to use it when you're setting margin-bottom of text elements, bc it will be dependent on the -size of the element itself and so will scale with the font-size which I think is nice! Thanks for watching!
Very good video, this. I cannot help but wonder though how many people actually change the base font size (or even know it can be changed) vs changing the base Zoom level instead (which is always one of the easiest settings to find usually right in the toolbar)
Zooming is used more, I'm sure, but there are still users who use the browser font size. Personally, I think that as long as the setting is in the browser we need to allow it to have an effect on the website.
Okay, so we should use rem instead of px but client gives px in psd or figma to match markup then what should we do? Should we convert every px to rem first like 16px is equal to 1 rem then apply the rem on markup? So if in figma we get h1 in 16px then in markup we should use 1rem as font size in that h1?
I agree. Back in 2015 I would use px.. But now, I am using "rem for Font Sizes" since we are relying in mobile responsive in many different devices... I don't need to explain here, you can do some research and investigation. Everything she says, it is true. 👍
Isn't using browser's zoom function better than building the website's responsive design based on the base font? If you use the browser's zoom then it also enlarges other UI elements, which should be enlarged if the user has impaired vision. For example - form elements' padding, margins, .. etc - browser's zoom enlarges them aswell. Browser's zoom also respects media queries out of the box so you don't get horizontal scrollbars, when you zoom in.
Okay, looking at the examples in the video, I get the feeling that it's better not to use pixels at all. Is this correct, or are there still situations when it is better to use pixels?
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 :)
Pixels are easier for web developers to work with, for sure, but we always need to keep the end user in mind. Both zooming and changing the browser font size are tools that are available to users, and so as developers we need to make sure that both those settings work the way users are expecting. Using px will make the browser font size scaling impossible-- so imo as long as it exists in a setting in the browser, I think it should actually function for users. For the clipped text in smaller areas, that is not a failing due to the font-size but would be more of a design problem or using px to set the width of the element that contains the text instead of rems.
How to out yourself as a person who willingly discriminates? Write a comment like you did here. Although at first glance your reply is a lot better worded than the ableist comment on top, your comment also shows ableism and zero thought about the preferences of the end user.
This reminds me of an essay a student wrote that was 6pages long about how he did not want to type out alt titles for every image that he used because "his website isnt frequented by those people anyways". People dont know that nobody dictates who should be able to navigate through your web page. Is it a granny with big magnifying glasses, is it someone without arms who uses voice commands, is it a deranged person with an anime profile picture, is it a complete color blind person? Nobody knows and they dont need to know if their approach to web design is universally user-friendly
In general, I feel like using px as a measurement is a bad holdover from the dark past of designers trying to make website designs that loom exactly how they want them, pixe-perfect, on every user's screen. I mean I'd LIKE that sort of mindset to be in the past, but I guess there's still way too much of that going on today too… Despite responsive design having been a thing for many a year now. Sure, designing a responsive page (with semantic html and a good structure etc) is a challenge, a bit like trying to solve a puzzle that constantly moves around, but the result is so much nicer… And getting it right is VERY satisfying. =)
@codercoder your function to convert pixels to rems always Divides by 16 which is hard-coded , but the browser pixel size can be different , can you clear out this confusion ??
It assumes the default value of 16px = 1rem, which is what the design is based off of. But since the final value in the CSS is rems, it will allow the user to increase the font-size by changing their browser font size. As long as the user has control over the sizing then it will work the way it is intended. Hope this helps!
For the converting px sizes into rem/em, wouldn't it be a pretty good solution to make an auto correct / script in whichever IDE you use, with some kind of syntax, then be able to calc pixel size into rem and then replace the written syntax with the result? I feel like that wouldn't be that difficult, like a double ..then 10px > turns into > 0.625 ?
Great Video! Still I have a question left: Would you not use pixel on media queries if you create a image layout? Since i wouldn't want the images to break into multi-column layout earlier/later than intended if the user changed the base font-size.
Thanks! It's hard to say, but I'd check how it looks when you change the browser font size, and if you like how it looks and you and see all the images fine, you can choose what unit you wanna use for that
That is, before using each site separately, the user has to run around and adjust the font size in the settings, which does not even affect the standard page size of the browser (chrome, for example)? Wouldn't it be easier to set up zoom for each individual site and not have to do extra work as a user? The only thing worse than this case is when you use rem instead of pixels when developing responsive websites, when the font changes depending on the width of the screen. Like, if I have a 540-pixel phone, I see worse than a 480- or 360-pixel phone, and therefore I need a larger font. It's the same with desktops, for example, if I have a 1920 monitor, I see worse than if I had a 1440 monitor and I need a larger font. Especially when I open two tabs side by side on the 1920 screen and the font is reduced in size because it's responsive. It looks as ridiculous as possible
Here's a situation that just happened. I experimented, set the font size in the browser to small, sat on codepen, some other sites and everything was fine. I went to ChatGPT and the font was too small, at first I didn't understand, I thought something had been updated, then I realized that the font was too small, I looked, maybe I accidentally pressed the zoom. I remembered, I changed the font size in the browser
The font-size will not change with rems based on the screen size-- that happens when you use viewport width units. Users who use the browser font-size setting are most likely setting it once, not every single time-- and in an ideal world, if every website uses rems then that would affect all websites equally.
When "everything was fine" I'm assuming you mean the text size didn't change. That means the websites are using pixels which are not affected by the browser font-size. So what you experienced on ChatGPT is what should happen when the font size gets changed in the browser-- it should have an effect on the website.
Personally, I don’t think in pixels at all. It’s better to just think in rem. No conversion necessary. With the size of screens and their pixel density these days, why not just work in rems?
I'm a huge fan of this and have started to do this when I'm working on solo stuff! Unfortunately, for people working with a designer who's created in pixels, it may still be necessary to convert
@@TheCoderCoder Yeah, I always forget that people collaborate. I do everything on my own so I have the freedom to work however I want. It's very freeing.
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.
I'm that UI UX designer you won't want to work with if you don't embrace the beauty of PX. Even my shoe size is 80px
I would say just don't mix... like as ur sidebar example... if u do pixels do them everywhere :D
I’d argue padding and margin should use rems as well since they are often meant to be proportional to text. Someone who needs to set their default font to 32px probably also want spacing between paragraphs to be increased.
Also, the way to deal with conversion between pixels and rems is to stop thinking in pixels and use rems. If you’re worried about rounding to full pixels, use one eight granularity for the dimension (i.e. only .0, .125, .25, .375, .5, .625, .75 and .875 fractions; you can use one 16th but it’s harder to remember all the fractions).
Also, feel free to use px for little experiments. :)
No it's not. If you use absolute units for spacing, your website is gonna look different on different viewports, so it's gonna look different on the desktop with a widescreen monitor then on a small 1366x768 laptop screen and again different on a mobile screen. Currently I'm using px only for setting min and max w/h, but I'll probably switch even those. Don't use pixels.
I wish when I started learning CSS that they would just start with teaching rem instead of px. It would have saved me a lot of time and brain power.
Agreed. Pixels has become somewhat of a bad habit for me and we all know those are hard to unlearn.
@@quinten01 same lol
🚨 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.
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!
me too, i always use rem when possible but maintain media querries in pixels :D but why frameworks like bootstrap uses pixels ? or newer bootstrap does not ? or bootstrap is a dinosaur ?
Same here. This really gave me something to think about.
@@peterpancikbootstrap is a dinosaur. It used to be essential, but I haven’t heard of anyone using it these days now that we have flexbox and grid in our toolbox.
@@peterpancik😂😂😂😂just learn type script instead of bootstrap
@@GabrielObioraanderson i think ts is something way different than bs :D but i feel you
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!
Thanks for watching! I hope it's helpful for you!
Hahaha te están monitoreando.
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!
Thanks for watching! That sounds like a great extension too!
2:47 Pixel: **ABSOLUTE UNIT**
In awe at the size of this font.
This is the best argument I have seen for useing rem over px. Great video
Thanks for watching!
Love the way you explained every case with examples. Great work. Thank you!
You're welcome, thanks for watching!
Thank you for considering accessibility in this video! I AM someone who uses the built-in font size setting in my browser for accessibility reasons and always wondered why it didn't always affect things in the way I expect. I see many comments from viewers who don't understand why someone would use the font size setting rather than just zooming. For my own needs, the answer is that the the font size setting's intended behaviour specifically involves increasing the font size across all websites.
Zooming w/ ctrl+ or a page's menu increases the size of everything, which is not always what I want. It also functions on a per-website basis unless you use a global zoom setting, which is right next to the increase font size setting in the browser I use anyways. It's not any more work to set a global font size vs a global zoom setting on my end as a user, and font size is more likely than per-page OR global zoom to give me the behaviour I want.
If you just need to zoom in to get a better view of one particular thing every so often, per-page zooming works just fine. For someone who needs or prefers ALL fonts to be a certain minimum size across all websites, without significantly impacting the viewing experience of other elements of the page, setting the font size setting in browser is a much better choice. If you read the Josh Comeau article Coder Coder linked, his article explains much the same thing as I've found through my own personal experience.
Thank you for sharing your experience! I hope that even though a lot of people are resistant to using rem, that my video can at least help educate those who are willing to change the way they set font-size.
@@TheCoderCoder I really appreciate it! I am new to web development and in addition to my *own* accessibility needs, I think it's fascinating to learn all the ways I could be able to make things that are accessible to as many people as possible!
There's so many reasons standard practices shift over time to accommodate different usage needs anyways, imo accessibility is something people should strive to see as simply another creative challenge to learn about
The "rem" function is a great idea. One improvement though, instead of concatenating with "rem", better multiply by 1 rem, so that the result is treated as a unit "rem" rather than a string "rem". Instead of "math.div($pixel, 16) + rem;" use "math.div($pixel, 16) * 1rem;". That way, you can reuse the function in other Scss calculations.
that's a great suggestion, thank you!
I started building a new Drupal theme for the first time in 10 years and came accross rems in the coding standard. Your video really helped me understand how to use them and why this is important. Thank you.
It took me 10 minutes until I noticed you weren't Kevin Powell, excellent video. Thank you for explaining the maths I always thought rems and ems were just voodoo magic numbers.
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.
Great points! I mentioned the CSS custom properties because not everyone likes Sass or may be and to use it at their job. But I agree with you 👍🏼
My mother knows how to zoom in but prefers a larger font size. Some people said users can just zoom in but I find it a bit annoying when having to swipe left and right continuously just to read text on a website. That's why browsers support changing font size.
Totally agree
Wow. I allways have this problem on my phone.. I feel so stupid right now 😅
Hello! I'm new to English so I'll try my best to show my gratitude, I must have to get advanced in english and consume much about programming, because here in Brazil the resources are rare. I think I understand what you propose to show in this video, I like the level of English it's easy to know what you are talking about. So starting today I will just use Rem/Em, thanks too much for this video! Peace ✌️
Thanks for watching!!
Girl, you're the eyes-opener, you know that? I'll subscribe, good stuff!
It's great to see videos on a tip like this! Thank you 😀
Thanks for watching! Glad it was helpful!
1:40 I've checked all my browsers. I don't have a "browser styles checkbox".
Oh thank you! I finally got the point why we should use rem/em in media queries. And it’s so obvious!
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.
Thanks for watching! I'm glad that this video could help explain px / em / rem for you
So the main thing isn't just not using Pixels, the main thing is not to set default font size for the website? So that the fonts can be changed from the browser
Thanks for the video Coder Coder. I'll admit that I've had trouble absorbing the use of em's and rem's. However, I have been using such unit of measurements more and more. I never thought to use em's and rem's in media queries. You've given me something to think about.
This really explained rem usage clearly and well... Thanks a lot 👍🏿😊
Thanks so much!
Atlast I found someone who talks on the issues I am facing in the design
i moved on to rems, em for long time, i can say you are correct in many ways.
Okay, you convinced me. I’ll start using rems instead of px. 😅
You’re a wonderful tutor. I really appreciate all your efforts.
Love this content 😍 Well done!
That was interesting video. As a backend developer who only knows basics about frontend stuff I have been always wondering why some websites that render correctly on desktop mix way too large font with way too small font. Seems like the answer is that they mix px and rem. If you make more design videos you could even enter smartphone's DPI and font size settings to your dev tools for even more dramatic effect.
I still feel like designs should stop using tiny fonts and then this would not really be a thing anymore. This came about because some designers insist on using very tiny fonts to cram more into a smaller space. I have worked on mobile apps where the UX designer insisted on using 11pt fonts to fit more. The designs were so dependent on fitting things into a small space like an e-commerce product list page that we had to purposely block the ability for the font size to increase.
Not saying that was the right thing to do. Just that I really think this depends and isn’t an end all rule. Px still exists as an option for a reason and telling designers/developers to not use it anymore feels odd to me. Of course the designs should adapt as much as possible and every effort should be made to support this. That’s not always possible however and sometimes we have to pick our battles with UX and business partners.
If designs didn’t insist on using such tiny fonts to begin with this may not even be much of a concern anymore. The reality is if a design feels it needs 11pt fonts to work then allowing the user to blow that up to 24pt or 32pt font size is likely going to do a lot of damage. If the design works well with adaptable font sizes then it probably shouldn’t be using 11pt fonts in the first place because it’s unnecessary.
This all depends on the primary of the project. Is it purely content based or more design structured. A blog, wiki or news site absolutely support this. E-commerce, well that may be a bit more challenging and this might become more of a well it depends.
That’s really helpful. Thanks for sharing!
13:19 It seems like there is a mistake in the explanation of the ‘62.5% hack’. In @media (width < some relative size) {}, the rem and em units inside the condition are calculated based on the browser’s default font size (16px). Even if you set the HTML font size to 62.5%, the values inside the parentheses will still work according to the browser’s default font size. Therefore, even when using the 62.5% hack, you still need to use 62.5em or 62.5rem in media query conditions. Your media query operates at 1600px.
Great video! Your tips on responsive design and using rem units really helped me fix scaling issues. Thanks for the clear and practical advice!
Thank you for speaking out on this. Being a legally blind developer, I can validate what you’re saying 100%. There is absolutely no reason nowadays to constrain layouts and font sizes to pixels. Somehow devs think that their job is to copy a Figma template. No. Our job as devs is to care for the user and recognize the designer was just using a tool the way they knew how. Maybe the devs who can’t even think outside the pixel-size box (pun intended) will be the first to be replaced by AI!
Thank you for sharing, and I wholeheartedly agree!
dang… looks like I'm rewriting my personal websites, this weekend 😆. Great vid!
haha! Thanks for watching!
also changing font-family effects font-size too, so using em/rem will be more consistent when you change font-family as well
One case where you might not what to do this is with border-width. Or maybe with box-shadow sizes and blur values.
Totally agree!
This also applies to e-books. Some of them are designed in pixels and when opened on an e-reader everything looks a bit disproportionate.
i cant remember the last time i used pixels for anything other than as a 0px minimum size or a 1px border or outline... i do everything like margins padding or gap with em or rem, ocassionally for vertical padding i will use vh instead.... with fonts its always em or rem, sometimes i will use % of the parent element.... when im defining a universal base size for different repeating text tags i always use a font size with a min size clamp so i dont need to redo anything with media queries for them....
yeah the 62.5% trick does have compatability issues when it comes to third party packages, simple solution there is i dont use any third party packages, theres nothing that bootstrap, tailwind or any other package can do that I cant if i take the time to sit down and do it
Its good to see you back. So. rem usage is the best
Nice video. I feel that the tricks to keep using pixel values will be counter-productive in the long run though. Take the plunge and stop thinking in pixels.
Great content, you've earned a subscriber
Very cool CSS variable idea! It's easy for me to use rem now.
Wow! This is helpful. Thank you!
If this hack doesn't break things too deep (where you can't adjust) then I could concider this extra work as a small tradeoff to the benefit of using the whole rem based system instead of px based. I will try this on some of my next projects.
And by the way, thank you for this great advice/tutorial!
What if your side bar needs to be 300 pixels on tablet and desktop? My client runs ads in the side bar so I need to keep the width fixed for tablet and desktop
I haven't worked with ads but I could definitely see using pixels for cases like that where you don't want it to scale up, esp for image or video ads that are exactly at 300px
Don't try to be compatible with all devices with one code. Please design a layout specifically for devices with small screens.
Thank You for SHARING!!! 🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼 🙂
Also on mobile most phones have a designated base font size, and many people increase it for accessibility, comfort or personal preference.
Ive seen 20smth year olds have it super small to fit more text, or bigger than normal to aid in study effectiveness
I usually set borders and some properties in pixels coz i don't want them to be thicker and thinner
based on the root settings
How can we ensure that asfigma web designers, we don't have the rem scale in figma
Hey bro, you just take all your pixels from your design system and convert them into REMs using a converter, or if you are math-savvy do it yourself
The only real use case I can think of for using REM, is to scale everything responsively by lowering the base font-size in your media queries on lower resolutions. Padding, margins, text and everything else will take up less space. You can clamp your actual text size tokens/CSS variables to avoid them going below 14px - and of course other minimums for e.g. medium and large sizes, so you don't go below accessibility requirements where you might have low contrast.
Thank you CoderCoder, really great video.
Thanks for watching!
@@TheCoderCoder whats the difference between em and rem, I don't see much difference between them?
@@mverma7845rems are only dependent on the root font size, but em's are dependent on the parent and any ancestor element. So if you have multiple nested elements that have em's, you will have a compounding effect which can make the element's size much larger or smaller than you would expect. Rems were created specifically to not have the same quirk. Hope this helps!
@@TheCoderCoder in the root if use font-size: 1rem; then through out my code I use font-size: 2rem etc, it will go off of the root font-size correct.
@@mverma7845 I'm not sure if this is what you're doing, but you don't need to set the root's font-size in your CSS (like html { font-size: 1rem; } ) -- it will automatically take it from the browser settings. But yes, setting a font-size of any element to be 2rem will be 2 * the browser font size.
what if the browsers have a zoom feature? you can just hold ctrl + scroll mouse wheel to preferred scale?
She addressed that @ 3:11
Nice video. You would think browsers would have an option to automatically upscale fonts specified in pixels for users who require larger fonts. There are so many accessibility gotchas that I wonder why more of the responsibility doesn't lie on the browser rather than the developers.
I like your explanation. New subscriber here.
amazing video, you are one of the gratest teachers i ever seen i suscribe rigth now.
So for text should we use rem's or em's. I always don't know the difference between the two. Or its fine to use both. Because I am a beginner and want to get the best practice
You can use either, but I usually use rems. Em's have a quirk where if you have nested elements that are using em's they have this multiplier effect that can make the text have an unexpected size
@@TheCoderCoder ok now I c. Thanks for taking your time to respond to me 🤗🤗
I really appreciate it and I will definitely take this to consideration
Thank you! This is really informative!
After moving to tailwindcss, it's made it simple to use rems and sectioned layouts. Yeah, it's a dependency, but I get so much more than just a style library.
Now I am confused, how is it can be beneficial or better if “rem” does what you don’t want it to do?
Thanks.
I am working on my website and this is most helpful.
Now I am looking for video for backend that explain how newsletter subscription function.
So why exactly do people change the font size instead of using browser zoom? I think if I follow the advise from this video, my website is going to look like zoomed when the font size is increased.
This is a nice video;
Don't think I'm gonna use it at my job any soon, tough
We work with a mobile app, so vh/vw and hard on px gonna still be my main units
Thanks a lot for this information. Great content 👏
Thanks for watching!
Really helpful video. I like that scss solution to use REM. Still love scss same as you
SCSS is awesome. Thanks for watching!
Thanks so much for your time and knowledge - total respect !
Thanks so much!
What is wrong with increasing zoom?
She explained it; You want the actual feature of the browser to change font size to be, you know, usable. What's the point of having it if you make it useless?
@@haz6908 However, that particular feature originated in an era quite a while before zoom became a thing in browsers.
One could argue font-only scaling has long been made obsolete by the now ubiquitous zoom feature.
I remember when I was an intermediate level coder and I agreed with this. Don't worry, you'll grow out of it when you learn more.
What is your argument?
I always knew I should be using rems and ems for (for responsiveness, but I didn't know what I was making responsive, I initially thought the font just scales down on smaller devices) sizing but always sticked to using pixels since its just a lot easier working with them (as a junior developer focused on making things look good on 3 breakpoints and standard base font size). I didn't know I needed this video, it was very useful, I finally understood the concept behind ems and rems. What do you think is the difference between ems and rems though? Why do we typically use rems for all things fonts and ems for all thing elements?
Would really appreciate your response to this
I personally use rems for everything, because em's have this quirk where there's a multiplier effect if you're nesting multiple elements that all use em units. I do think one useful application for em is to use it when you're setting margin-bottom of text elements, bc it will be dependent on the -size of the element itself and so will scale with the font-size which I think is nice! Thanks for watching!
@@TheCoderCoder stellar! I can't thank you enough for replying!
Great explanation,thanks.
Very good video, this. I cannot help but wonder though how many people actually change the base font size (or even know it can be changed) vs changing the base Zoom level instead (which is always one of the easiest settings to find usually right in the toolbar)
Zooming is used more, I'm sure, but there are still users who use the browser font size. Personally, I think that as long as the setting is in the browser we need to allow it to have an effect on the website.
Thank you for your hard work! Please tell me what to do with the pictures in this case? Should their sizes also be set in rem?
That sass function to convert px to rems is very useful, I had never thought about it
Okay, so we should use rem instead of px but client gives px in psd or figma to match markup then what should we do?
Should we convert every px to rem first like 16px is equal to 1 rem then apply the rem on markup?
So if in figma we get h1 in 16px then in markup we should use 1rem as font size in that h1?
Yep, that's exactly right!
Good video, great help!
Realy nice, thank you!
For some reason, when it's about small stuff, like text shadow, or tiny alignment, I use px, like 1-3px, otherwise, it's now rem or vmin only.
I do the same thing!
I agree. Back in 2015 I would use px.. But now, I am using "rem for Font Sizes" since we are relying in mobile responsive in many different devices... I don't need to explain here, you can do some research and investigation. Everything she says, it is true. 👍
I like the content learned new. thank you & keep it up.
Thanks for watching!
Hello. New to the channel, thanks for this informative and educating video. May I ask what kind of keyboard you're using? (that's broken to 3 parts).
Thanks for watching! The left and right parts are the Glove80, and the middle numpad is a separate board I got off of amazon
Isn't using browser's zoom function better than building the website's responsive design based on the base font? If you use the browser's zoom then it also enlarges other UI elements, which should be enlarged if the user has impaired vision. For example - form elements' padding, margins, .. etc - browser's zoom enlarges them aswell. Browser's zoom also respects media queries out of the box so you don't get horizontal scrollbars, when you zoom in.
Okay, looking at the examples in the video, I get the feeling that it's better not to use pixels at all. Is this correct, or are there still situations when it is better to use pixels?
I didn't include this in the video, but pixels are fine to use for smaller things like margin, gap, padding, and borders and border radius.
Could you please make a website coding tutorial for this topic only as new commers still might not get it completely.
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 :)
Pixels are easier for web developers to work with, for sure, but we always need to keep the end user in mind. Both zooming and changing the browser font size are tools that are available to users, and so as developers we need to make sure that both those settings work the way users are expecting.
Using px will make the browser font size scaling impossible-- so imo as long as it exists in a setting in the browser, I think it should actually function for users. For the clipped text in smaller areas, that is not a failing due to the font-size but would be more of a design problem or using px to set the width of the element that contains the text instead of rems.
This is an ironically long response to what is effectively a lazy development approach.
How to out yourself as a person who willingly discriminates? Write a comment like you did here.
Although at first glance your reply is a lot better worded than the ableist comment on top, your comment also shows ableism and zero thought about the preferences of the end user.
@@notramiras I’m not sure you understand irony.
This reminds me of an essay a student wrote that was 6pages long about how he did not want to type out alt titles for every image that he used because "his website isnt frequented by those people anyways".
People dont know that nobody dictates who should be able to navigate through your web page. Is it a granny with big magnifying glasses, is it someone without arms who uses voice commands, is it a deranged person with an anime profile picture, is it a complete color blind person? Nobody knows and they dont need to know if their approach to web design is universally user-friendly
Hey how did you achieve the font color effect like that in the heading?
11:10 i mean why not just use rem/em. calculating it from `px` is needless.
What if I set an explicit root font-size on the html or :root? Will the browser styles still take precedence!?
Which theme you use in your vscode
Is it only font size that rem is effective, does it also work for padding and margin
In general, I feel like using px as a measurement is a bad holdover from the dark past of designers trying to make website designs that loom exactly how they want them, pixe-perfect, on every user's screen. I mean I'd LIKE that sort of mindset to be in the past, but I guess there's still way too much of that going on today too… Despite responsive design having been a thing for many a year now. Sure, designing a responsive page (with semantic html and a good structure etc) is a challenge, a bit like trying to solve a puzzle that constantly moves around, but the result is so much nicer… And getting it right is VERY satisfying. =)
@codercoder your function to convert pixels to rems always
Divides by 16 which is hard-coded , but the browser pixel size can be different , can you clear out this confusion ??
It assumes the default value of 16px = 1rem, which is what the design is based off of. But since the final value in the CSS is rems, it will allow the user to increase the font-size by changing their browser font size. As long as the user has control over the sizing then it will work the way it is intended. Hope this helps!
For the converting px sizes into rem/em, wouldn't it be a pretty good solution to make an auto correct / script in whichever IDE you use, with some kind of syntax, then be able to calc pixel size into rem and then replace the written syntax with the result? I feel like that wouldn't be that difficult, like a double ..then 10px > turns into > 0.625 ?
Lmao, I guess I should've read the comments, turns out there's an extension xD.
Great Video!
Still I have a question left: Would you not use pixel on media queries if you create a image layout? Since i wouldn't want the images to break into multi-column layout earlier/later than intended if the user changed the base font-size.
Thanks! It's hard to say, but I'd check how it looks when you change the browser font size, and if you like how it looks and you and see all the images fine, you can choose what unit you wanna use for that
Excellent video!
Thank you so much ma'am, got to learn a lot
That is, before using each site separately, the user has to run around and adjust the font size in the settings, which does not even affect the standard page size of the browser (chrome, for example)? Wouldn't it be easier to set up zoom for each individual site and not have to do extra work as a user?
The only thing worse than this case is when you use rem instead of pixels when developing responsive websites, when the font changes depending on the width of the screen. Like, if I have a 540-pixel phone, I see worse than a 480- or 360-pixel phone, and therefore I need a larger font. It's the same with desktops, for example, if I have a 1920 monitor, I see worse than if I had a 1440 monitor and I need a larger font. Especially when I open two tabs side by side on the 1920 screen and the font is reduced in size because it's responsive. It looks as ridiculous as possible
Here's a situation that just happened. I experimented, set the font size in the browser to small, sat on codepen, some other sites and everything was fine. I went to ChatGPT and the font was too small, at first I didn't understand, I thought something had been updated, then I realized that the font was too small, I looked, maybe I accidentally pressed the zoom. I remembered, I changed the font size in the browser
The font-size will not change with rems based on the screen size-- that happens when you use viewport width units. Users who use the browser font-size setting are most likely setting it once, not every single time-- and in an ideal world, if every website uses rems then that would affect all websites equally.
When "everything was fine" I'm assuming you mean the text size didn't change. That means the websites are using pixels which are not affected by the browser font-size. So what you experienced on ChatGPT is what should happen when the font size gets changed in the browser-- it should have an effect on the website.
Personally, I don’t think in pixels at all. It’s better to just think in rem. No conversion necessary. With the size of screens and their pixel density these days, why not just work in rems?
I'm a huge fan of this and have started to do this when I'm working on solo stuff! Unfortunately, for people working with a designer who's created in pixels, it may still be necessary to convert
@@TheCoderCoder Yeah, I always forget that people collaborate. I do everything on my own so I have the freedom to work however I want. It's very freeing.
Thanks for the info