px vs rem: what to use for font-size in your CSS

🔥 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

[@ngoako]

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😌

[@TheCoderCoder]

Awesome!! I'm glad this could help explain things for you 😁

[@hozay6552]

Very interesting video! I love how you brought up the function for sass later on. Really helpful! Thank you!

[@SeniorJuniorDeveloper]

Love your content, always amazing explanations thanks!

[@LifeAtMH41]

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.

[@_unknown7_]

Literally answered every question that I had related to the rem vs em explanation. 💗♥♥

[@darialysak4591]

I am a designer, but you answered to all my questions about rem and em, thanks a lot!

[@shubhamdhage6935]

you just got a new sub :) thank you for providing amazing content.

[@sebastianmesa6255]

Thanks coder coder. this is super helpfully.

[@ryanwright3965]

Wow. I just discovered your channel. Your videos are awesome. Keep it up!!

[@jeet4180]

This is really very helpful. Thank you

[@sknadeem340]

Love your work.... ❤️❤️Keep making awsem videos...

[@sornt]

very good video. thank you. it is something I haven't clear understand before.

[@themussseee]

I finally understand rem and ems thank you so much

[@malamincamara5939]

Naaa, I’m definitely subscribing to you. Your explanation is CLEEEAAAN!

[@ammarshorbagy3852]

Thank you very much, I am from Egypt and the translation helps me a lot 😍

[@adrianmin713]

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.

[@babinio7458]

another great tutorial !

[@itsmenow9870]

Thanks for the info 💯❤️

[@KentaroxKondo]

とてもわかりやすいです。ありがとうございます！

[@wpxpert98]

This video is really helpful, thank you

[@ax-coding631]

Really helpful, thank you!

[@jabeztadesse]

Responsive font is just a must! Specially if you're using clamp it get's rid of all the font "jump" issues

[@iamkhenny_07]

Wow amazing stuff 😊

[@hookerrabbit]

New to your channel. Great content. equally great presentation. Thank you.

[@immathiasyde]

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.

[@imkir4n]

Good info thanks Jessica ❤️

[@efthymiosn3381]

Awesome! Thanks a lot!

[@bikalrai8987]

one vid to make me subscribe to your channel, first vid i have watched of yours, thanks for the detailed explanations

[@salaheddineaksaim4348]

Really helpful, thank you!.

[@danaharley3565]

I like the way you explain it to us

[@simonehenry9041]

thank you for this! finally clicked in my brain

[@bryankersten54]

Awasome video! thank you so much! :D

[@alpinelux407]

Thank you so much for making videos for us, will you also gonna teach backend in this channel in future?

[@TheCoderCoder]

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!

[@victorcesarquispeatencio3290]

Amazing 🤩

[@alphatras4573]

Thank you very much!

[@joeariaratne8426]

Don't skip the ads guys.. needs all the support she can get ...

[@alimohammad1593]

Okay.,after 100years later,,We got your special video❤️❤️❤️

[@fedestock1815]

Thank you!

[@jsbitswithbill8765]

That rem() fn is a great idea!

[@s_liyarli]

it helped me a lot, love from Azerbaijan

[@FilipCodes]

Very usefull vid 😁

[@Basic-computer-ai]

I love your teaching

[@maissendeveloper]

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 ?

[@ArielBerloto]

You're awesome!

[@heheboi812]

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?

[@coderjaber]

Jessica when u will publish Responsive Design for Beginners course ?

[@chiaza7735]

CSS Queen 🏅

[@brymstoner]

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.

[@3101leonardo]

Hi! I know you get this question a lot, but what is this theme you are using? I really want this extension lol

[@ChristopherClaudioSkierka]

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

[@Troyzhen]

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.

[@Coder-Journey]

You're the best

[@AhmedABD0077]

So for padding and margin ..etc can I use rems cuz it is more easy ?

[@topicsmixer1107]

