Font Sizes & Units

[00:00:00]
>> Kevin Powell: Where things are important though, is when you're dealing with font sizes. Font sizes are something we're going to declare a lot over and over and over. So it's easy to remember the name, it's descriptive, but the problem with font sizes, it opens up the world of units in CSS. I'm going to get this wrong, but does anyone know how many units there are in CSS? Ask in the chat too maybe Mark, if anybody has any votes, any guesses on how many units there are in CSS.

[00:00:30]
15. Anyone else? Say 100 and I believe you. 100. You, if I said 100, you'd believe me. Peter says too many, too many. So I think it was a while ago, not too long ago, Adam Argyle posted this, but I wouldn't be surprised if there's been new ones added since then, but at the time I think it was 54 different types of units. Length units specifically too, I think. So that's not including like timing units and other stuff.

[00:00:58]
It seems like a lot. Half of them can get categorized into containers slash viewport units, which do their thing. And then the other half, out of the other half, three-fourths of them have very specific use cases, and the rest of the time you're using one of these, essentially. These are the four that you need to remember for most things that you're going to be doing. Px is pixel, percentage, it's a percentage of something.

[00:01:29]
What is it a percentage of? That's always the important question when you're using percentage. And then we have em and rem, mostly used for typography, but you can also use them for other purposes as well. So if you remember, there's 54 plus length units, just focus on these ones for now, and then you'll start seeing use cases for other ones over time and you'll be happy you have them. People have told me the reason, or the amount of units we have shows that CSS is broken.

[00:01:54]
I say they wouldn't be making them just for fun. They all serve a purpose, right? So you can be really happy that they would. I'm going to say right now that in general, for font sizes, don't use pixels. It's the easiest one, but we don't use it. We'll talk about why as we go through. But I also put this little warning here because I am going to be using pixels for the demos below just because it makes understanding what's happening a lot easier.

[00:02:19]
But we don't want to declare font sizes in pixels. So the first one is the em unit. I'm starting with em because it's the easier one to understand between em and rem. If you're coming from a print background, it's not the same as what an em would be in typography. There's no relation. I don't know why they gave it the name em. And em is based on the size of the parent's font-size. So if I have a parent with a font-size of 20 pixels, and I say a font-size of 0.75 em, you just do 20 times 0.75 is equal to 15.

[00:02:53]
Oh, I said we don't want to use pixels, so usually this is a different value. It's still doing the same type of math, it's just, this is again, easy to understand what this unit actually will come out as. This doesn't happen often, but it can happen where you end up with situations like this. I'm using 10 here just as a very basic starting point to make our life easier. But then you have your ul, your li, and a span that are all setting their font sizes in em.

[00:03:23]
So if I had HTML that looked like this, we could run into potential problems because I have a span here with a font-size of an em, and I have all these other things where it's being calculated along the way, so it's actually compounding all the way up. So it's doing 1.5 times 1.25 times 1.25, and then finally, and that's all based on that 10 that we started with right here. So I was going to ask you guys to do it, but the math is kind of weird.

[00:03:54]
It would give us the span at the end would have a font-size of 23.4375 pixels. And this is using that code is that this would be a nested span down here. This would be a regular span that's not nested in anything, and it creates this weird compounding thing. Because of this, you'll hear don't use em for font sizes, it's weird, it causes compounding issues. Yeah, it can. You probably won't write code that looks like this.

[00:04:18]
This would be really, really bizarre, but it's just to warn you that this is a potential side effect. There are times where em can be useful, we'll see one in a minute, but it's one of those things like I use it if I have a good use case for it. Really quickly, just percentages. If you do a font-size and percentage, it works basically like em does, it's scaling the same way. It's just 50%, 0.5, sort of like with our opacity, 0.5 or 50% ends up being the same.

[00:04:47]
Going down to rem units, rem is a root em, and the root is the root of our document. It's always the outermost element, which is our HTML element. So we're looking at the HTML element's font-size, which means this is more consistent. If I did the exact same code as before, all using rem, I'm not going to run into that compounding issue because this 1.5 doesn't care what these font sizes here are. This 1.5 is only coming up and looking at what this 10 is.

[00:05:16]
So that times 10, 1.25 times 10, etc. There's no compounding that can happen if you use rem units, and you know the base for all of them is always going to be the same, which makes life easier. The one problem is font-size on our HTML element by default is 16 pixels in all browsers, so it makes the math on that a little bit trickier to do because you're always trying to multiply by 16 for everything we're doing, because 1 rem is 16, 1.25 rem is 1.25 times 16.

[00:05:49]
Some people say, then why don't I just do this so I can make the math easy. Does anyone know why that's a bad idea? Yeah. Because it'll over, because like if I have a custom font-size on my browser, that'll mess with that. Exactly, yeah. So one thing before our assignment, we don't know how users are consuming our websites. Maybe they're using voice, they're using a screen reader, they have settings in their browser we don't know about.

[00:06:11]
One of the common things is to make browser sizes bigger. You can do that by zooming in on the page, but some people will take the time to increase this default size of their browser. If I do this, it overwrites that. It just sets the base value to 10 and it throws the user preferences out the window. It's not very nice. The user doesn't have to zoom on any website, then they get to yours and the text is all too small for them, they might just leave.

