Font Sizes

[00:00:00]
>> Now, the next thing that I wanna do is a little bit of trickery up here at the top with fonts and font sizes. So I'm going to set up my type scale. I have actually demonstrated how to put together this type scale now in several courses. What I'm going to do is I'm gonna do a bunch of typing and then I will kind of explain to you what exactly all of these things are doing.

[00:00:24]
Basically, the broad arc of where we're going is we're going to set up some numbers. One will be a base font size and the other one is a scale. And as we scale things by multiplying our scale number times the numbers that came before, we will create font sizes that will be harmonious and make our graphic designers super happy.

[00:00:46]
And it'll make us happy because it will do the math for us automatically, and we can override our sizes just by changing one number later on. So what I'm gonna do now is I'm going to set up a variable called base-size. And I'm going to set this to be something called 1rem.

[00:01:06]
What is a rem? R-E-M. Gen Xers, what is R-E-M? Rapid eye movement. It's not rapid eye movement. It is not a band that rocked down in the 80s and the 90s, no. In this case, rem is root relative super helpful, right? What is an E-M? Anybody know?
>> Is it referring to an space, the width of an?

[00:01:38]
>> Yes, it is the width of the letter m, the letter m. And for some fonts it's a very fat letter m, for some fonts it's a very skinny letter m, but it's a relative type of space. Here we're making that relative to the root of the document just like the root that we saw here, ha-ha.

[00:01:57]
And so 1rem generally speaking, corresponds with 16 pixels in browsers, okay? Why do we use rems? Why wouldn't we just say 16 pixels?
>> Because whenever you change the root it will affect
>> Yes, because when we change the root then everything scales up appropriately, right? And it works better for accessibility purposes as well.

[00:02:20]
So rems are generally a great unit to use for our font sizes. Okay, so we have a base font size and then we're going to have scale. And I'm gonna set this to be 1.2, later once we get all the math in place, you're welcome to play around with this and see how this changes our heading sizes here.

[00:02:40]
Then what I'm going to do is I'm going to set up an h6, a variable called h6, and I'm going to make this equivalent to another variable. It may seem kind of weird to have a variable equal to another variable, but hey, you used to do it in algebra too, didn't you, right?

[00:03:02]
You made one variable equal to another variable, and this sometimes can become helpful because base-size may change. And now h6 is gonna change and it's actually going to change as we put in more sizes here. So if my h6 is a base-size, my h5 is, we're gonna do a little bit of math.

[00:03:22]
And math is done using the calc here inside of CSS. So this calc with two parentheses and a semicolon. Calc of course is calculation, and CSS only knows addition, subtraction, multiplication, and division. That's it., that's all it knows. It is the most basic calculator on the planet, okay?

[00:03:45]
So only addition, subtraction, multiplication, and division. So no exponents, nothing whacked out and crazy. No calculus even though it looks like it. Okay, inside of calc, what we're going to do is we're going to say our variable of h6, Right? Whatever size that is, which we set down here, right?

[00:04:08]
And we're gonna multiply that by var, Oops, I've got too many parentheses in there. Sorry about that. Okay, var, h5. I'm sorry, wrong one, var scale. There we go. So we're gonna take our h6, which was our base-size of 1 rem, and we're gonna multiply it by our scale, which is 1.2.

[00:04:42]
So what does that size does that make our h5 now?
>> 1.2 rems.
>> 1.2 rems, awesome, okay? We're gonna continue this. I'm just gonna copy that line of code and I'm going to make an h4. And here for my h4, I'm gonna take my h5 value and multiply it by the scale.

[00:05:11]
So we said h5 was 1.2. We're gonna multiply it by the scale, which is 1.2. And we get? I know it's really early for math, but it's like 12 times 12, 1.44, right? Okay, and by expressing these in these complicated looking math equations, this is gonna allow us later to go back and change just the value of base-size or scale and affect all of these font sizes at the same time, makes sense?

[00:05:43]
Okay, so let's continue on here. So we're gonna have our h3, which is gonna be our h4 times the scale. We're gonna have our h2, which is our h3 times the scale. And we're going to have our h1, which is our h2 times the scale. And so you can see the impact of that right here on our headings, okay?

[00:06:25]
Yes.
>> If you create a typo here, which seems very possible when writing all these nested parentheses, are you gonna be alerted to that problem?
>> [CROSSTALK] Yeah, not necessarily. One of the things you can do here in CodePen is there is a little down arrow here, and you can say Analyze CSS, and that'll do a sort of a basic syntax check on things.

[00:06:53]
You might have seen my little message come up there on the top. Let's just say that I have left off that. Let's see what it does. Analyze CSS, it actually is very happy with that as well, [LAUGH] even though that means nothing. Let me try making a better error.

[00:07:16]
Let's call it font-fam, which is not a thing, okay? So now, if I go through and analyze my CSS It will flag that, it didn't know what font-fam is, all right? So that's helpful. And so that will help pick out some of those syntax mistakes and the other thing is the format is also really helpful as well.

[00:07:41]
Because that will go through and put in all of your indents and everything else, make it look pretty.