Style Guide: Fonts & Font Sizes

[00:00:00]
>> So here's where we're gonna start. Let us start with setting up everything generically, and then we're going to override things as we go. The big C and CSS stands for what?
>> Cascading.
>> Cascading, it's the part that we always forget to leverage as part of CSS.

[00:00:20]
We're so busy applying classes all over everything that we forget that there is a huge cascade here that makes our lives so much easier when we leverage it correctly. And that is the big reason that we start with a style guide like this. So I am going to start here with my first element.

[00:00:38]
Now, remember that code pen doesn't show you a body tag, but the body tag is totally a thing. And that is what I'm going to use to set up my default styling here. So I can say, for example, my font-family is going to be the variable of sans.

[00:00:57]
Now, some of you did not understand what a CSS variable is. I'm sure you're familiar with the concept of JavaScript variables. Just to quick tell you about the CSS variables. CSS is a series of properties and values, and so we can't start with const, or let, or var, or any of the other things that we do in other programming languages.

[00:01:20]
We have to start with a property. In this case, we start with the pseudoclass of root, which sets up these as essentially global variables. They're accessible to us anywhere within the document. And we declare our variable with the double dash. You can call it whatever you want, and then you assign it a value.

[00:01:39]
So there's no kind of white happens to be looking for a color. I could say that white was 3rem, and CSS would be totally happy. [LAUGH] You might not be, but CSS would be just fine. You can call these whatever you want, and then you can call them later by setting up your property and you're gonna call it with var, cuz it's a variable.

[00:02:03]
And in parentheses, you put the name of the variable that you're calling, okay? So just by doing that, the page immediately looks better. We can set a line height, Of 1.5. Notice that there are no units associated with 1.5. You can have units on line height. I choose not to, because then it's a ratio.

[00:02:26]
So whatever size we're working with, one and a half times of that will be the spacing between lines, okay? So if it's a 24 pixel font, multiply it by 1.5, that is the spacing between lines. So I recommend that you always use line height without a unit associated with it.

[00:02:47]
When you put a unit on it and somebody happens to blow the screen up with accessibility, they want a bigger font, then those lines start to overlap. We don't want that to happen. So with a ratio, it doesn't happen. Okay, we're gonna have a background-color for our page, and that will be vanilla.

[00:03:12]
So that will make the whole page vanilla. And then we're going to give it a color, that's our text color, is coffee. And we can also set a font size, I'm gonna do that momentarily. But one of the things that you might have noticed, because Ben was talking about it earlier.

[00:03:37]
He pointed out that those headings have no space, that they are smashed against the edge of the page. Notice that, though we have space, a little bit of space all the way around the document. So one of the things that people forget is that your body element has by default from the browser some margin associated with it.

[00:03:58]
It's usually margin, it might be padding depending on your browser. So I'm going to say margin of 0, and that will smash everything to the side. You can also say padding: 0 for good measure if you'd like to do that, okay?
>> Is it for a general practice that we start with always 0 in the body?

[00:04:17]
>> I think it's a great practice, because you can always add it later. Yeah, you can re-add it later, so let's just turn it off. All right, so with that in place, and we have sort of a general way that this page can look. Let's go back up here into our variables and let's take a look at our font scale.

[00:04:37]
So I have talked about font scales before in previous courses, and I'm going to set you up one right now. So I am going to set h6 is the variable I'm gonna call this, and I'm gonna say that this is our variable size of our base-size, okay? Big deal, base-size, we already had set to 1.2 rem, so our h6 is gonna be 1.2 rem in size.

[00:05:17]
Mark, you have a question?
>> Aubrey is asking, should you turn off all the default margins and paddings in the CSS with that star rule?
>> You can turn off all the padding and margins in the CSS if you wish. So that will turn everything off, and then you have to go back and reset everything.

[00:05:34]
So even things where you want to have padding and margin like on paragraphs, you probably don't want your paragraphs all smashed up against each other, then you would need to go back and add it. So that's really a stylistic kind of thing. I generally work with the margin and padding that the browser gives me, except where I don't want it, and then I tend to zero it out.

