January 20, 2020 49

Why you shouldn’t set font-sizes using em

Why you shouldn’t set font-sizes using em


– CSS is really fun, but sometimes can be really frustrating. And one of the things that a
lot of people ask me about, I’ve done a video actually
on ems and rems before, but I get questions about it all the time, when to use which one? And I really wanna focus on looking at why you gotta be careful with those ems. They can have some crazy,
weird, cascading things, exploding font-sizes, you
don’t get what’s going on. So in this week’s video, that’s exactly what we are looking at. (gentle intro) Hey there, my name is Kevin, and if you’re new to this channel, here we learn how to make the web, and how to make it look
good while we’re at it with weekly tips, tricks and tutorials. And as I just said in the intro bit, we’re gonna be looking at
this crazy, cascading problem that ems can give us and why
we maybe shouldn’t use them in our typography too much. And we’re also gonna look at how we can we’re gonna start with on
a realistic sort of example that clearly illustrates it. Then we’ll move into an
exaggerated example of something you might actually run
into in the real world. But before we get to do that, I just wanna say a big
thank you to Skillshare for sponsoring this week’s video. If you don’t know about Skillshare, it’s a really awesome course platform. There’s just so much material on there and I don’t really know where to start. I’ve talked about it before,
and mentioned specifically Rachel Andrew’s course on CSS. Great, but if you already know about that, you’ve already watched that course, ’cause you went through on the last link, and you’re just looking for other stuff. There’s tons of, just type in
CSS and there’s lots of stuff. I’m assuming you like CSS
’cause you’re here on my channel and that’s what we do here. So there’s tons of really awesome courses, full builds, really cool tutorials. Maybe you’re happy with CSS,
you’re just following along but you wanna get more into designing. I get lots of questions about that. They have so many courses
just on web design and getting better at design, or maybe you have a small business that you’re looking at doing stuff. They have business courses,
they have Photoshop Illustrator, there’s so much stuff. I’m super-comfortable with Photoshop. I was still like blasting
through a whole bunch of courses on there just learning some
really cool stuff the other day. So yeah, I like it, their
content in there is really good there’s so much stuff you just keep going and going and going. So it’s really, really cool. I really strongly encourage
that you go and check them out and if you’re one of the first
500 people to use the link, down below in the
description, it’s right there, it’s the first thing you’ll
see in the description, it will give you a free
two month free trial. Two months for free, I mean you can’t really ask
for much more than that. So go and check them out,
burn through as much content as you can in there, and enjoy it, ’cause there’s so much content, it’s really an awesome platform. So a big thank you to Skillshare for sponsoring this week’s video. With all that out of the way, let’s go and check out ems
and the problems they cause and how you can solve them. And when you still do wanna be using ems. All right so we’re gonna start off here with a slightly not so realistic example, but then we’re gonna
push into some realism in something you might run into. But I think this unrealistic example is the best way to illustrate
exactly what’s going on when we use ems for our font-size. And I have already
started setting up things with ems for my font-sizes
all over the place here. So if we look here though. So my font-size is 1.125
em, which is my paragraph, which is this one. So you can see that is a little bit bigger than my list here. Oh man, I want my list to also use this. And as soon as I, let’s exaggerate this. We’re gonna end up with a
pretty, big-font size right now. We’re gonna boost it up like that. And I go, I want that, and my uls to both be using this font-size. And I know we normally
maybe put a body font-size. But just again, bear with me. Maybe not the most realistic example, but look what just happened. This one looks fine. This is big and holy-moly like woo, I just don’t know what to say for that. And so, what we can do is, I think we can bring this
back down to maybe 1.25, it’s exaggerating more
than I thought it would. So we can see here like big,
bigger, big like holy-moly and if it kept going it would get worse. So, what’s happening is
ems compound on each other. When ems are used as a font-size, they look at their parent’s font-size to know what to be set to. So, if we go and look
at he markup on this, we have our paragraphs, so
that’s the font-size we set, and then we have this ul here. So this ul has the font size of what was it?
1.125. So we have the font-size
here of font-size 1.125 em which equates to whatever it does. But then, in here we have another ul. So this is taking that
whatever you also say, that equals what? Probably like 18 pixels. We have that, but then what’s
happening here is it’s going well this is actually gonna
multiply by this number. So we’re actually getting em times 1.125. And then, the next one
is gonna take all of that and it’s gonna multiply by
1.125, multiply by 1.125, ’cause it’s sort of
it’s taking this number and we’re multiplying it again by 1.125. So we end up with like this
massive font-size problem that’s going on. Again, maybe you’re not
running into this problem with the lists, I doubt you
are, but it could come up, it’s something that isn’t out
of the realm of impossibility. But let’s get rid of this
list for now and take a look at something a little, bit more realistic that maybe you’d run into, which is something like
a separate component like I call to action,
that I’ve put right here. So on a call to action, you
might say something like I want my call to action
to have a larger font-size, ’cause it’s more important, I
want this baby to stand out, I want people to see it. So I set my font-size on my
call to action to 1.2 em. So I want this is for here, I
want this to be a bit bigger. Now on the title, maybe our title’s fine or maybe, why not, let’s
put font-size of 2.5 em on the title, so it gets a little bigger. Let’s actually boost that one up to three. So, like this is gotten really big but because it’s not actually three em, it’s a lot bigger than three em, ’cause it’s three em times 1.2 times do I have another thing on there? No I didn’t set a body font-size, ’cause this could be compounded even more. So this is getting big, but then this button is becoming massive. So, let’s go back to my markup again, ’cause so I have my h2,
so it’s getting compounded by like the double em thing going on here. This is getting compounded to be bigger than I would have anticipated, ’cause on my, let’s come back to my my call to action body has
a font-size on it as well. So this is compounding against that one. And then we have my button here which do, do, do, has a
font-size on it as well, which is compounded a
whole bunch of times, ’cause this button happens
to be inside of a paragraph. So that button is getting
compounded as well and ends up much, much bigger
than I would have hoped or anticipated that it would be. So this is really where
instead of using em. For font-sizes, I’m gonna really encourage that you use rems instead. So let’s switch all these over to r, we could do this a faster way
but I’m just gonna scroll down so we can see if I get them all. And hit Save, and everything
becomes a bit more manageable and a lot easier to deal with and handle. And actually, we’re gonna get
rid of this one for a moment so this actually gets a
bit smaller, there we go. So we get rid of that
compounding issue that we had and we actually know what
sizes things are going to be, because rems are referring to the root em. So the root you can actually
choose your root like this, you’ve probably seen that
with custom variables at one point or another. But the root in essence
is just your html element. So it’s stealing the font-size from here. So by default, the font-size is 16 pixels and I think all browsers, but can change depending on user settings and a few other things, they can come in. But it pretty much defaults to that. Now some people like to take
this and make it 62.5% I think. I haven’t done this in a long time but I’m pretty sure it’s that which makes 16 times that
number is equal to 10 pixels. So it makes it easier to know
what values you’re gonna get. So if you put two rem
it’s gonna be 20 pixels. So people, sort of like doing that. But the problem, I don’t
think we need that personally, ’cause then you’re sort of
having to reset everything, then you’re coming on your body and you’re changing your body. I don’t know, I’m just so used to and I find once you
start working with rems, you sort of get used to
what they’re gonna be and you see some text, you know
if you wanna go a bit bigger a bit smaller, you know at 18, I’m pretty sure 18 is 1.125 rem, and you sort of get some
numbers that you know work. You might be using a modular scale anyway in which case, you’re not really worrying about your pixel values along the way. And then, because it’s always
referencing back to the root. So it’s always referencing
back to the html. Whether you’ve declared it or not, you know that even though this
is inside of something else, so even though my call to action we can make this like five rem, or em it’s gonna change my padding ’cause I have this padding is set to em, but the font-sizes in
here are not changing. All my font-sizes have stayed the same and it makes it much,
much, much more predictable to actually use. So for your font-sizes I
really, really would say stick to rem if you’re not sure. And when do we use ems then? Well ems come in when you
wanna set margins and padding and things like that. So say I have my button here. And I always use buttons for this example because if I had my paddings, in this case it’s not
referencing the parent. If it’s on the font-size, we’re referencing the parent font-size. But if we’re on the padding, margin, anything else like that, instead of referencing the parent, it’s referencing the
font-size of that element. So that’s really, really
important to understand. The ems set on anything
else other than font-size, don’t reference the parent, they reference the
font-size of that element. And I would say it again,
but I don’t want you to stop watching it, but it’s really important
to understand that. That’s like this core concept. And what’s so great about that now is I can take this and
change the font-size on there and the padding and
margins will grow with it. Or if I need a small button,
a really small button, the paddings and margins are
shrinking and growing with it. Whereas, if I set this in rem,
so let’s go and try that out, these are now set values, like this is pretty much
like setting it in pixels, it’s never gonna change. So it’s there. If I make my button really, really big, let’s just exaggerate
that even more, seven. See how small this space this? Like compared to what it was
before, I made it too big. So we have some empty
space and stuff around it. But this space relatively
speaking is completely different. And if we go down to a
really small font-size, now there’s like so
much space around there compared to before. So again, if I switch this
over to em instead of rem, now my button one, gets more consistent when my button is shrinking and growing. So if you had like a series
of different buttons sizes, this just makes your life so much easier. Could be the same for your margins, same for a lot of different things. Now margins maybe one that’s consistent and is never gonna change,
then you can set it in rem. But if you like the
fact that it’s locked in with your font-size, sort
of like a margin bottom, you might put on paragraphs
or on your headings that will be consistent then
with the size of the font, and automatically adapts, you don’t have to sort
of stress about that or worry about how things
like that are changing. Hopefully, I cleared
some stuff up for you, ’cause I know a lot of people
seem to struggle with that and as I’ve mentioned before, I had another video on it, a lot of the similar concepts in there, but just with the questions
I keep getting on it. I thought it was definitely worth bringing the subject up again, and exploring in a little
bit of a different way than I originally had. So I hope you learned
something along the way. If you use ems or rems in any
interesting or strange way or have any questions
about them continuing, please leave a comment down
below to let me know about that. If you’re wondering why
we just don’t use pixels, that’s a really good question. And it mostly revolves
around a few things. We don’t wanna use
necessarily, a set value. Using rems also can make
our lives a lot easier when it comes to changing
font-sizes across your whole site because we’re always referencing the root, if you put in a media query, where you’re just changing the font-size of the html element, your whole site’s is just gonna poof! Everything’s gonna change along with it. Now it’s not always perfect, but it can be the first
step in just making life a little, bit easier, like, oh Mobile has the html,
has a font-size of like 70% and then that goes up to 90%,
and then it goes up to 110%, and just, your whole site’s
updating the font-size for your different screens without having to go through all of the different font properties that you wanna be setting. And so that can really
come in handy as well. I think that’s it. So, once again, a big
thank you to Skillshare for sponsoring this video. If you haven’t yet, go grab
that two month free trial ’cause again, I really do think
it is an awesome platform. As well as Skillshare, I’d
also like to thank my patrons for helping support me here as well, in everything I do here, they’re supporting me every single week just helping bring updates
and like close captioning, and this microphone and just making the helping to support what I’m doing here so I can bring higher
quality videos to you guys. So I really appreciate
the support coming from everybody over on Patreon. And double thanks to
Fernando John, and Lauren for being my supporters of Awesome. You guys absolutely rock. Thank you so much. If you haven’t yet, come
and join the community, come and join us at the community. There’s a link down
below, it’s free to join. Come have fun, hang out, ask questions and it’s a fun place to be. So I really encourage you to come there. And if you haven’t signed
up for my newsletter, what are you waiting for? If you don’t wanna miss a
video you can subscribe here. But I also have articles
and I do some other stuff. If you subscribe to my newsletter, you’ll never miss any content that I do that link for that obviously
is in the description as well. Thank you so much for watching and making it all the way to the end. I hope you learned something. Look forward to seeing you next week. And until then, don’t forget to make your corner on the Internet
just a little bit more awesome.

