CSS has two units of measurement—ems and rems—that have become really popular because of their flexibility, especially when working with fonts. In this episode, take a look at how they work, because they can trip you up in questions during a job interview.
- [Instructor] CSS has two units of measurements, Ems and Rems, that have become really popular because of their flexibility, especially when working with fonts. In this episode, we're going to take a look at how they work, because they can trip you up as questions during a job interview. Now, pixels are the traditional way to size typography on the web. But in some older versions of IE they are not resizable, and that presents an accessibility issue if someone doesn't have good eyesight, and needs to make sure that the fonts are bigger on your page.
Now, Ems or Rems are relative sizes, which means you can base the size of elements on other elements. One thing to remember is that every browser has a default font. Now, in most cases that's 16 pixels, but you can change that default to something else, either in settings or in your own stylesheet, and that affects how you use Ems and Rems. Once you know your default font size, Rems are always going to be relative to the root font size. That's why they're called Rems, for Root Ems.
So their size is going to depend on where they are in your layout. Let's take a look at some of the common techniques for working with font sizes. So here I have a pretty simple project. And you can see that I have three quotes, and then this section here called testimonials. So, everything's in a class of testimonials, and then inside there I have a series of blockquotes, there's three of them, and each one of these blockquotes has an ID. So, inside those I have another section with a class of quote-text for the main, sort of quote, and then I have, also, another div for the class of quote-customer, and that's just the name of the customer.
So, if we take a look at the style.css file, you'll notice that I'm not specifying any font sizes quite yet, so right now they're being ruled the defaults set in our font. I'm using Google Chrome, so if I want to change that, I can go to Chrome preferences, and then I can scroll here to this place called font size. So, just remember that somebody may have set their font size to large or very large, and that is going to affect how this looks. It's also going to affect the default font size.
So, I'm going to leave it as medium right now. And, so, your page might look a little bit different than mine. And, also, if you're going to be working with font sizes, it's a good idea to go to the inspect panel. And if we take a look at this section right here, you can see that it gives you some information about the fonts, and I actually need to make this a little bit bigger, so we can see it like this, and I want to make sure that I'm not just in the regular styles tab right here, I want to go to computed.
And this should show me, in most cases, the fonts as well as their sizes. I haven't really specified a default font size for this page, so that's not quite going to work yet. So, let's start by doing that. So, let's say that I want to make sure that my font size is set to something other than the default. If I want to, I can set that, and I'll do it in the body, and in here I can set the font size to something like 18 pixels. So, that's actually going to make our fonts look a little bigger.
And notice that now I get, sort of, a default font size. Right now I'm in this quote, but it doesn't really matter if go to the paragraph, you'll notice my font size is now set to 18 pixels, 'cause that's what I set as, sort of, the default font size for the entire body. So, if I want to specify a different font size for the customer name, I can specify a font size of 2rems, and remember, the R in Rems stands for Root ems.
This means that this font size is going to be 36 pixels, two times 18 pixels, and so now this is going to be a lot bigger. So, rems are always going to be relative to the, sort of, default font size. And doing the math conversion between what the font size is supposed to be and what you want can get a little bit tricky, so, there is sort of an interesting trick that you can do, and that is to change your font size here at the html section.
So, what you could do, is change the font size to 62.5%. And what that's going to do, is change the default font size, so that it is essentially 10 pixels, 'cause that's a lot easier to sort of remember. Once you do that, then you can change the font size of the body. I'll change this to 1.6 Rems. So, what that will do, is it'll reset the font size back to 16 pixels. So, if we do this, and we take a look at our code, you'll see that nothing really changed in terms of how this looks, but what we've done is make it a little bit easier to define what our font sizes should be.
So, I know now that instead of 36 pixels, this is going to be 20 pixels, because we set the default to 10 pixels, and two times 10 is 20. If I wanted this to be 24 pixels, then I would 2.4. And sure enough, if I take a look at that testimonial, so, if I open up this blockquote, and take a look at this, and look in my computer console, you should see that this is now 24 pixels, that's where computed comes in really handy, because it does the math for you.
So, if I wanted to make sure that this was 30 pixels, sure enough, I would just do 3rem. And that's a little bit easier to do mathematically, but when we use Ems combined with Rems, things get a little bit more powerful and interesting. So what I can do here, is actually change the way that my quotes work, just the quotes that are the containers for everything, so, I'm going to do that right now. And I'm going to change the font size of all my quotes to be 1rem. That's going to set them up as being 10 pixels tall.
So, notice that this one didn't change? And that's because Rems are always relative to the root value, so this is still going to be 30 pixels right now. And what I can do though, is if I change the size of this quote, then I could base my other elements on the size of those. So let's go ahead and modify the text of the quote, so, we'll say quote-text, and we'll set that to have a font size of 2ems instead of Rems.
So, what that's going to do, is make sure that the size of these items are 20 pixels. Let's check that out. Quote-text, that becomes 20 pixels, again, because our sizes are based on 10 pixels, 2ems is two times whatever the quote is. Remember, the ems are going to relative to the container, and the container of this quote-text is actually this quote, but because it's set up to 1rem, and 1rem in this document means 10 pixels, then it's a lot easier to sort of figure out what these things are size two.
So, now that I have that one set up to 1rem, and the quote-text set up to 2ems, let's go ahead and change the customer-quote. We'll set that to 1.5ems. And let's go ahead and make this a little bit bigger here. So, I've made it a little bit smaller, and this one should now be 15 pixels. Let's check that out.
So if we go down here to the quote-customer. It's a little bit difficult on this screen, but you can see that the font size is 15 pixels, 1.5em. That's, again, based on this quote, which is set to 1rem. So, why is this particularly useful? Well, this means that I can now change the size of all the quotes together. So, let's say I wanted to make these quotes a little bit larger. I'm going to just do 1.3rems. So, I'm changing the size of all the quotes together, so, now all of them have become bigger.
Notice that this text right here and this headline did not become bigger, and that's because I'm targeting the size of these quotes, and changing their relative size to look bigger, and they're all changing together. Let's go ahead and reset that to 1rem, so, that they are based on 10 pixels. But that means that I can also change an individual quote. So, let's say that I wanted to change the Sam quote or the middle one to a different font size individually.
So, I'll change the font size here to 1.5rems. So instead of this quote being 1rem big, it's 1.5rem, and now that size of this content becomes bigger, and even the size of this customer becomes also bigger, relative to the size of this element. So, the advantage of working with Ems together with Rems, is that when you use relative Ems on the containers, like we've done right here, then you can size an individual container, so, that it is different or bigger than all the other containers, or you can resize all of them together.
And once you learn how to work with Rems and Ems together, it becomes much easier to create your different layouts. So, here's some pages where you can get more information about working with Ems and Rems, as well as a couple of related courses. Now, if you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked or have asked in interviews, connect with me in LinkedIn, or just about any other social media network like Twitter or GitHub at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.