Type Scale

[00:00:00]
>> Jen Kramer: So all you designers out there who have benoided my type sizes cuz some of you I'm sure are, now we're going to address the type sizes here for the website. If you take a look at all the CSS that I have written for you that you haven't really seen.

[00:00:13]
And all the CSS we've written so far we actually have an address type sizes anywhere on this webpage. So now we're going to go into this and think about type sizes. How many of you here would describe yourselves as graphic designers? I have two who, maybe three kind of sort of, okay.

[00:00:32]
Would any of you say it was your main focus? One person says it's their main focus. Okay, so we have a relatively heavy developer crowd here in the classroom. I would assume online, it's gonna be somewhat similar. And so one of the problems that we have when we're trying to fake being graphic designers is trying to come up with things that work, or the right colors.

[00:00:55]
We have clues like color out of Adobe.com to help us choose color pallets. This is a website called type scale and type scale is here to help us with our type sizing. Because we shouldn't really just be choosing random sizes for our type wherever we want to put it.

[00:01:13]
There is a, type, believe it or not, has been around since about you know a really long time like close to a thousand years. Gutenberg Bible is what the 1400 or something, that's when type sort of got started. So we have some rules that we can actually adapt and use here on the web.

[00:01:31]
And so this web site is called type-scale.com. Feel free to take a look at it. What type scale is doing here is you will see that it is we have obviously a whole bunch of different sizes of type here, okay? And this is set up with a base font size, base font on size right now and 16 pixels, which is what you would expect with a web browser.

[00:01:53]
You could change the base font size, if you wanted to. And then we have a scale here, okay? So the scale, and if you are musicians, as many of you web developers are, you may actually know the major second, the minor major second, the major minor thirds are, and so forth.

[00:02:10]
If you don't, it's the distance between two notes in music, okay? And for whatever reason, they've named our type scales by these musical definitions here. And so what this is going to do, I'll just go on ahead and choose different items here, it will scale our type exactly like this.

[00:02:33]
So if I want more distance, more difference between my type sizes, maybe I'd go with a minor third. If I want something really, really honking big and different, that's pretty different, okay? Probably don't wanna go up that far but you can, okay. That's the golden ratio, but chances are I think the minor second might be something or the major second might be something close to what you see pretty much to the browser by default.

[00:03:03]
And so this is the way this is going to work. If you take a look at the math for this. Let me go to, let's see.
>> Jen Kramer: What do I want to start on? Okay, so if you start with the major third, this is a good place to start.

[00:03:26]
Right here, this is the one two three fourth from the bottom. You'll see that these words here, our visual types scale are at 1M or 16 pixels, okay? The next number up is 1.25. How did we get from 1 to 1.25 given the pieces that we have here on the screen?

[00:03:48]
What did we do?
>> Jen Kramer: We took our base font size which is 1M, right? And we multiplied it by what? 1.25 and that gave us 1.25Ms. Okay, so that's our second font size. Now we're gonna to take that 1.25, we're gonna multiply by 1.25, and we get, trust me 1.563.

[00:04:16]
We're gonna take 1.563, we're gonna multiply by 1.25, and we're gonna get, trust me, 1.953, okay? So our random numbers here aren't actually so random. Everybody kind of clear on what a type scale is, how this works? Maybe something we could do with custom properties and calc, set something up like this for our document.

[00:04:46]
That might be really cool? Anyone ever wanted to change their font sizes over media queries? How many times do you change your font size, how much code is taken up changing font sizes over media queries? Wouldn't it be great to scale that back to something a little bit smaller?

[00:05:03]
Here's a model for how we can do it. How awesome is that? Okay, so, let's go ahead and set this up. You can stick with Poppins here if you want for font. If you pull over the little tab here on the side, you can set up whatever you want in terms of fonts, your line, height your font color and all the rest of it.

[00:05:23]
It's going to give you a sample of these different just, blah blah text here, okay? And then down at the bottom, somewhere, there is a link to code pen. Where did the link to code pen go? There it is, so you are edit whatever it is you want over there and there you are gonna add it on code pen.

[00:05:44]
Okay so going ahead and open up this website if you don't have it open already. Go to type hyphen scale.com, set it up to be a major third if it's not already. And then what we are going to do is we're gonna click the button down here on the bottom that says edit on CodePen, all right?

[00:06:06]
And if you go on ahead and go there,
>> Jen Kramer: This will go ahead and give you that exact HTML and CSS that was used to put that together, okay? As I said, happens to be Poppins. If you have preferences on your fonts, you can always go to Google fonts and you could get the @import statement.

[00:06:29]
We've using @import here because this is code pen, and we're working just internally here. You probably aren't gonna use @import in your real work.
>> Jen Kramer: All right, so, as you see here. Here is my HTML where I'm setting my base font size. There's my body, sort of, description what this is.

[00:06:53]
Then I've got my paragraph and then, sort of just generic settings here for margins and font families and yadda yadda yadda. And then comes the interesting part, here's all of our font sizes, yeah, okay.