[00:05:53]
But you can take whichever approach that makes sense to you, it's absolutely fine. Okay, so what we do for our font scale then is we are gonna do some math. And so for my h5, we're gonna do a calculation. So remember, calc, is the way that we do calculations in CSS.

[00:06:13]
Calc is limited to addition, subtraction, multiplication, and division. That's it, that's all it does. No exponents, which would make our life much easier when doing a font scale, unfortunately. And so just simple addition, multiplication, and division, subtraction. All right, so here, inside of calc, what we're going to do is we're gonna to say our var of h6, in other words, the base font size, and we're gonna multiply it by our scale, times var(--scale).

[00:06:49]
So if you take 1.2 and you multiply it by 1.25, you will wind up with 1.5 rem for your font size. Why am I using rems? Why wouldn't I use pixels? Anybody have a-
>> Pixels are set and rems are flexible.
>> Rems are more flexible, yeah. What does rem stand for?

[00:07:21]
>> Don't remember that.
>> [LAUGH]
>> It is dumb.
>> Looking it up now.
>> It's a root relative great. What the heck does that mean and what is an? [LAUGH] Has to do with the width of the lowercase letter m. So if you're working with a really fat kinda font, that might be 1em.

[00:07:43]
Or if you're working with one of the really skinny fonts, right, that might be 1em. It's a very relative kind of size. So root relative means relative to the root of the document, which in the browser sets to 16 pixels. So it makes your math much easier as you work through this, okay?

[00:08:02]
>> And so that's a one-dimensional thing, is that length or width thread?
>> It is the width of the lowercase, I don't make the rules. Yeah, Robert Bringhurst will tell you about that in his typography book. Okay, so now, we're gonna copy this. We're gonna say our h4 will be the h5 times the scale and our h3 will be our h4 times the scale.

[00:08:33]
And the reason we have to do it this way is cuz we have no exponents. If we had exponents, we would be able to say the scale to the squared, the scale cubed, the scale to the fourth. Unfortunately, we don't have those in CSS, so we do it this way.

[00:08:46]
I'm gonna set up an h2, which will be h3 times the scale, [COUGH] and I'm gonna set up an h1. So it's the same pattern, it's just the previous number times the scale. The reason we do it this way is that this will make perfectly proportioned headings sizes for you that will be all so beautiful and your graphic designers will absolutely adore them, because they are gonna follow a proportion here.

[00:09:17]
So in other words, we're increasing each size by 1.25. Okay, so now, I want actually a size larger than this. I'm just gonna call it large, and I want it bigger than the h1. So I'm gonna make this large, it's gonna be h1 times the scale, And then I want an extra large in addition to that.

[00:09:48]
I want an extra large, and to make my extra large, what I'm going to do is I'm gonna take my h. Just to show you that this can happen, I could take my large times the scale. That's certainly one way of doing this, but just to show you, you could also do it this way.

[00:10:07]
We can take our h1 and we can multiply it by as many scales as we wanted to make it bigger. So just to show you how that would work. So I'm gonna multiply it by two scales in order to make this extra big, and it winds up being 7.15 rem if you do all of that math.

[00:10:24]
That is the same thing as large times the scale, by the way. Okay, now, what if I want a smaller one? Anyone wanna take a guess? If I make a variable here called --small, what is the math going to look like for this?
>> Divide by the scale?

[00:10:42]
>> Yeah, divided by the scale, exactly. So we're gonna take our variable of base-size, and we'll simply divide by our variable of scale. And now, it'll put us just under one rem, 0.96 rem, okay? So that's what a type scale looks like. I have a fuller explanation of that in some of my other Frontend Masters' courses and that will walk you through that in a little bit more detail.

[00:11:15]
Yeah, Mark.
>> Is it bad practice to change the default's browser size for the font from 16 pixels to whatever I might desire?
>> You absolutely could change that. So here, I set it to 1.2 rem. In other words, 16 times 1.2, which comes out to be what, 18 or something, 18 pixels, 20 pixels.

