Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:59 minutes

Next lesson playing in 5 seconds

Cancel

Free Preview: A Visual Guide to “em” and “rem” Units

Welcome to the Course

00:49
  • Overview
  • Transcript

em and rem are flexible, scalable units of measurement that give you a specific set of benefits when used to size your layouts and typography. Making decisions on which unit to use in which scenarios can be confusing, especially when opinions on “the best way” can differ widely.

In this course, we won’t be telling you what “the best way” is. Instead, we’ll give you a full insight into exactly how these units work and the pros and cons of using each. You’ll be able to decide for yourself on your preferred approach.

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

1. Introduction

1.1 Welcome to the Course

Em and rem are flexible, scalable units of measurement that give you a specific set of benefits when you use them to size your layouts and your topography. By making decisions on which unit to use and which scenario, can be confusing especially when opinions on the best way can differ widely. In this course, we're not gonna be telling you what the best way is. Rather, we're gonna give you a full insight into exactly how these units work and the pros and cons of using them so you can decide on your preferred approach for yourself. And to help demonstrate how everything works in a visual way, we're gonna be using Webflow's popular web design tool by a free account so you can see the effects of using and rem units in real time. So let's jump in and get started with a visual guide to and rem units. I'll see you in the first lesson.

2. Understanding Units of Measurement in CSS

2.1 Overview of `px`, `em`, and `rem`

