px vs rem: what to use for font-size in your CSS
VloĆŸit
- Äas pĆidĂĄn 11. 06. 2024
- đ„ My course: Responsive Design for Beginners! coder-coder.com/responsive/
đ» Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this video I talk about why I use the rem unit instead of px (pixels) for font-size in my CSS styles. And I show you how I use rems and convert them to px in my Sass/SCSS workflow!
0:00 - intro
0:48 - how to change base font size in the browser
1:45 - font-size computed with rem units is accessible
3:32 - using px for font-size is not accessible
5:09 - why not just use zoom?
6:24 - absolute and relative units in CSS
7:22 - how em differs from rem
11:21 - the 62.5% hack for easier px to rem conversion
13:32 - I use a Sass function to convert instead
____________________________
SUPPORT THE CHANNEL
â Join channel members and get perks: / @thecodercoder
đđœ Hit the THANKS button in any video!
đš Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
đ Responsive Design for Beginners: coder-coder.com/responsive/
đ Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
âš My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
đ» Other gear -- www.amazon.com/shop/thecoderc...
đ My Favorite Books -- coder-coder.com/best-web-deve...
đș My Favorite Courses -- coder-coder.com/best-web-deve...
đœ FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming - VÄda a technologie
I've been learning and forgetting this for forever, it finally clicked! Thank you! I think I'll try the percentage hack for projects sass-less projects and the mixin for when I learn sassđ
Awesome!! I'm glad this could help explain things for you đ
I am a designer, but you answered to all my questions about rem and em, thanks a lot!
Very interesting video! I love how you brought up the function for sass later on. Really helpful! Thank you!
Love your content, always amazing explanations thanks!
Literally answered every question that I had related to the rem vs em explanation. đâ„â„
After looking at one of your videos, I started using 'em' and rem() fn in my projects. Thanks for these. Especially for that rem() fn.
Thanks coder coder. this is super helpfully.
This is really very helpful. Thank you
very good video. thank you. it is something I haven't clear understand before.
you just got a new sub :) thank you for providing amazing content.
Wow. I just discovered your channel. Your videos are awesome. Keep it up!!
I finally understand rem and ems thank you so much
Love your work.... â€ïžâ€ïžKeep making awsem videos...
ăšăŠăăăăăăăă§ăăăăăăšăăăăăŸăïŒ
Thank you very much, I am from Egypt and the translation helps me a lot đ
This video is really helpful, thank you
another great tutorial !
Really helpful, thank you!
Naaa, Iâm definitely subscribing to you.
Your explanation is CLEEEAAAN!
I like the way you explain it to us
Thanks for the info đŻâ€ïž
New to your channel. Great content. equally great presentation. Thank you.
Good info thanks Jessica â€ïž
As always quality video! I was just wondering could we just set the base font size to 10px instead of 62.5%? Thank you for the amazing content.
Really helpful, thank you!.
thank you for this! finally clicked in my brain
one vid to make me subscribe to your channel, first vid i have watched of yours, thanks for the detailed explanations
Wow amazing stuff đ
Awesome! Thanks a lot!
Awasome video! thank you so much! :D
Em's could be used in such a manner that two text elements differ in ems, and have their common parent element to specify its font size in rem's. Like having a title to be double the size of a paragraph.
Thank you so much for making videos for us, will you also gonna teach backend in this channel in future?
I've done mainly frontend in my career, and only a little backend, so I will most likely not do much backend stuff, unless I start learning it myself đ Thanks for watching!
Don't skip the ads guys.. needs all the support she can get ...
Okay.,after 100years later,,We got your special videoâ€ïžâ€ïžâ€ïž
Responsive font is just a must! Specially if you're using clamp it get's rid of all the font "jump" issues
it helped me a lot, love from Azerbaijan
That rem() fn is a great idea!
Thank you very much!
Thank you!
Amazing đ€©
I love your teaching
Very usefull vid đ
Hello, in a recent project I did in which I used px, increasing the text size in Chrome on my phone is still scaling the font size even though its in pixels! Any thoughts?
thanks for your great videos !! but i'm wondering why we don't use 10px directly instead of 62.5% ?? and what if the default font size is not set to 16px, won't the 62.5% be useless ?
You're awesome!
With the HTML percentage "hack", couldn't you set it to 6.25% and eliminate the need to divide the final rem units by 10?
omg I have never considered that! I actually can't think of a reason why that wouldn't work. will have to research that!
@@TheCoderCoder awesome, I hope it works
I didn't get it can you elaborate please
I am having a problem with mine
Very interesting video!.
Really helpful, thank you!.
it's cool. i understand the different units. but because of the unnecessary maths, i find it much easier to just use px. remove the guesswork altogether.
CSS Queen đ
62.5% hack was amazing đ
I've been using rem for paddings and margins (alongside fonts), but when scaling the browser font size up the paddings/margins scale to much causing sentences to be broken up onto multiple lines to the point where it feels like a worse experience/un-readable. Any thoughts on this?
hmm, in that case perhaps you could try using px to set the padding and margin so they will always stay the same?
Ahh I'm so stoked you replied thank you! đ Yeah I was reading what seems like the only aritlce on medium saying not to using rem/em for layouts. I'm really leaning towards updating my blog layout rem values over to px values. Feels like a zoomed in experience rather than just a visual text aid. BTW I loved the rem sass mixin/fn!! đ I'm a massive fan of accessibility and sass, so I really enjoyed this video đ
Cool đđŒ I'll have to research what units are recommended for padding and margin, px might be better for some things!
You're the best
You type code so I do not see, please your zoom display
Hi! If you don't mind me asking, what does font-size: 100% do, please?
Just found your page today love â€ïž your work and content. Just sub too
Hi! I know you get this question a lot, but what is this theme you are using? I really want this extension lol
Hi there, you are nice to listen too when you explain things. Can you please tell me at 8.07 min in the video for example is the screen split with vs code on left and is the right side devtools? also how did you split your screen like that? many thanks in advance
The three dots in the top right of devtools (which is on the right side) youâll see options on where to dock your dev tools window.
Jessica when u will publish Responsive Design for Beginners course ?
My question here is, does this rem and em matterrs in padding and margin as well, or it's only useful for font-sizing
So for padding and margin ..etc can I use rems cuz it is more easy ?
what is the tip u should give who is learning react :)
Can we also use rem for width and height?
Ok now jessica is being consistent đ đ
đ đ
I think for the padding and margin things gets dif?
You Look like my teacher đ also thank you I will start using rem!
Yay! đ
is it wrong to just define the size on the body so you could use em everywhere? or am I missing something
â€â€â€
Do you use px in any case in your projects or just rems and ems?
I try to never use px, but sometimes I get lazy and use it for border-radius đ
I think that u speaking about r.e.m beauty đđ
Hello thank you so much for valuable knowledge .I need your help how can I contact you?
nice
Hello! I've some problem with it. While I'm using for example: padding-left: rem(30) padding-right: rem(30) it all works, but if I want to use padding: 0, rem(30) or padding: rem(0), rem(30) it doesn't work, somebody know why?
You don't need the commas when using multiple values for "padding". If you want to only set padding-left and padding-right, you can write "padding-inline: rem(30)". Hope this helps!
Thank you so much Jessica đ„° đ
Sorry, I think you may have mistaken me with someone else? Not sure who Samantha is đ
@@TheCoderCoder OMG IM SO SORRY đđđđ
Hello! But what if the font in the layout is 12px or 18px?
I believe you would do 12px/16px = 0.75rem and 18px/16px = 1.125rem. Because 1 rem = 16px, providing you use html { font-size: 100%;} Hope that is understandable.
@@rravensspace3617 Yes. I understood. Thanks.
You should take a look at "CSS px vs rem in 2021 - Use px and Here's Why" on yt
I've seen it-- he makes good points about wanting consistency across websites which totally make sense. Ultimately I believe that a feature should behave the way its designed. So I personally prefer to allow the base font-size changing to affect a website text size, since that's what a user is expecting when they change it.
I think eventually users will primarily use zoom for this and base font-size may go away from browser settings, but until then I'll be using rems :)
@@TheCoderCoder You should use px just to push internet to the right direction imo. The more devs use px, the sooner all browsers rely on zoom instead of rems. Px is the right way to measure things in web development.
the client asks for rems, you use rems, also they make the page responsive
62.5%
what if em doesn't have a parent font size?
If there's no parent, it will be based on the browser settings base font size, default is 16px
Short Answer is Accessibility.
0:56 I'm using firefox but..
video closed. :P
I am so scared of web development.I always forget things and in the end i feel like i learned nothing.What shall i do ?
You can always look things up online if you don't remember it right away-- professional web devs always have to do that! And just keep trying one step at a time, and practicing by building even small examples to practice a specific concept
Happy programmer day everyone!
Oh wow, I didn't know! Yay đđ
I haven't used pixels in years
rem wins
Salman hersi is a somali guy đ
worst explanation ever sad!
đą
Thanks for the video!
If you don't use sass like me (any reason), you can use this:
:root {
--rem: calc(0.0625 * 1rem); // 1px if document font size is 16px
}
h1 {
font-size: calc(32 * var(--rem)); // 32px
}