[00:06:34]
So it's better to respect the user's preferences. Just leave the HTML alone. It's going to mean your other sizes are scaling too, but if you do things properly, then that's completely fine, and the users will be happy. So we don't want to overwrite user preferences if we don't have to. So font sizes from our project are right here. There is a good use case for bringing in the em unit here. So I'm on my H1.

[00:07:00]
I'm only going to set up the larger size. I gave them as pixel values and rem just so we don't have to do the math here. So I'm going to put this off on the side so I can reference them fast, nice and easy. My H1, I don't have an H1 selector, so we can just say H1, font-size is going to be, I'm going to say, I'm not choosing my span right now. And the gold text was the bigger one, so I'm going to do 3 rem.

[00:07:40]
We'll talk more about the span in a second. My H2 is going to be a font-size of 2.25 rem. And my H3 is a font-size of 1.5 rem. The larger text, that was my lead all the way down here where I was bad and I use pixel value, so now I can change that to a 1.3125 rem. When you start using rem, it seems a bit weird. You start getting used to and seeing these same numbers come up again because typography tends to have very similar numbers in it all the time.

[00:08:08]
And the last thing is down here, all the other paragraphs and the list items, anything else is using a font-size of 1.125, or which will be calculated as 18 pixels. Where should I declare that? Should I do a paragraph selector? Oops, or is there somewhere else I could change that font-size? You do it on the body? Yeah, awesome. So anytime I'm looking at a site, if I see a style that's applied to the paragraphs, the colors, the other things like that, I generally put it on the body.

[00:08:37]
The reason for that, I'm just going to put a color red here, just so we can actually see this come up. So let's go take a look at our project. Where I've changed everything. Everything here is looking fine, we're pretending the red text is actually a bigger font-size, but if I go to the second page over here and I come and take a look down. I have a ul down here and you forgot about your ul and then you go, ah, okay, now I have to style that too.

[00:09:00]
I have to select it, change the font-size. I just want all of those things to be the same. So this is where I said that most of the time, any styles that we can put on the body, we want to put on the body, just to give us a nice starting point for everything we're doing. So here, I can say a font-size of 1.125 rem. And that makes this text bigger, and at the same time it also makes this bigger. I'm just going to turn that off, just because it was red before.

[00:09:28]
So we can see everything as the paragraphs and those, we don't have to worry about anything being forgotten, they've all increased in font-size. Now, another thing with font-size that's really important to talk about is line-height. Line-height is what we use to control the space between lines of text within a block of text. So it's not the space between our paragraphs or between line items, things like that.

[00:09:52]
It's inside of your paragraph. How much space do we actually have between all of those lines? So when we look at, like, here's a paragraph, the spacing between the lines in this paragraph right here. So let's go, or just as a general rule of thumb or by default, let's start with the default. The default value is a, oops. Line-height of 1.4, that's the default, you do not have to declare that, it won't change anything.

[00:10:21]
The problem with 1.4, or first of all, it's a unitless number, you'll notice, again, it's a multiplication of your font-size. So it's going to do whatever your, the 1.125 times 1.4. That's how it works. You could put a unit number here, so I could come in and say this is actually 1.5 rem and it would change the line-height, so you can use fixed units if you want, but in general, it's considered best practice just to go unitless, so it's my font-size times this number.

[00:10:50]
Most of the time there's, well, the general rule that you use is that the smaller the font-size, the bigger the line-height, the bigger the font-size, the smaller the line-height. 1.4 is this really awkward middle ground. I get why they chose it as a default because it means that nothing is terrible, but it also means nothing is very good. It's a little bit too loose for large text sizes like you'll have in your headings.

[00:11:14]
It looks like it's not quite double spaced, but there is a lot of space between these. And if I go and look at my regular paragraphs, they're a little bit squished together. So it's a sensible default for just handling everything, but most of the time, most people will suggest 1.5 on the body. If I do that, and you see it makes it a little bit more spaced out. It's not a huge difference, but it is a bit of a difference.

[00:11:38]
1.6 is another one that I tend to use a lot for text. I just find a little bit more space in my text makes it a bit easier. Again, if you're following a design file, you might have a specific number there that you're going to use. Either 1.5, 1.6 on the body tends to work well. The problem with that is it makes our headings really spaced out. It's adding more and more space just because of the way typography works.

[00:12:03]
So larger font sizes need smaller ones. So I could come on my H1, my H2, and come in with a tight line-height like a 1.1 or a 1.2, just to pull those lines back together a little bit, make it look like it's not two pieces of text, and keep it as one piece of text there. And we can come back, just look at the other page quickly. And it's sort of, you know, it's helping keep all of that group together, and if I turn that back off, you see it's very spaced out.

[00:12:36]
So bigger text, smaller line-height, smaller text, bigger line-height, and you tend to have a pretty nice looking website. Is there a way to like set a non-multiplicative value like, I just want like line-height to be the height of the text plus 5 px or something. So then it's consistent instead of being like scaling with font-size. You could, but you'd run into the same problem, I think. So you could do a calc and do like line-height of one, I don't even know if that would work actually, just because mixing the unitless with the unit one, I don't think there is a way to do that actually.

[00:12:59]
But just because of the way typography works in general, it's not a pattern that we want to follow. It's a bit better, it sucks, but it's one of those things you'll just have to declare it for the different situations.