[00:11:37]
So I said 20 pixels is my base font size. So I did exactly what you just asked. I could also take this whole thing, by the way, and let me hold this idea just for a moment. You can change the base-size and the scale in terms of their values later on and scale your entire webpage.

[00:11:59]
That is part of the reason that we do all of this math once we actually apply all these wonderful variables, cuz nothing's changed in how this page looks yet. That's because we haven't actually applied our font scale yet. So the next thing we need to do then is do exactly that.

[00:12:14]
So what I'm going to do then, I'm gonna set up some basic styling here. I'm gonna have an h1, an h2, and an h3. And while you're at it, I recommend you do the following as well, .h1, .h2, .h3. So you can set up classes that use those heading sizes.

[00:12:39]
So in other words, we're styling the HTML elements themselves, h1 through h3. We can also set up classes. So if you wanna apply the styles later using these classes, you can do that. Here, we'll set our font-weight to 400. We can set our font-family to var(--decorative). Now, we're applying that.

[00:13:11]
See how nicely that size just immediately applied there to all of that? And we can set our margin. So all those headings by default have some margin associated with them. And we are just turning all of that margin off because, in fact, we're gonna set it separately for each one of these font sizes.

[00:13:31]
So those are styles that are going to be in common with the headings and their associated classes. So I've sort of grouped those together. Then we can set up h1, .h1, and we can get more specific. So what is my font-size gonna be here for this?
>> Var(--h1).

[00:13:53]
>> Var(--h1). Look at that. We can also set a line-height. So right now, that line-height is 1.5, which is being inherited from the body element, but I am going to change that to 1. Usually, your designers like to have a little bit tighter line-height for some of these larger fonts than you do for your regular paragraphs.

[00:14:23]
Then we'll have our h2, .h2, and our font-size will be var(--h2). And our line-height, Will be 1.1. I forgot my margin up here too. We can re-add some of this, I'm gonna say margin-bottom, Var--h2). So notice, we were thinking about font-sizes when we did all of that math.

[00:14:58]
But we can also use that as a variable inside of our paddings and our margins. How cool is that, okay? The math is done, we might as well take advantage of it. Okay, so just to show you why these scales are really powerful, so I can now change my base font size.

[00:15:19]
Your boss comes back to you and says, I want it bigger. So we say, okay, done. Whoa, all we have to do is just change the one number, right? He says, I want it smaller. Done, okay, so everything is already set up. All the relationships are set up, all we have to do is change the base-size, right?

[00:15:46]
We could also change the scale. So we want the scale to be just a scale of 1, okay? Everything is all exactly the same size. What if it's 1.1, or they're very tightly related? What if it's 1.2? See how the scaling is working here? We can make it ridiculously big, but it still scales, right?

[00:16:12]
So this is super handy when you get to changing font sizes globally at your breakpoints. You want bigger sizes on your phone or smaller sizes on your phone, or bigger on desktop or smaller on desktop, whatever you wanna do, you just change the value of these variables. You don't have to change a million different HTML and classes, font sizes.

[00:16:37]
Makes sense?
>> You did something clever by using the h4 as the margin size and you're using the previous margin. It seemed essentially that you had the sizing in mind as you're going through, but I wonder if you can expand more. There one basically people are asking if this is a very common practice or a pattern that we can follow.

[00:16:57]
>> I think that will depend on your graphic designers and what your graphic designers do in terms of proportions and so forth. So you could definitely work with your graphic designer. And if you speak typography and say, what scaling would you like to use, they might get all excited, you know about type scaling, that's amazing, right?

[00:17:16]
>> Sure, I think in a general way, you could say what you're doing is just giving a margin that slightly smaller than the font size.
>> Correct.
>> Essentially, and you have these variables setup.
>> I have them set up, might as well use them.
>> [LAUGH]
>> Yup.

[00:17:28]
>> So a follow-up question right on there. What's it like to have a designer?
>> [LAUGH]
>> I might ask for questions.
>> Having a designer is the most amazing thing in the world. [LAUGH] It's totally awesome. Everything looks better when you have a designer on. Make friends, be nice to them.

[00:17:44]
They're great people.