what is the tip u should give who is learning react :)

[@mohammedlayes9248]

Hi! If you don't mind me asking, what does font-size: 100% do, please?

[@banjo4856]

My question here is, does this rem and em matterrs in padding and margin as well, or it's only useful for font-sizing

[@blackarchiteck4226]

Just found your page today love ❤️ your work and content. Just sub too

[@ankurvishwakarma8731]

Can we also use rem for width and height?

[@dmraushan]

62.5% hack was amazing 😂

[@joefads5040]

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?

[@TheCoderCoder]

hmm, in that case perhaps you could try using px to set the padding and margin so they will always stay the same?

[@joefads5040]

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 😊

[@TheCoderCoder]

Cool 👍🏼 I'll have to research what units are recommended for padding and margin, px might be better for some things!

[@RameshKumar-mv3jd]

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?

[@TheCoderCoder]

omg I have never considered that! I actually can't think of a reason why that wouldn't work. will have to research that!

[@RameshKumar-mv3jd]

@@TheCoderCoder awesome, I hope it works

[@aftabhussain3986]

I didn't get it can you elaborate please

[@chukwudiconfidence3195]

I am having a problem with mine

[@funformic997]

You type code so I do not see, please your zoom display

[@sako4822]

Very interesting video!. Really helpful, thank you!.

[@cutipets8706]

I think for the padding and margin things gets dif?

[@justamongus7541]

Ok now jessica is being consistent 😅😆

[@TheCoderCoder]

😅😅

[@fatesteyneit2990]

is it wrong to just define the size on the body so you could use em everywhere? or am I missing something

[@bx557]

Do you use px in any case in your projects or just rems and ems?

[@TheCoderCoder]

I try to never use px, but sometimes I get lazy and use it for border-radius 😅

[@thedeveloper9896]

You Look like my teacher 😂 also thank you I will start using rem!

[@TheCoderCoder]

Yay! 😁

[@safdardahriwal7503]

Hello thank you so much for valuable knowledge .I need your help how can I contact you?

[@smerspl7175]

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?

[@TheCoderCoder]

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!

[@ahmedragab7934]

❤❤❤

[@shubhamujjwal328]

nice

[@dmitriikulbaka1862]

Hello! But what if the font in the layout is 12px or 18px?

[@rravensspace3617]

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.

[@dmitriikulbaka1862]

@@rravensspace3617 Yes. I understood. Thanks.

[@questific]

Thank you so much Jessica 🥰 💀

[@TheCoderCoder]

Sorry, I think you may have mistaken me with someone else? Not sure who Samantha is 😅

[@questific]

@@TheCoderCoder OMG IM SO SORRY 😭😭😭😭

[@zakariakhaled1871]

I think that u speaking about r.e.m beauty 😭😭

[@geoffreyking1]

what if em doesn't have a parent font size?

[@TheCoderCoder]

If there's no parent, it will be based on the browser settings base font size, default is 16px

[@coolemur976]

You should take a look at "CSS px vs rem in 2021 - Use px and Here's Why" on yt

[@TheCoderCoder]

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 :)

[@coolemur976]

@@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.

[@saburex2]

the client asks for rems, you use rems, also they make the page responsive

[@briandsouza7854]

Short Answer is Accessibility.

[@irffan]

62.5%

[@AbhishekSharmaOP]

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 ?

[@TheCoderCoder]

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

[@MrWhoever]

0:56 I'm using firefox but.. video closed. :P

[@ezra3871]

Happy programmer day everyone!

[@TheCoderCoder]

Oh wow, I didn't know! Yay 🎉🎉

[@ziggerwebdesign1704]

I haven't used pixels in years

[@dailymeow3283]

rem wins

[@adammuhtarif]

Salman hersi is a somali guy 😅

[@mariuszm439]

worst explanation ever sad!

[@TheCoderCoder]

😢

[@toscaantosca4541]

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 }