Style Guide Type Sizes

[00:00:00]
>> Okay fabulous, that's a little bonus CodePen for you. Okay, so the next thing that I wanna work on here inside of the CodePen, we're just gonna continue on with the same pen, we're going to work on creating a type scale. This is something that I did in the advanced CSS course.

[00:00:17]
If you open up another browser tab, we're gonna go to type-scale.com, or I guess typescale, all one word, .com, that works too. And this is basically a tool for setting up really good looking type. Now, I am not a graphic designer. Do we have any graphic designers in the room today?

[00:00:43]
One graphic designer, two graphic designers, awesome. Maybe we have a few graphic designers there online, but many of us are challenged by type. How do we pick the right sizes? And how do we make them all look proportional? Well, this is a really cool way of doing it is through a Type Scale.

[00:00:59]
And this is done through math. So, now, we can work with calc as well, inside of CSS. So as you see here at the top, this has got a base font size that's set to 16 pixels, which is what we're going to start with here. And then, there is a scale in this drop down.

[00:01:18]
And so, this is a relative unit of measure between one type size and another. So we could go to, let's say, an augmented fourth. Those of you who are trained in music theory will notice that these names match some really cool music theory types of things. So, this is going to basically scale each of these sizes of type from very small to very large, by 1.414.

[00:01:45]
Why? Because the type people say this is what's pretty. Here's the major third or a minor third, okay? So, you can see how these kind of scale together and they look proportional and pretty. So we can set this up to borrow this and use it inside of our design as well.

[00:02:12]
And the way to do this, I'm going to set this to the major third. And it just so happens to be that this is set to Poppins, is our font-family. This is the same Poppins believe it or not that we're going to use in our design. And so, this is all done and set and ready to go.

[00:02:34]
And then, if you pull over from the side here, this will show you what this looks like, okay? Looks good. And then, we can copy this over to our CodePen. You can see here that it's giving you the sizes, both in rems and in pixels. So, we are going to kind of borrow some of this.

[00:02:57]
You can either click on the Edit on CodePen button, this will open up a whole new CodePen for you with everything there, or you can grab the CSS which is down here at the bottom. And I'm just gonna grab the CSS that's here. Copy that. And I am going to paste this into my CodePen right here.

[00:03:24]
So, our font-family is set to Poppins kind of San Serif. So this looks like Arial that's here on the screen. That is because Ariel is the default font here. That's what's going on, all right? Now, let us make some changes to this, and we'll show you how the scaling can work.

[00:03:40]
All right, so, this has started with our body background of white, we don't need that, you can get rid of that. The color of black, we don't need that, you can get rid of that. The paragraph, the margin on the bottom of 1rem, we don't need that, you can get rid of that.

[00:04:01]
And then, it's going to set up a generic style for us for headings 1 through 5, and it's set it up with margins and all the rest of that, that is great. And then, here, we have our series of font sizes, okay? What we're gonna do is we're gonna write a little bit of code here with variables and with scaling, so that we can have a flexible series of numbers.

[00:04:28]
Right now, we're locked into what the Type Scale has given us but we can write this such that it will calculate this for us. So, let's go through that process now. I'm gonna scroll back in my CSS up to the root and we can set up a variable called base-size, okay?

[00:04:51]
Base-size. And we're at root, so we can call it 1rem, which will be 16 pixels, okay? So, that's our base-size. We can also set up an item we'll call it scale. So this is the number that comes from that drop down where we had major third, minor third, augmented fourth, all those numbers.

[00:05:16]
What is the scale? This is going to be 1.25. That's our number, okay? And then what we'll do, is we can set up a series of items here. So, if our paragraphs and our body and such, let's go here to our body. We can say our font size will be what?

[00:05:46]
var(--base-size). We could set that on the body tag. Very non-specific, we're setting the base font size to 16 pixels, which it already is. You won't see any changing or anything like that. From here, we can scale forward, so let's take a look at that. We're gonna start down here with h5.

[00:06:13]
h5, currently says it's set to 1.25rem. How did we get to 1.25rem? Anybody know?
>> Base-size times scale.
>> Base size times the scale gave us 1.25, makes sense? So, let's just write that. So our font size is gonna wind up being our var, actually, we'll do a calc.

