Custom Properties Type Scale

[00:00:00]
>> Jen Kramer: So what I'm gonna do here is I'm just gonna copy this cuz this is the part I'm really interested in, and I'm just gonna move this up on the style sheet.
>> Jen Kramer: Just so it's easier for you to see what I'm doing. All right, so now what we're going to do, as you can probably guess.

[00:00:21]
Let's rewrite this using custom properties in calc, okay? It's gonna be a tiny little bit more code, but it's gonna be so much easier when we get to our media queries to change our font sizes, isn't it, okay? So how might we go about doing that? Anyone have a suggestion for where we might start?

[00:00:43]
>> Mark: We could create a custom property for base font size.
>> Jen Kramer: Yeah, let's go ahead and do that. Let's create a custom property for a base font size, yeah, all right. So up here on the top let's just go ahead and put it in root because we wanna access this from everywhere in the document, yeah?

[00:01:02]
And let's go on ahead and say we a base size of 1em, and this time we're using ems because this is in fact what we wanna do. 1em, and then we might have our type scale, yeah?
>> Jen Kramer: And the one that we chose today was 1.25 right?
>> Jen Kramer: Okay, so that gets us started.

[00:01:39]
How big is a paragraph? What is the font size for a paragraph?
>> Mark: 1em.
>> Jen Kramer: 1em, right, so here we'll say our font size is var what?
>> Mark: Base size.
>> Jen Kramer: Base-size, right, okay cool. So that's gonna get us started. We know what our base size is. So our h5, let's say we want to go up incrementally from that paragraph, all right?

[00:02:11]
So what does an h5 wind up being?
>> Jen Kramer: Let's call our variable h5, just to keep it clear. What does this wind up being? If it's one size up from the paragraph, how big is it?
>> Speaker 3: 1.25.
>> Jen Kramer: It will be, how do we do the math to get that?

[00:02:31]
>> Mark: Base size times the type scale.
>> Jen Kramer: Correct, okay, so we're gonna say calc of var.
>> Jen Kramer: Base size.
>> Jen Kramer: Times the var of the type scale, right?
>> Jen Kramer: Cool.
>> Jen Kramer: And then, of course, all we need to do here is for h5, down here at h5 instead of saying font size of 1.25em, we just save var of h5.

[00:03:10]
Yeah you could call these things probably better variable names. I'm going to stick with these headings just so clear here for learning practices, okay? Okay, so what does h4 become then?
>> Mark: h5 times type scale.
>> Jen Kramer: h4, h4 becomes h5 times the type scale, right? Are we detecting a pattern here?

[00:03:41]
>> Speaker 3: Is this where that exponentiation would come in?
>> Jen Kramer: Yes, if we had exponents this example would be so much easier wouldn't it? [LAUGH] But unfortunately we don't so we'll work around it. So instead of this being base size it will be h5, right? h5 times the type scale again.

[00:03:59]
>> Speaker 4: What if it was base font size, times type scale, times scale steps.
>> Jen Kramer: Okay, so how would you set this up then?
>> Speaker 4: So h4 would be the same as the calc above.
>> Jen Kramer: Okay.
>> Speaker 4: But you would multiply by a new custom property like type scale steps.

[00:04:19]
>> Jen Kramer: Okay, so if I have type scale steps. And so you're suggesting we do what?
>> Speaker 4: Yeah, so in the h4, it would be equal to 2, all right?
>> Jen Kramer: Okay.
>> Speaker 4: It probably doesn't need a default value, I don't think here.
>> Jen Kramer: Right, right but this is actually not, this is the 1em times 1.25 times 1.25, right?

[00:04:47]
It's not 1 times 1.25 times 2.
>> Speaker 4: Mm-hm.
>> Jen Kramer: See what I'm saying? It's actually an exponent, not scaling up like what you're talking about, where we're doubling. It's actually exponential. Okay but a good thought, but a good thought. And that's why that doesn't work because we're not going up stepwise, we're going up exponentially.

[00:05:12]
Okay so anyone can guess what we're going to do here for h3, h2, and h1?
>> Jen Kramer: It becomes pretty simple at this point, right? h2, h3, and h1 all become like this, right? I just have to say h3, h2,
>> Jen Kramer: h2 and h1. And then we just need to change our variables here.

[00:05:50]
So this is h4, h3, and h2.
>> Jen Kramer: All right, and then of course, once you have that all spelled out here in the root, then of course you need to actually call those things. So we would scroll down the page here. I'm not sure why they put a margin-top of 0 here on the h1.