Hey, I'm Kezz Bracey and welcome to a visual guide to rem and and units. This first lesson in the course, you can just sit back and relax because you're not actually gonna have to do anything in this lesson. This is purely gonna be a quick demo to give you an overview of the difference between rem, and pixel units. Just a little bit of a foundation on how they behave and the main difference is between the three. Now, what you are looking at here is the Webflow interface. And as you know we're gonna be using Webflow throughout this course. It's just gonna help us to illustrate things in a really visual way. And because you'll see instant feedback every time you tweak your code or you tweak your settings in this case. That just helps make things a lot clearer and just helps you wrap your head around things really fast. So even though you don't have to do anything in this lesson. What you can do is head over to webflow.com and grab yourself a free account. You don't need a paid account for anything we're doing in this course. That will give you the ability to create one website and then you can just use that to follow along with all the examples that we go through in later lessons. All right, so we've got three boxes, as you can see on the screen here. And each one of them is currently the same size. However, the way that we're achieving the size of each these boxes is different. So our first box here on the left is sized using pixel values. If we check out our settings here on Webflow you can see we've got the width set to 160 pixels and the height set to 160 pixels. Then our second box is sized using rem units. This one, again if we look at the Webflow settings, has a width of 10 rem and a height of 10 rem. And then our third box is sized using units. This one has a width of ten and a height of ten. One of the most important things to understand about and rem units. Is that even though you're using these different units in your code, ultimately in the browser they all turn out to be pixel values. So what actually happens is the browser reads your code. Sees that your using or rem units, and then converts those into pixel units. And those pixel units are what it actually uses in the browser. Now the way that we can see how this happens is by using the Google Developer Tools. It should already be in Chrome in order to use Webflow. If not then jump into Chrome now. And then we're gonna open up the Google Developer Tools which you can usually do by pressing F12. Now what we're gonna do is look in our code here. And this is the code that the browser has evaluated. And we are gonna see what pixel values it has actually produced for our rem and our inboxes here. And this is a little bit tricky because we are working inside Webflow. So we have to sort of wade through all of the card for Webflow itself. To get into the code of our boxes here. So the easiest way to find what you wanna look in a Webflow page, is to click this little arrow at the top left of your developer tools here. And then you can select the exact thing that you wanna have a look at. So we're gonna start by clicking this px box. Now over on the right side here you can see the styles tab. And this shows us the CSSs applied directly to the classes on this box. So we can see here it says width 160px and height 160px. What's in this styles tab is just the code that is in the CSS. It's not what the browser itself is actually working with. For that you have to go into the computed tab which shows you everything the browser ends up with as a result of computing your CSS. So if we hit that and then we scroll down. We can see each individual value that has been produced from our CSS. So we can see here that as expected, the height is 160 pixels and the width is 160 pixels. And from here it's a bit easier to select our other two boxes, to have a closer look at those. If you see in the left panel here, in our developer tools. There's a grey highlight over the top of one of the lines of code here. That tells us that that is the code for our pixel box. And then the dibs below that are the code for our rem and our boxes. So now we can just click on the second row here. And now we're looking at the code for our rem box. Now here even though we know that with our rem box we've set our sizing using the value 10 rem by 10 rem. If we look at the computer tab over here on the right. It still says that the width that's being worked with is 160 pixels and the height is 160 pixels. And then, if we check at our inbox, we can see the same thing is true there. It also has a width of 160 pixels and a height of 160 pixels. So all three boxes are being computed in exactly the same way, even though they're using different units in their CSS. So then if all three boxes are coming out as 160 pixels by 160 pixels anyway. Then what is the point of using these different units? Well, the key difference between these three units is how they take their values from the CSS, and compute into pixels. When you understand that process, then you'll have the basis you need to decide how you wanna use these units in your projects. So in the case of using pixel units, nothing changes in between your CSS and the code that's computed by the browser. If you say 160 pixels, it's always gonna come out as 160 pixels. With and rem values on the other hand. The pixel values that come out the other end could be pretty much anything. So what determines how that computation works for rem and values. There are a few different things to consider, but there are two main things. Rems are primarily driven by the font size on the HTML element. And ems are primarily driven by the font size on the element that the value is being used on. Okay, so let's see how this works in practice. Unfortunately with Webflow you don't get access to be able to apply any CSS directly to the HTML element. Unless you have a paid account. So what we're gonna do is simulate writing CSS for the HTML element using Google Developer Tools. So, a couple of lines above the line that we already have selected here. You'll see that we have this HTML element. So I can click on that to select it, and then in the styles tab, I can add some custom CSS just as though I was writing a CSS straight into this document. So just make a mental note that that's how you can do that, cuz you'll be doing the same thing in a later lesson. I'm gonna click after this line here that says over flow auto. That puts me down on to a new line and then I'm gonna add in font size, and I'm gonna set that to 16 pixels. Now 16 pixels is actually the default font size on HTML elements across pretty much every browser. So nothing is changing. But if we change this font size to a non-default value, let's say 18 pixels, now you can see that both the rem and boxes have increased in size. And we're gonna go further into why and how that's happening in later lessons. We can change this font size on our HTML element to anything that we want. So we can bump it up to 24 pixels, and you see that your boxes get even bigger. We'll go for 30 pixels. They are even bigger again. And we'll just drop this back to 18 pixels for now. So you can see how using these and rem values means that you're not working with fix sized layout anymore. You have the ability to control how elements of your layout scale depending on the font sizes that are used in your designs. Now you will have noticed that as we tweak that HTML element's font size the rem and boxes both changed in unison. So then what's the difference between rem and units? Well, they're almost the same, except the R in REM stands for root. Referring to the root element of the page which is the HTML element. And that means that its scaling is only affected by the font size on that root element, on the HTML element. Values on the other hand can be effected by any font size in your entire document. And again we'll explain in more detail about exactly how that work in a later lesson. But for now, let's have a look at how changing a font size that's not on the root element affects the units. But not the rem or pixel units. So this time, I'm going to be working within the Webflow tool set. We're only going to need to use Google Developer Tools when we're working with the HTML element. Everything else, we'll be able to do straight through Webflow. So I have a div here around all three of their boxes. And I'm gonna go down to the typography section that controls the font size of this box. Right now the font size on this box is 1 rem. And I'm gonna increase that to 1.2 rem. And now you see that the box that's sized using units, has increased along with that font size that we just changed. And now if we look at the output that we're getting in the computed tab of our Google Developer Tools. We can say that the width and height have been bumped all the way up to 216 pixels. Meanwhile our rem box is still down at 180 by 180 pixels. I can keep changing this value and each time I do, the size of the box changes along with it. So the difference between ems and rems is that rems are only affected by the font size on that root element, the HTML element. Whereas ems can be affected by the font size on any element in your document. Now that might sound a little bit confusing at the moment, it is a confusing topic when you first come at it. But don't worry because we're gonna go through all of the details behind how this works. And when we're done you should have a really clear picture of exactly how everything functions. So in the next lesson we're gonna take a closer look at exactly what's happening when we convert rem and units into pixel values. As I mentioned this is the fundamental concept that drives understanding the benefits of using each of these units. And that's gonna help you form your own strategy for how you build out your sites. So I'll see you in the next lesson.