Type Scale Solution

[00:00:00]
>> Jen Kramer: Hopefully, you had a pretty easy time going ahead and fitting in that typescale onto the homepage and the inside page. And I'll just show you what I did. Your answers may be slightly different, I'll give you a full credit for it anyway. Here's the way that I went ahead and worked this.

[00:00:17]
So just like we had the math before, I have my base font size and my typescale, just as we set them before. Although this time, I'm working with Rems instead of working with Ems just to show you that you can work with different units. And then, I pulled out the h5 and the h4.

[00:00:33]
I'm not actually using them in any of my documents, so I just pulled them out. You absolutely could keep them in. So there's that. I have my small text, which I called by a different variable name. Just because I wanted to be different. And then, the last part here is this header margin.

[00:00:51]
I want you to take note of the fact that I'm using this same technique here with a margin that's going to change across media queries. So far today, we've looked layout, we've really intensely looked at layout and the ways that we can use this technique of calc and custom properties and changing their values across media queries.

[00:01:07]
And applying it in these contexts, layout and text. But you can do this with anything else that happens to be there in your style sheet that changes across a media quarry. So here's an example of our header margin, a value that's going to wind up having to change.

[00:01:23]
So I've gone ahead and declared that as a variable, and we'll change it later. So then, we've got our h1, h2, h3, our paragraph, our small sizes. Pretty much the same.
>> Jen Kramer: I've gone back through here, I made my menu a slightly smaller text size. My menu toggle, I made bigger.

[00:01:43]
That's the hamburger button, that's what that class is from. So I went ahead and associated that with the largest font size, okay? The h1, that's the child, the immediate child of the section, has got the small text size because it's actually small gray type on the top of those columns.

[00:02:04]
So just cuz it's called h1 in the variable doesn't mean you have to always use it on your h1s. So there's an example of that. Then, I went ahead and I scaled up my header h1, which is actually, I think, the words the layout times. Actually, I wanted those even bigger than what I had before, so I just went ahead and scaled it up here as a one-off, cuz I don't necessarily need to use this layer.

[00:02:28]
I absolutely could have set that up as a calculation further up in the root of the document, if that's what I wanted to do. And then, here's where that margin comes in, so there's that header margin, all right?
>> Jen Kramer: Let's see.
>> Jen Kramer: A couple of other declarations here for font sizes.

[00:02:47]
And then here, in my media queries, all I did was change my type scale to these values for whatever reason. I don't remember why I chose these values. But anyway, that's what I did. And then my header margin definitely changed once I got over 740 pixels, okay? So this is pretty much the way it would work, okay?

[00:03:07]
So you can just take all your type sizes, you can put it in your own SAS partial file or a section of your CSS, whatever works for you, and there you go. It's really now very easy to go and change font sizes globally throughout your document, isn't it?

[00:03:24]
>> Jen Kramer: Okay, and so, if you wanna take a look at how these pages are looking, just so you can say, let's see here.
>> Jen Kramer: I'll just pop them up in the browser here, and show you, if you haven't looked at them already.
>> Jen Kramer: There we go. So you see that our logo looks a little bit nicer than it did before.

[00:03:45]
And then, when I narrow things down here, my navigation actually doesn't wrap in terms of its size, which is kinda nice. And my hamburger button looks a little bit more beefed up, beefy. It's a beefy hamburger button. And that's still looking pretty good as well, okay?