Apply Font Sizes Exercise

[00:00:00]
>> All right, so now I've got all of these heading sizes set up, what do I need to do now? I need to apply it to the webpage right. Okay, so I'm gonna give you two minutes, and I want you to write the font sizes for these headings.

[00:00:18]
You've seen this enough now, you should be able to take patterns that you've seen before with some of our other variables, and write out some font sizes for our headings, so go ahead and do that now. What you should have now in your CSS is you should have all of our headings.

[00:00:36]
Remember these are the HTML element heading tags so, we don't need a dot in front of them, we use dots for classes. This is our HTML elements, H1, 2, 3, 4, et cetera, et cetera. And then we're going to use the font size property to set up with the variable name, okay, so we have our heading 1, 2, 3, 4, 5.

[00:00:58]
Now, that seems like a lot of work, we could have just typed in numbers for these font sizes. So let me show you where the power is with this approach, if we go back on up here to the top where we have our base font size, if instead of 1 rem, we set it to say 1.3 rems.

[00:01:16]
Look at how all of our fonts scale all together with one tiny little change, okay. So if our boss comes back to you and says, nice website Jen, but I can't read it, you need to make the fonts bigger. Then you go, okay, well it's gonna take me all day, you make the little change and then you can go run off to the beach in the afternoon, okay.

[00:01:41]
The other approach here, of course is, you can change your scale, right, so that the difference in sizes between these headings. So right now, our scale is 1.2 and little bit, pretty close in size, what if we made it 1.4? Okay, so 1.4 is gonna make these radically different insights, makes sense?

[00:02:04]
And this is of course, completely subjective and up to your designer as to what is the relationship between the sizes of these headings for the kind of design that you're using. Generally speaking, I find that 1.2 is one that people use a lot, 1.25 is another one, that gives you a little bit of extra spacing between those, but not a radical amount of spacing between those.

[00:02:31]
Make sense? All right, so a lot of typing, worth the work, all right.