Why you shouldn't set font-sizes using em
125,213
Published 2019-05-22
A lot of people struggle with the difference between the em and rem units. while there can be situations where it works out, in general I suggest using rems for font-size, and I take a look at why in this video.
As you probably guessed, this video was sponsored by Skillshare.
#css #webdevelopment
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: discord.gg/nTYCvrK
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically refresh your bro...
---
Support me on Patreon: www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: www.instagram.com/kevinpowell.co/
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
All Comments (21)
-
Video starts at 2:30 Takeaway: For font-sizes, always use "rem" to avoid compounding problem Use "em" for properties other than fontSize like margin, padding, width etc... rem are useful when we are trying to use media queries
-
finally get the point of em and rem. Confused me since I knew them. Thank you so much!
-
Thank you, Kevin. I didn't know prior to watching this that using ems outside of font-size is relative to that element and not it's parent element. I always learn something new with every one of your awesome videos and that is why I love your channel. You're awesome and thank you.
-
Best channel out there for CSS. Thanks for your clarity, your pacing and your rigor.
-
It's worth mentioning that em's are not only great for 'typographic padding' like you've shown, but for keeping line-height consistent with the font-size. And em's are the default for the unit and you can leave it off: line-height: 1.2;
-
Many thanks Kevin! So much clarity you gave and with simple to understand language. Always nice to watch your video. 👍👍
-
I gotta tell ya, this was the most perfect explanation of em's and rem's. Thank you so much, Kevin!
-
Like always, awesome! Keep uploading such useful content like this. Thanks!
-
Maaan, this is excellent! Thank you for bringing so much clarity into my CSS World of understanding! :) i'm pretty sure these videos are highly valuable for others! :) Have a nice day, Fritz
-
I don't know how many times I've looked up the definitions for rem vs em and still felt confused as to when to use one over the other. Guess I'm more of a visual learner, thanks so much for this!
-
Hi, Kevin. using rem and em was known to me what you did explain about font size is the key learning for me. Thank you! I will share it with more people!
-
Thanks Kevin. Your explanations are so straightforward and easy to understand!
-
Thanks Kevin for this video finally I got the concept of em and rem and which one to use when cheers and stay safe
-
I did learn something important. I had not viewed the videos when you posted them in the course but having watched them now makes it easy to decide what to use when. Cool.
-
Wow, I just updated my project and now it perfectly adapts to the browser text size :) THANK YOU!
-
Thankyou! I was so confused 😬 but this cleared all my doubts 🙇🏾♂️
-
Wow this is the first instance I have ever heard that em's for everything besides font-size are referencing that particular element and not the parent. Solid information thanks!
-
Another wonderful video. 👏👏 Thanks Kevin!
-
Thanks for putting out this one. Clearly understood
-
Kevin, thank you. Now I finally understand em and rem. Your content is excellent.
