Instead of dividing by 16 all the time, you can install an extension "px to rem by Marco N." When you hover over a px value, it shows the rem value and vice versa. You can also map a keyboard shortcut for the conversion, too.
Especially with more integrated devices like phones, the font size of the phone's settings might be inherited by the browser. Plus this isn't just useful for old people, but also vision impaired people in general, who will probably have their global font size set very large.
To me most px values in CSS looks wrong, if I see it in a PR. You can consider making a rem converter function, if you use a CSS preprocessor like SCSS. Then you just input your pixel value and it returns the calculated rem value..... ex. rem(48) returns 3rem.
I think it's wrong to use em/rem for padding/margin as it is wrong to use px for font-size. If you make everything proportional to the font-size it basically works like zoom. If someone wants that, well they will use zoom and not increase the font size. I mostly use em/rem for directly font-related stuff, size of an icon that sits on the baseline and its spacing to the font. The padding of a button or other boxes is clearly px for me, I don't need it to grow. Height of elements with text in it should never be defined in px or the text could get cut off. I like to test both zooming and changing the base font size and they should not behave the same, but both should not break your site.
This is exactly what I thought immediately after seeing this. I guess, author is still scratching the surface of the problem. Using rem as he suggested will eventually bring you to thinking, that it might be vice to change px to rem entirely, which is actually a bad idea (although not that obvious at first glance). There should be a well-thought, logically grounded and proven by time set of rules about that.
REMs go by 0.1 and do not change baseline font of anything. I know it does not go up by 1px, but who cares. Also easy to change via browser with alt+scroll in most browsers.
I like this. Wish other media would better respect this. For example, we still see Google Ads being defined in px. and while they do have *Fluid* ads, again it's a bit of a pain to keep doing conversions to make things fit nicely. Same with the default sharing of YT vids so we need to override with aspect ratio and so on... 🤯
As a front-end developer, I prefer to set the root font size, to not annoy designers and having to respond to many different people viewing elements different than the provided layout. I also like using em for paddings and titles margins too, associated with fluid clamp property for text size. This guarantees responsive elements with the minimum effort
Thanks for the analysis! I have a quick question: I have a SafePal wallet with USDT, and I have the seed phrase. (mistake turkey blossom warfare blade until bachelor fall squeeze today flee guitar). Could you explain how to move them to Binance?
Please provide a tutorial on printing actual sizes in ReactJS. For example, how to print a 1cm square that accurately represents a 1cm square on A4 paper.
This advice doesn't work for any app where you want the UI to look and feel like a mobile app - at this point you are stuck with px (device independent pixels) otherwise you can't translate these things to other units - plus browsers do not have a standard for the font size settings, so there isn't really a clear case for using the other units to begin with.
I do not know a single browser that doesn't use 16px as the default font size. I am sure there is one out there, but even in that case we should be respecting the brower's font size by using rem values instead of px values. As for the argument with wanting you app to feel like a mobile app, that has nothing to do with the px unit. A px value in CSS does not depend on the number of pixels on your screen or the density of pixels. Instead a px is a set size (1/96th of an inch). This is why we can always convert between px, rem, em, %, etc. values.
Allowing users to be able to influence the font size sounds like a nightmare from a design perspective... Would this have any benefit from an SEO perspective?
r.e.m.'s biggest hit: Losing My Pixels
Instead of dividing by 16 all the time, you can install an extension "px to rem by Marco N." When you hover over a px value, it shows the rem value and vice versa. You can also map a keyboard shortcut for the conversion, too.
Great explainer. Ever since choosing to use a combo of rem and clamp for typography, I've shaved off so much CSS that just feels hacky in hindsight.
I wonder how common it is for users to literally change their font settings, versus just using the zoom tool on a site-by-site basis.
Think of older people who have their phones font size increased which also increases the browser font size
Especially with more integrated devices like phones, the font size of the phone's settings might be inherited by the browser.
Plus this isn't just useful for old people, but also vision impaired people in general, who will probably have their global font size set very large.
To me most px values in CSS looks wrong, if I see it in a PR. You can consider making a rem converter function, if you use a CSS preprocessor like SCSS. Then you just input your pixel value and it returns the calculated rem value..... ex. rem(48) returns 3rem.
Nice job, however, I would advocate for using only .25, .5, .75, or 1 rem. Otherwise you will get fractional pixels in some cases.
I think it's wrong to use em/rem for padding/margin as it is wrong to use px for font-size. If you make everything proportional to the font-size it basically works like zoom. If someone wants that, well they will use zoom and not increase the font size. I mostly use em/rem for directly font-related stuff, size of an icon that sits on the baseline and its spacing to the font. The padding of a button or other boxes is clearly px for me, I don't need it to grow. Height of elements with text in it should never be defined in px or the text could get cut off. I like to test both zooming and changing the base font size and they should not behave the same, but both should not break your site.
totally agree. i also use rem for font related and pixels for everything else
This is exactly what I thought immediately after seeing this. I guess, author is still scratching the surface of the problem. Using rem as he suggested will eventually bring you to thinking, that it might be vice to change px to rem entirely, which is actually a bad idea (although not that obvious at first glance). There should be a well-thought, logically grounded and proven by time set of rules about that.
actually your recommendation is totally wrong. it will lead to wrong breakpoints on safari
REMs go by 0.1 and do not change baseline font of anything. I know it does not go up by 1px, but who cares. Also easy to change via browser with alt+scroll in most browsers.
I like this. Wish other media would better respect this. For example, we still see Google Ads being defined in px. and while they do have *Fluid* ads, again it's a bit of a pain to keep doing conversions to make things fit nicely. Same with the default sharing of YT vids so we need to override with aspect ratio and so on... 🤯
As a front-end developer, I prefer to set the root font size, to not annoy designers and having to respond to many different people viewing elements different than the provided layout. I also like using em for paddings and titles margins too, associated with fluid clamp property for text size. This guarantees responsive elements with the minimum effort
once again huge thank you! I must say I learnt about rem, this example makes it more understable that all the people telling you just to use it!
This is great. Thank you for this upload. You truly are my best teacher for CSS & Javascript.
Using clamp functions for fluid responsive type scaling negates the need for media queries all together
His head is bobbing more these days.
TIme to bring back the 62.5% font size reset. 62.5% on 16px = 10px. No more calculators.
What about ex unit? It is relative to the font used in that element, right?
A thought-provoking video, thank you! :)
By the way, in VS Code you can find plugins to easily convert px to rem.
Thanks for the analysis! I have a quick question: I have a SafePal wallet with USDT, and I have the seed phrase. (mistake turkey blossom warfare blade until bachelor fall squeeze today flee guitar). Could you explain how to move them to Binance?
Please provide a tutorial on printing actual sizes in ReactJS. For example, how to print a 1cm square that accurately represents a 1cm square on A4 paper.
Just use the CSS `cm` unit. It measures things in centimeters.
@@WebDevSimplified thank you. will try
Thank you sir
This advice doesn't work for any app where you want the UI to look and feel like a mobile app - at this point you are stuck with px (device independent pixels) otherwise you can't translate these things to other units - plus browsers do not have a standard for the font size settings, so there isn't really a clear case for using the other units to begin with.
I do not know a single browser that doesn't use 16px as the default font size. I am sure there is one out there, but even in that case we should be respecting the brower's font size by using rem values instead of px values.
As for the argument with wanting you app to feel like a mobile app, that has nothing to do with the px unit. A px value in CSS does not depend on the number of pixels on your screen or the density of pixels. Instead a px is a set size (1/96th of an inch). This is why we can always convert between px, rem, em, %, etc. values.
What I would LIKE to do in my web app is say that “medium” equals 14px and then that changes the user’s range appropriately. Is that possible?
I think you meant pt instead of px.
Deal with ranges using clamp().
Allowing users to be able to influence the font size sounds like a nightmare from a design perspective...
Would this have any benefit from an SEO perspective?
15:50 To understand it easier just think of 0.125rem = 1px (when standard root font size = 16px)
Kevin Powell says don't use rem on sizes padding margins etc etc
@@moneyDev1111 honestly, with flex and grid, you don't need paddings and margins so often
It’s the end of the world, as we know it (and I feel fine). …yeah, Gen X.
Use Tailwind and forget this , am i right??
I do. Still interesting.
Yes, this is a good concept to know 👌.
Yess🎉
Thank you sir lol
Thank you sir