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

2.5 When to Use `rem` and `em` Units

In the last lesson of this short course, let’s distill everything we’ve covered so far into practical application: what the advantages are of using rem and em units, or not using them, in specific scenarios. Based on these advantages, you can decide for yourself the approach you want to take in your own projects.

Related Links

2.5 When to Use `rem` and `em` Units

Hey, welcome to the last lesson in a visual guide to and rem units. We've now gone through and covered all the moving parts of and rem units, how they operate, how they convert to pixels in the browser. How inheritances work, and how the HTML element and browser settings are going to affect your and rem units. So now we're gonna wrap everything up by looking at practical applications of this information. I've said a couple times so far that there is no absolute right or wrong way to use units in your designs. But there are specific advantages, and it's up to you to decide if those advantages are important to you and appropriate for your projects. So we're gonna start by looking at the advantages of using primarily rem units throughout your designs to control your layouts and most of your font sizing. I think the best way to do that is to show you an example of a site that's built this way. So, this site that you see on your screen right now is built using rems for all its widths, its heights, font sizes, and its media queries, and the whole thing is fully responsive. I'm gonna use Chrome developer tools to show you the different types of responsive resizing. So we can jump into the mobile emulator, and we can choose a whole bunch of different screen sizes, orientations, and zoom levels. So everything in this design is gonna work perfectly with zooming. Which, as you recall from our earlier lessons, scales everything in the page equally in the page, regardless of unit. However, this is where it's cool. Everything will also scale to respond perfectly to the browser HTML font size setting, too. If someone wants to have their text set to large or very large, then the whole site is gonna work in with that setting. You can see here how everything in the site has scaled up. So the spacing and the layout all still works perfectly with the change in font size. And because rems are used in the media queries, even those media queries are gonna kick in when the browser font size is changed. So that means that if somebody increases their text size and the whole site scales up, then it's gonna behave the same way as it would if it was squished down on a small screen. So it's gonna collapse its columns down, it's gonna switch to a different type of menu. So no matter what the font size is, the whole site stays really readable. There's no cramping, and it's still really easy to interact with everything. And it also works in the opposite direction as well. If the user's font size is scaled down to a smaller amount, then the whole layout will shrink along with it. So all of this, if you only use pixels in your designs, then you're just making the decision that this type of functionality is not gonna be possible on your sites. You're effectively saying that zoom is the only way that you will permit a user to scale text up or down. So it is a conscious decision that you have to make if you wanna use only pixels that you are going to be potentially overwriting user preferences. So, a pretty significant part of deciding whether you wanna use rem values heavily in your designs is determining how valuable you feel it is for people to be able to use those font settings on your browser. Some people argue that there are only a few people who actually use these font settings, so it's really not that important. Other people, myself among them, put forward that our place as a web designer is to support user decisions, rather than override them. Now, I haven't actually been able to find any strong data on exactly how many people do or don't use these font settings. I know I use them in certain circumstances. And as such, in my designs, I support those settings. But of course, the amount of value that you place on those settings is completely up to you. And the other consideration on this front is not just the browser settings that the user might change. The next reason that you might want to use rem values is not actually user focussed. It's development focussed, because if you do use these values, you have the ability to scale your whole site up and down if you need to. So if everything seems it's a little bit small, you can bump up that base HTML font size, and everything is gonna scale up with it. That perk alone is probably not enough by itself to make you wanna use rems. But if you find that the other reasons to use rem are of value to you, then this is definitely an added perk that can really be quite handy sometimes. So to put that in a little nutshell, basically you should use rem units when you want your site's elements to be scalable based on the HTML font size. That can be whether it's to fit with browser settings or changes to the HTML element font size you make yourself. If browser font settings and layout scaling not really of any particular concern to you though, then you probably won't have any strong reason to work with rem units. Now we're gonna take a bit of a look at working with text, and the first thing we're gonna look at with text is actually when you should use neither rem, nor nor pixel. But rather no unit whatsoever, and that is with line height, and I'm gonna show you why. We're back in our workflow document, as we left it last lesson, so let's just quickly remove our boxes here and add a paragraph of text inside our wrapper. You probably noticed that as soon as we put this text in, it looks really cramped. Each one of these lines is not high enough. Now we're gonna select the wrap element that's containing this text. And if we look at the setting here of what line height is governing this text, we can see that it's inheriting a line height of 20 pixels. And this is an example of why there really aren't a lot of benefits to using pixel values on line heights. And you might think that ems are the best value to use on line heights because they're relevant to the font size on a particular element. But in actual fact, using no unit at all on line heights is what's gonna give you consistently the best spacing in between your lines. So what we're gonna do with this text is we're gonna set the line height to 1.618. That's the value we apply, that's just the value that I like to use. You can use anything you like. And then to set this to no unit, we hit the little drop down here, and we'll select this little dash icon. And then right away, that's become a lot more readable. You've got a good amount of space in between each of those lines. So we've set that line height on our wrapper element, and we're allowing the paragraph of text to inherit that setting. So now let's go into the paragraph itself and see what happens if we change the font size. Right now, it's inheriting 1.5 as its font size. We can bump this up to 1.8 the line height is still good. We can put it to 1.2 and the line height is still good. Now select the wrapper again, and let's see what happens if we have an value as our line height instead. And you can see the difference in line height in between using a unitless line height and an em-based line height. And the reason this is different is, if you use a unitless value, then even on an element that has inherited that unitless line height value, it's gonna calculate that line height based on the computed value of the actual text element itself. If values are used, then the line height that you end up with is going to be calculated on the parent level. And then the line height that applies to the parent level is gonna get handed down to the child. So, I know that sounds potentially a little complex, but basically what you need to know is that with line height, if you use a unitless value, it's gonna apply more accurately to child elements that run down the chain and inherit that line height value. And we can see that happen if we select our wrapper element and we change the line height to 1.618. And then we go into our paragraph settings, and we start changing the font size here. You can see as we change the font size upward, the line height is not going along with it. And that's because it's trying to apply the line height that works for the parent element, rather than the line height that works for its own computed sizing. So now on to when to use ems, you already know that rems give you all the benefits of ems, just without inheriting from parent elements. So therefore, you should use ems when you specifically want to inherit from parent elements instead of from the root element. So for example, when you're designing a portion of your layout around text that's not the default size on your site, so like a menu or a button. These are a couple of examples of things where if you change the font size on that menu or on that button, it's gonna make it a lot easier if the layout of the whole thing changes with that font size. So let's take a look at that and practice, so just undo all the text changes that we did a minute ago, until we bring back our three boxes. And we're gonna go through and undo some of the changes that we made in previous lessons. So we get all these boxes back to being equally sized. We'll change the font size on the inbox to 1. We'll change the font size on the wrapper back to 1 as well. And then because we've been messing around with Chrome Developer tools, you might just need to reload in order to get rid of the changes that we were adding to the HTML element through that. So then, you should have all three boxes looking the same as one another. So as your goal, we have our box here using ems on its width and padding. The rem box uses rems, and the pixel box uses pixels. Now if I change the font size on the box, the whole thing scales up, and it keeps a comfortable amount of spacing around the outside of the text. But if I do the same thing on the box with rem-based sizing, it doesn't scale. And as a result, the text inside looks all squished up, and of course, the same thing is true with the pixel control box. If that font size changes, nothing else does. So using ems in segments of your design that depend directly on text inside those elements can be super, super handy. So if you need to scale up the whole menu, or the whole button, or whatever else it is, you just change that font size, and everything else scales. So another example of where this type of em-based scaling can be useful is with headings. If you choose, you can have em-based headings, and then if the size of your text needs to change, your headings can be sized proportionately to that text. So let's look at a quick example, we're going to drop a paragraph into our wrapper element. And we're gonna give that text a line height of 1.618 with no unit. And now we're also gonna drop in a heading. And we're gonna set this heading to have a font size of 3. Now if we select a wrapper from which both of these elements are inheriting their font size, and we start boosting that font size up. You can see that the heading is keeping its scaling relative to the text that it's alongside. And when you have an element where the layout specifically depends on font sizing other than the HTML font size, then you're gonna get benefits from using ems. But because of the problems that can come from inheritance, the benefits of ems really only outweigh the complication that can come from them in the scenario that we've talked about. All right, so now, what about when to use neither nor rem? We already covered line heights, which you get the most benefit from if you leave them free of any unit whatsoever. Sometimes you're also gonna wanna use percentage values, such as for column widths, for example. And then other than these scenarios, there's also the question of when should you use pixel values in a situation where you're tossing up between an or using and rems. Given that the difference between pixels and or rem values is that pixels are a fixed value. The best general advice is to use pixels when you specifically want to have a fixed scale layout. So I'm talking about when scaling would cause actual functional problems. So a good example is actually right here with the web flow interface. You might have noticed that when we were changing our browser font size settings, nothing about the web flow interface changed. If this interface was scaling up with the browser font size settings, it would immediately start causing problems with the functionality of this interface. So for that reason, it makes perfect sense for this interface to be sized in absolute fixed pixel values. Other than that, if you really don't find any of the advantages of scalable values to be appealing in any way at all. You might just personally find it more intuitive to work with pixel values, and that might be the main reason that you choose to use them instead. However, if you like working with pixel values, but you also like the advantages of all of the scalable values, you don't have to give up on the advantages of those scalable values, just to have the arguably more comfortable experience of coding using pixel values. And the reason is, there are a lot of really good tools that can help you convert pixels into their or rem equivalents. So one example is, you can use a website like pxtoem.com. So you go to that website, you just punch in the value that you wanna convert into ems, and then you use that in your code. Or alternatively, another really great solution is to use a preprocessor like Sass or Stylist or List. With a preprocessor, there is all kinds of mix-ins and functions and whatnot that you can use to convert your values on the fly. Or another thing that you can do, this is my personal favorite approach, is to use postcss with a plugin like pxtorem. This way, you can just write all your code exactly as you would normally with straight up pixel values in there. And then you run the plugin on your code, and it will just convert those pixel values into rem for you. I personally use a plugin for PostCSS that I wrote for myself, for my own purposes. Feel free to use it as well if you'd like, it's totally free in Open Source, and it's named PostCSS Rem Phi Units. This plugin does have an option to mass convert all of your pixel values into rem if you want. Otherwise, it lets you specify exactly which pixel units you want to have converted into rem units. So with any of these tools, you can code in pixel values if that's how you prefer to work and still get the benefits of scalable values on your resulting code. All right, so that wraps up all of the major benefits of working with the different types of units that we've been talking about, and that brings us to the end of the last lesson in our course. I hope you'll join me in the final video. We're just gonna go through and have a condensed recap of everything that you've covered in this course. So I'll see you in the final video.

Back to the top