7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1 hour

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Units to Use in Typography

When setting the font-size and line-height properties of your typography, it’s possible to use multiple types of units, such as rem, em, px, vw, or even no unit at all. In this lesson you’ll learn which units you should use when, and for what reason.

2.5 Units to Use in Typography

Hey, welcome back to Start Here, Learn Typography CSS. In this lesson, we're gonna go through the different kinds of units that you can use when you're setting up your typography. Now, the three units that you're probably gonna run into the most in your web design career are px for pixels, E-M or and R-E-M or rem. And probably the best way to explain what these different units are is to just show you some examples. So in our HTML on the left here, we've just got three paragraphs of identical text. Each one is wrapped in a div, with a separate class. In the corresponding CSS, we have three different font sizes applied. Our first paragraph is using a font size of 18 pixels, our second paragraph is using a font size of 1.125 and our third is using font-size of 1.125 rem. Now, just give you a quick overview of what each of these three are. When you use a pixel unit, you're specifying the exact number of pixels that you want a font size to be. So your letters should be exactly 18 pixels in size, no matter what other things may change. An unit on the other hand is a multiplier. An unit looks at whatever the default font size would be, and then it multiplies it by the given value. Now, in this case the default font size for each one of our paragraphs is just coming from the browser defaults. So let me show you the current settings for my current browser here. So we have 16 pixels. And at this moment in time, pretty much every browser has a default font size of 16 pixels. So when you use an unit, you're multiplying whatever the default font-size is by the value that you provide. For this paragraph, the default font size is 16. You multiply 16 by 1.125, you get 18. So that's why this paragraph here has come out at the same size as this paragraph here. Our rem unit works almost exactly the same. The only difference is that a rem unit doesn't care what the default size of the current element is. It only cares what the font size is for the root element of the document. And the root element of any HTML document is the html element. So that is this element here, the topmost element. Now, unless you specifically set a font-size for the HTML element, it's also going to just inherit its font size from this browser setting. So our third paragraph is taking this root font size of 16 pixels. It's multiplying it by 1.125rem, and that's evaluating out to a font size of 18 pixels. So at first glance, all three of these look the same, but behaviorally they're quite different. Now, if I bring over the browser settings once again and I change this font size here, this setting, watch what happens to the three paragraphs on the right. So we'll bump that up to 18 as the default. Okay, so look right away, the font side of the first paragraph has not changed. The second and third paragraphs have. So I'll make that a little larger. Once again, that first paragraph is stuck while the other two adjust. And the same thing happens in reverse. If I drag the font size down smaller, the second and third paragraph change, but the first paragraph doesn't. So if you use pixel values, then you're removing the user's ability to customize their own browser settings. And generally speaking, removing choice from a user who may need to change their browser settings to optimize their viewing experience is a pretty bad idea. So then that shows you why pixels are probably not such a good thing to use, generally speaking, unless you specifically don't want something to change with browser settings, so we're just gonna get rid of that CSS and we're gonna get rid of this div. So right now, you're probably wondering, why would you use rem over units? So once again, we're gonna look at an example to show you the difference between the two. What we're gonna do is nest another div inside our div. So both of these have the same class, meaning both of these are going to have that same 1.125 font size applied. Now I'll do the same thing in the rem div, so we'll just nest that in there as well. And once again, we're using the same class, meaning that both of these divs also have this 1.125 rem size applied to them. So we'll save both of those. Okay, now check out the difference between the two here. Now, both of these divs have the same font-size applied to them, and they look like they have the same font-size applied. However, have a look at our first two divs here. These two have em-based font-sizes applied to them, but they look different to one another. And the reason for that is that em-based font sizes are inherited from a parent to the child, then to the following child, to the following child. So I'll show you in the CSS what we're talking about. So with out first div, let me just drag it up a little, the font-size is being evaluated as 18 pixels. So as we went through before, you've got 1.125 times the 16 pixel default font-size for the browser. But then when we have a look at the nested div, the font-size is still 1.125 but this time it's not multiplying itself by the browser default setting of 16 pixels anymore. Now it's multiplying itself by the 18 pixel font size of its parent. So now its font size has evaluated to 20.25 pixels. And if you were to nest another div inside here, the font size would continue to get bigger and bigger and bigger and bigger. Now, sometimes that's what you want. Sometimes you do want your font sizing to be a multiplication of the font size that the element already has. But in the majority of cases, it's a lot simpler to just use rém units so that it's easier to keep track of your font sizes. All right, so the next type of unit that we're gonna look at is using no unit at all. And to get to the point quickly, the place where you should use no unit at all is with your line-height settings. I'm gonna show you an example of why that's the case. So we're just gonna add a little HTML into our page here. So we have two divs with two different classes, and inside each one, we have a heading tag and a paragraph tag. And now we're gonna add a little CSS. So we'll just paste this in. All right, so our first div is gonna have a line of 1.3em and our second div is going to have a line height of just 1.3. Now let's take a look at the difference. All right, now take a look at what we've got with our first heading here. Even though the line-height is set to 1.3em, there's obviously not enough height to these lines. Each of these lines are overlapping each other, while our unitless line-height heading looks just right. And even if we change the setting, let's change it to 1.5 for example, it still doesn't look right with the first div. Now, the reason that this has happened is because what we've done here by applying a line-height to our div of 1.5em, is we've actually set a fixed line-height for everything that happens in this div. So you recall from before that an unit multiplies the font size of the element it's applied to. And we know that the font-size of this div here evaluates out to 18 pixels. So that means that the line height for any element that's in this div is gonna be set to 1.5 times that amount, or in other words, 24 pixels. So it doesn't matter if we're talking about a paragraph of text or a heading, the line height is going to be 24 pixels no matter what you do. And as you can imagine, it's generally not a good idea to have a fixed line height that applies to every element in a page. Now, with our unitless line height down here on the other hand, we still have a multiplier, the line-height you end up with is still gonna be 1.5 times something, but the difference is it'll be 1.5 times its own font size. So in this case, our line-height for our heading here is 1.5 times the size of the heading itself, not the font-size of the overall div. So just to recap, when you use a unit, you have a fixed font size that applies itself to everything inside that element, but when you have unitless line-height, you have a fluid line-height that will differ depending on the font size of each individual element. All right, so that gives you the essentials on using pixel units, units, rem units, and using no unit at all. And there's just one type of unit that we're gonna cover very quickly, and that is viewport units. So we're just going to delete all of this CSS, and we'll get rid of all of these divs. And instead, we're just gonna have one paragraph of text added back in. Now, a viewport unit will allow you to size your text relative to the size of the viewport. So let me show you what I mean. So we're just gonna apply a font-size to our paragraph here. And let's set it to, say, 20vw. vw stands for viewport width, and whatever number you put before the vw unit basically acts as a percentage. So in this case, our font size is gonna be 20% of the width of the viewport, which is pretty much gonna be humongous. But just to show you. So there we go. That's humongous, but it's relative to the viewport. Now, let's just bring it down to something a little bit more rational. Let's try three. Now, as I change the size of the viewport, you'll also see the size of the text change. So as the viewport gets bigger, so does the text. As the viewport gets smaller, so does the text. Now, the place that this can be particularly useful is when you start to work with responsive typography. So making sure that when a viewer is looking at your site on quite a small screen, you can responsively resize the text so that it's still very readable for them. Okay, so that gets you across the most important concepts to be aware of when you're deciding which units to use with your typography. Now where that should all really start to solidify and come together and really make sense for you is when you start to use it practically, and that's what we're gonna be doing in the next lesson. In the next lesson, we're gonna take the HTML that you produced in the last course on HTML basics. It'll be fleshed out a little bit more so you have a few more typography elements to work with, and we're gonna apply typography to it. So I'll see you in the next lesson.

Back to the top