49 Replies to “Why you shouldn’t set font-sizes using em”

  • Usama Asfar says:

    I use rem for font-size and em only for media-quries 🙂

  • Gene Price says:

    What do you think about something like "font-size: calc(1.5rem + 0.5vw); " I've seen people using this for scaling the font as the screen size changes. Thanks for this video, I did not know that em's compounded like that.

  • Ierdna Niladam says:

    Great video never knew about rem and em and how they work etc
    only 2 months xDD (my parents card and mine ive used 10 months free xD) now im payng but yeah 10 months free was good

  • Jeff Schwartz says:

    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.

  • Krešimir says:

    I use rem exclusively, with the exception of pt, which I sometimes use with printing in mind.

    But the worst thing you can do is using viewport units for font size, it completely destroys the accessibility of a webpage. Browsers really ought to prevent developers from doing this.

  • GeorgeMeehanDev says:

    So if I understand you right for font size we use rem for padding and margin use em? What about using percentages for font sizes to make them more responsive? I've noticed that when I use rem or em's for font sizes they really don't grow or shrink when the site gets smaller. Especially on h1, h2 , and h3.

  • blinkapec says:

    Wow! I thought I knew enought about EM's, but using for paddings is cool, thank you again!

  • Neil Gardner says:

    To solve the em compounding without using either pixels or rems, you could use the > selector between the list parent and list item tags. However, good old IE6 did not support parent > child selectors. Font-size is an inherited property so using ems for heading and paragraph elements ensures they always have relative sizes, while you can adjust base size for the element. Rems are only relative to the root em of the html element, while using a mix of pixels and ems lets you vary text size in different regions.

  • Matt Hazard UXD says:

    Thanks Kevin! Longtime viewer first time commenter. The context in this video really solidified the inheritance concept of REMs for font size. I haven’t nested text the way you did in this video so the concept seemed too abstract before, I’ll definitely use REMs for font size moving forward.

  • Deaf dog says:

    i have been following various tutorials on html , css and js for the past couple of months, currently I feel as I have hit a wall and progress has reduced significantly as most of the tutorials target beginners ,… please suggest as to how to further Improve my skill in this field

  • Farhan Awan says:

    good video

  • Abdulasalam alqaisy says:

    Hi tec. Kiven
    What css editor you use.

  • Andy Erickson says:

    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!

  • Loren Helgeson says:

    Personally, I use a base pixel value (usually around 20px) on the HTML element, and then scale all font sizes (and some instances of margin and padding) using rem's. I rarely every use em's except for things like "small" or "large" classes. And those I use sparingly.

  • BlackZero Rs says:

    Whats wrong with the px? 😁

  • Aleksandar Knežević says:

    So in a manner of BEM it would be ok to say that parents should be addressed with rem's and children and grandchildren with em's to keep the flow? Just thinking here out loud…

  • daniel haibara says:

    Great video as always =)

  • Jiyun Zhao says:

    finally get the point of em and rem. Confused me since I knew them. Thank you so much!

  • Verdict says:

    Hi, thanks for your video, very clear, well prepared, and informative.
    Can I ask what you think about using a responsive font size on the html element that varies from 12px to 16px (for example) depending on the width of the screen (search for "Fluid Typography" on css tricks for more details on the method). Then because all font sizes are in rem the whole site kind of shrink when the resolution is lowering. The project I'm currently working on is the first one where I do such a thing and I wonder if you already done that and/or know some drawbacks that I should be aware of. Thanks again!

  • Nadia Guarracino says:

    Thank you! I've read tons of articles to clarify these differences but they were too boring to actually fix something in my mind eheh

  • Son Of Troy says:

    Yes… by using rem and em I also experienced exactly what your talking about, I think if we take some down time and play with the css code we’ll be able to learn those things on our own, I stopped using em with font-family and only using rem. How em react to margin and padding was something I was unaware of so I thank you for that and will implement that into my css code

  • acoffeeaddictbean says:

    I wish youtubers do consider their non English-native speakers and speak clearly. Like i want to learn but I’m half way through the video and I didn’t get why I shouldn’t use em.

  • CINTRON says:

    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!

  • pendaco says:

    What's up with those double underscores in the class names? 🤨 You crazy?

  • adrian20065 says:

    This is great! Using em paddings. Should I use em on margin? Thank you so much!

  • Paul McCann says:

    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;

  • Nicolas Emkis says:

    Really great video. I'll grab this knowledge for my life

  • shreyas D says:

    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!

  • James McBride says:

    How did I not know this?

  • Vladimir Mikulic says:

    Kevin, thanks A LOT.

  • BristlyBright says:

    😮
    So that is how it works! Thanks!

  • shreyas D says:

    @9:25

  • vladimirs says:

    Like always, awesome! Keep uploading such useful content like this. Thanks!

  • Vikram Jaryal says:

    Hii Kevin which vscode theme are you using

  • Sunny Vakil says:

    Hey , Kevin!! I’m really your big fan. I’m learning so much from your you tube channel, specially CSS.
    Do you have any video that can help me to learn How to create Web Component in vanilla Js or Angular?

  • Butt Umi says:

    Hi 👋

  • RaddyTheBrand says:

    Awesome! Thanks Kevin!

  • Stephen Ifeanyi Nwakasi says:

    Thanks for putting out this one. Clearly understood

  • Bloodling says:

    62.5%

  • Greg Fletcher says:

    What a legend! Thanks for the great explanation!

  • Jack Blair says:

    No one need bother with Rachel Andrew or Jen Simmons ever again.

  • Joel D Canfield says:

    I've finally started using viewport units in special cases for display text, especially for responsive design on mobile devices. Any special cautions about that as opposed to, say, percentages, rems, etc?

  • Fritz Schnitzer says:

    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

  • Johnny Garces says:

    awesome video, Kevin! Thank you. Would love to learn how one would go about setting margins in ems for the purposes of creating "vertical rhythm". Have you done this in a web project?

  • juan reyes says:

    I thought I never gonna use em, but now there is a perfect case to use so along with a perfect explanation when not to use them. Thanks!!

  • tom clumsy says:

    because of wix.com i felt like i'm poor for learning css and html. why people still study this if you can make it the easy way. can u make a video in regards of this matter. it is distracting youtube don't put those kind of ad's in video's like this. >.<

  • Subham Raj says:

    Thanks <3

  • Lokus122 says:

    only font-size em reference to parent element, rest of properties with em value reference to that element. MIND BLOWN

  • Sharple says:

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.