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

2.2 How `rem` and `em` Units Translate to `px` Values

Even though we might use em and rem units differently, ultimately they both translate to px units in the browser. The way this translation differs between rem and em units is fundamental to understanding each unit of measurement. Let’s take a look.

2.2 How `rem` and `em` Units Translate to `px` Values

Hey, welcome back to A Visual Guide to And Rem Units. In this lesson, we're gonna start getting hands on and stepping through some more of the details of how units and rem units are translated to pixels in the browser. Right now, in your webflow sight, you're gonna just have a blank page. So, to get the ball rolling, we just need to do a little bit of set up. So to do that the first thing we're gonna do is adding a new div, we do that by hitting this plus button up here. And then just clicking div block. Now we're gonna style this a little bit. So we'll add a new class, add the class wrapper. Now we're gonna give this wrapper a width. So type 50 into the box here. We actually wanna size this with rem units. But if you hit the little drop down list here, you can see that there are no rem units in this drop down list. But web flow does accept rem units. You just need to type them in manually. So after the 50 just type in rem and hit Enter. And then you can see that the unit the web flow playing there is changed to rem. Now we just want to center our wrapper which we can do by hitting this little button here. And we're just going to give it a little spacing above so in this little box here which controls that top margin. I just want you to insert two rem. We're gonna use this wrapper just to hold a couple of divs that we're gonna add in one to demonstrate how rems work and the other to demonstrate how ims work. So now let's move on to adding in those boxes. Make sure you've got your wrapper box selected then go back up to the plus button here and add another div block. And because you have already got the wrapper box selected that div is gonna get inserted inside it and making sure you keep that selected. We are gonna give our new second box a class. We're gonna be using this box to look at how rems work. So give it the class rem_box. And then to make it a bit easier to see what the width and height of this box is, and how it's behaving. We'll just give it a background color. So scroll down here, hit this little color drop icon. And just give it any background color you like. All right now let's start having a closer look at how rems work. The first thing we'll do is give this box a width. So just like we did with the wrapper, we're gonna insert 10, and then type out R-E-M and hit Enter to make web flow use rem units on this. Now I already mentioned in the last lesson that what drives the way rems behave is the font size on the HTML element. Now let's have a closer look at that. By opening up the Google web developer tools, we're gonna hit our little element selector on the top left of the dev tools here, and then we're gonna select our rem_box. Now let's go over into the computer tab and have a look at what width is currently being calculated for this box. Right now we're at 160 pixels. So the way that rem units work is they take the font size on the HTML element and then they multiply that font size by whatever rem value you use. In our case, we've used 10 rem. So we have multiplied the HTML font size by 10, giving us 160 pixels. So we can intuit from that that the font size currently applied to the HTML element is 16 pixels. Let's take a closer look at the HTML element, check out its code and see if it is what we expect it to be. So a couple of lines up here. This is the HTML element for the sight that's being designed within our web flow environment. And if we go into the styles tab we can start looking through the CSS that is being directly applied to this element. But if we go through here, we don't actually see any font size code at all. So what we can do to see what the HTML font size actually is, is go into the Computed tab. Now at first here, you're not gonna see any font size either. Because this tab will initially show you what is being computed directly from the CSS that's applied to the HTML element. But we don't have any font size CSS applied to our HTML element. So there's nothing showing up here right now telling us what the font size is. What we can do to allow us to see that font size is check this little button here that says, show all. And this gives us every single CSS property that is affecting the HTML element, regardless of whether it's coming from CSS or if it's being inherited directly from the browser defaults or the browser settings. And we're gonna go into how browser defaults and browser settings play into all of this in a later lesson. But for now, just so you know where to look, check that box, and then scroll all the way down into the f's and there is our font size. So right there we can see that our font size and our HTML element is currently 16 pixels. So that ends up with what we expected to be. We have 16 pixels on the HTML font size, we set our box to be 10 rem in width. So we've taken that root font size of 16, we've multiply it by 10 in our rem value and that had given us the resulting 160 pixels width. So now if I change the width in rem values on our box, let's say I bump it up to 20 rem, now we're multiplying that HTML font size of 16 by 20 to get the width of our box. And you can see that as you would expect when we do that, the width of our box doubles in size. It's now 20 times the root font size value of 16 giving us a total of 320 pixels in width. And this HTML font size or the root font size affects any root value that's used all throughout your design. And you remember that we sized our wrapper using rem values so we set it to 50 rem wide. And if we use Google's developer tools to have a look at the wrapper element as well, we just uncheck the Show All so we have a few less items to go through here. Now if we look at the width of our wrapper element, we can see that it is 800 pixels. So in this case we've taken that 50 rem value, and we've multiply 50 by the root font size of 16 to come out with 800 pixels in width. And the important thing to take away from this is you have this one font size there, this one value in your document, that's driving the sizing all throughout your entire layout anywhere that you use rem values. So here if the HTML font size changes, then the width of both our inbox and our wrapper changes as well. And there are a bunch of different advantages that you can take from that ability to size all of your layout items depending on that route font size. And we're gonna go into those advantages a little bit later. Next up let's look at how this type of behavior contrasts with the way that m's work. So make sure you've got the rapper box selected in web flow and then click the plus button again and add another div. This time we're gonna give this new div the class name em_box. We'll just close developer tools to get them out of the way for now. We'll give this box another color, just to help differentiate it. And now what we're gonna do next is set the font size on the em_box itself. In this case, we're gonna set the font size to 16px. So its font size is now the same as our root font size for the purposes of this exercise. Now we're gonna go to the width property for this box and we're gonna set the width to 10. Now what is actually happening here is very similar to what we just looked at with a rem box and we set that to 10 rem. Which was then multiplied with the root font size of 16 pixels to give us our width of 160 pixels. This time, what's happening is instead of multiplying by the root font size, we're multiplying by the font size that's on our actual element. So the font size that we just put onto our inbox class, so we're taking that 10 value, it's being multiplied by the 16 pixel value we put on the font size. And that should give us a width of 160 pixels. Let us open our developer tools and see if that is the case. Grab our element selector and select our em_box and then we'll go into the computed tab and sure enough our width has come out as 160 pixels. So now what happens if we change the font size directly on the em_box itself? Let's bump this up to 20 pixels instead of 16. All right, and there you can see that the size of the box has increased. If you change the font size on an element that's being sized using rems then nothing is going to change because those rem values are only affected by the root element font size. But if you change the font size on an element that is using em-values for any of its layout controls, then it is going to change. Because the font size that drives em-values and how they are converted into pixels, is the font size of the element that you're applying your values to. So we've just changed our font size here to 20 pixels, that value's being multiplied by our 10 width, to give us a current width of 200 pixels. And we can change that font size to anything we want, let's bump it up to 30. Now that's being multiplied by our 10 width to give us 300px width. And then now that we've changed our font size again, if we were to go back and adjust our width, let's say up to 20. Now, we're multiplying 20 by our 30 pixel font size, and that is bumping out with up to now, 600 pixels. And that's actually something that can be really useful deliberately setting things up, so that if the font size and an element changes, it's layout change along with it. And we're gonna go in more detail into how to take advantage of that in a later lesson. But one of the gotchas you can run into when working with em's is the problem of inheritance. Font sizes have a way of cascading through an entire document. An element can inherit a font size from its parents, which can inherit from its parents, and so on. And the effect of inheritance on font-sizes and in turn on value use can cause some complication. So if you want to use value use in your designs then its important to just understand exactly how inheritance works and how to fix units. And that's what we're gonna go into in the next lesson. I'll see you there.

Back to the top