[00:06:40]
Calc is the way that we do math in CSS, if that's new to you. Calc with parentheses. We can do addition, subtraction, multiplication, and division, that's all. So no exponents, no funny stuff, just basic arithmetic, okay? So, calc is what we need here. And we are going to then set this up with our two variables, var(--base-size) and we can multiply that by var(---scale).

[00:07:19]
And absolutely nothing changes on the page, right? So far so good? Okay, so now if we go to our h4, it's 1.563. What is this? What is the math behind that? A little bit more difficult. Yes.
>> h5 times the scale.
>> It's basically the h5 times the scale, right?

[00:07:48]
Except we can't grab that h5, right? Can't grab that h5, cuz we've set it to our CSS selector of h5, didn't we? Okay, so let's borrow that. Let's take that right there, the value of font size, and let's go back up to our variables. So now we can set up a variable, we'll call it h5, and we'll give it that value, yeah?

[00:08:28]
So, now, if I set up a variable called h4 what is this going to be?
>> h5 times scale.
>> h5 times scale. So, calc(var(--h5) * var(--scale). Now, it would be nice if we could just say, base-size times scale squared. That would be really, really awesome. But we have to do it this way because CSS calc doesn't handle exponents, right?

[00:09:06]
And 1.25 times or I'm sorry, 1.25 times two is not the same thing as 1.25 times 1.25, makes sense? That is often a question I get. We'll just say two, 1.25s. No they're squared, [LAUGH], all right? So type along with me, we're gonna set up a whole bunch of these as you can imagine.

[00:09:38]
We're gonna go to h3, h2, and h1. So, h4, h3, h2, And h1. Okay, so for my h3, what is its calculation?
>> h4 times scale.
>> h4 times scale. Okay, for h2, what is its calculation?
>> h3 times scale.
>> h3 times scale. And for h1 what is our calculation?

[00:10:08]
>> h2 times scale
>> h2 times scale. Nice? Cool little math here, so you see what happens? Now, if we decide to change our base font size, the boss comes to us and says everything needs to come up by a little bit, we change one variable. How cool is that?

[00:10:28]
Yeah, right? The other cool thing, of course, with CSS variables is we can change their value across media queries. So, if you wanna change all of your font sizes, when we go in a media query, you wanna make everything slightly bigger for mobile, or smaller for mobile, or whatever.

[00:10:45]
All we have to do is change our base font size. Or we can change our scale or both. Pretty awesome. So this is something you may wanna do on all of your production websites. We've set these up with headings in mind. You can, of course, set them up with all kinds of other things as well, other various points in time.

[00:11:07]
And of course, this also solves the problem that a lot of people have. For accessibility purposes, we always want our headings to go in order, h1, h2, h3, right? But sometimes the designers want the h2 to look like an h4, don't they? This is gonna allow us to make that happen.

[00:11:27]
So we can keep the semantics of our HTML but make it look however we want it to look.
>> Does order matter when you're declaring variables in your root?
>> If it works like CSS, so you can build these on top of each other.
>> So if you were to put h1 at the top and then try to reference it down further?

[00:11:47]
>> It'll all calculate, yeah. All right, so guess what the next thing we have to do now in our CSS, when we get down here to our h1, h2, h3, h4, and h5? What do we do now?
>> Set the font sizes to those variables.
>> Set the font sizes to those variables, exactly.

[00:12:06]
So, our font size will become var(--h1). Var(--h2). And so on and so forth, right? I'm going ahead and type all those in. Change our math down here when we get to our h5, var( --h5), Okay? Now, let's look at this last one down here at the bottom. For the HTML element called small, and for a class of text_small, this is set to a font size of 0.8rem So instead of just going from our base font size and making things bigger as we do with headings, now we're going from our base font size and making things smaller.

[00:13:14]
So, what is the math to get us to a 0.8rem?
>> Divided by the scale.
>> Exactly, divided by the scale. So, we can set that up as a series of variables if you want. Or if you just have one of them as we do here, then we can just set this up to be calc.

[00:13:37]
And then, we'll say var(--base-size), right? Divided by var(--scale)). How cool is that? Worth the price of admission? Sweet.