[00:06:15]
You can leave it or not. We just now need to go through and say our font-size is var of in this case h1,
>> Jen Kramer: h2 and h3
>> Jen Kramer: And h4.
>> Jen Kramer: Okay, whoops one semicolon.
>> Jen Kramer: Okay, so hopefully you've gone ahead and you've spelled this out. We have in our root, we go up exponentially here as I was saying, there's our various heading sizes times type scale, we're getting bigger.

[00:07:13]
We've gone ahead and called those variables then h1, 2, 3, 4, an 5. Now we get to small and this text small, okay? So we have this one here. Font size is now 0.8 ems. How did we get that? Anyone wanna take a guess?
>> Jen Kramer: How did we get 0.8 ems from 1.25?

[00:07:36]
>> Mark: Wouldn't that be base size divided in two?
>> Jen Kramer: Correct, so that is exactly what we're going to do here. Instead of multiplying up, we need to divide down, right? That would make sense. So here this winds up being font size. And because I only have one of these, I'm just gonna put it here in this declaration.

[00:07:58]
Obviously you could add this to the root and you could scale down accordingly if you wanted to go that way. We'll go ahead and say calc variable of base size divided by the variable of type scale.
>> Jen Kramer: Okay cool.
>> Jen Kramer: And we'll just go ahead and save that.

[00:08:35]
All right, so if you take a look at the page on the bottom, absolutely nothing should have changed. We just love rewriting code that doesn't change at all, yeah? Still looks pretty much the same way it did before, all right. And, so now what happens if I want to add some media queries?

[00:09:03]
>> Jen Kramer: Let's just say for example a min-width of let's say 480 pixels, just to come up with some things that are really quick to come up. And let's say @media, with a min-width of 768 pixels. Obviously, these can be whatever numbers you want. What would I do here?

[00:09:35]
So, we went ahead and we wrote this particular series, outside media query, what could we change here as we go to larger screens?
>> Speaker 4: Either either.
>> Jen Kramer: Either what?
>> Speaker 4: Type scale or base size.
>> Jen Kramer: Type scale or the base font size, right, yeah. So I may actually want my font size to be larger on mobile so instead of a 1em, maybe I actually want this to be like one point whatever, 1.4, because that's what I typed.

[00:10:10]
So down here all I have to do then is just say my base font size winds up now being, let's say whatever, 1.2ems. And then here, my larger dimension, my base size becomes 1em, yeah, sweet? Now we have a whole flexible type scale, it's absolutely beautiful. It goes all across all the media queries.

[00:10:39]
With a really minimal amount of code, right? Okay, so when you save that, let me just flip over the view here to the full page view. All right, so there it is, big on desktop and I think we're going to get bigger because I kind of picked big blowup numbers.

[00:11:04]
>> Jen Kramer: Okay.
>> Jen Kramer: Big and bigger.
>> Jen Kramer: What do you think of that? Mark, you were?
>> Mark: There's just a question about if you're not supposed to use import what should you use for importing the fonts?
>> Jen Kramer: Generally speaking, I think the performance is better when you actually use the link tag in the head of the document is what I heard that performance goes up with that as opposed to using the import statement.

[00:11:39]
But this is code pen, so linking is a little bit more difficult. So we do it the lazy way with the import, and we don't really care this is a prototype.
>> Speaker 3: The link tag is especially helpful if a user has encountered that same Google Font elsewhere on the web?

[00:11:53]
>> Jen Kramer: Absolutely true, yes.
>> Speaker 4: Hopefully will already be cached in the browser.
>> Jen Kramer: Very good point. Yes, if you have the link tag and may already be cached in your browser, you don't have to download it again, better performance. Okay, so the other thing that we could have done instead, if you don't like base font size changing is you could have changed the type scale.

[00:12:10]
Maybe you want things to be more dramatic at larger desktop sizes less dramatic on mobile sizes, right? So maybe you actually want a type scale. And I actually wrote this down in my notes here. So here's my type scale of 1.25 at desktop, but maybe I wanna type scale that's a little bit less dramatic at this intermediate size.

[00:12:38]
Type scale of 1.2, and then maybe for mobile, I actually want, I'll go back to my 1em base font size and change this font scale back to 1.125, okay? So when the designer comes back to you and says, by the way, I wanna totally refactor all the font sizes on the site, you're gonna change it in five minutes and then you can take the rest of the day off.

[00:13:09]
Yeah, okay, so there we go. So this one, now with those changes, if we take a look at it in full page view.
>> Jen Kramer: There we go, there's that type scale. And as we shrink it down, the changes get a little bit less drastic between.