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