2.3 Set the Typography

Okay, the first thing we have to do is set the typography. We're using some Adobe fonts so we'll go ahead and load those first and then we'll write the rest of the type settings. So I'm using three fonts from Adobe. I'm using FF Market Pro just for the handwriting. Meta Serif Pro for the body text and Futura for the heading, some also Futura Bold. So when working with Adobe fonts, it's really simple. You create a web project with those fonts and then you just include a style sheet they give you. So I did that, you can see it right here in the index HTML. I added that right at the top. Now, let's go into Custom CSS and make the necessary changes. First things first, let's get rid of these Google fonts, we don't need those. And then, we'll change the main font to ff-meta-serif-web-pro, with a fallback to a serif font. Now let's actually divide these a little bit. This will be for typography. Let's try and separate these from the colors. There's also another variable that we can use here, and that is called mainFontSize, and we'll set that to 18 pixels. And if you're wondering where I got that from, let's go to settings.scss, and these are all the base settings you can override. Okay, so actually, let's go ahead and copy all of these. And I'm gonna paste them right here. Let's get rid of this mixin, we don't need that. Let's clean this up a little bit. Let's delete these and this and let's take care of the headings right now. So if we do a quick refresh. Let's close this, we don't need it. You can already see a couple of changes. Now that's mainly because I replaced the variables that I had before with new ones that I just copied, but you can already see that the body text is now changed to that meta-serif pro. So now let's take care of the headings. And here, we're gonna put only, settings related to the headings. Or like for example, these. So I'll space these in. All right, heading margin. I'm gonna set this to 0 because using a variable like this will set the same value to all headings and I don't want that. I wanna be able to modify these myself. The heading font is going to be futura, pt-bold, with a fallback to sans-serif. The heading color, we actually don't need this here, that's under colors. So let's do colors here. $headingLineHeight 1.2, I'm going to leave it like this, letter spacing normal, text transform not upper case, I prefer normal. Text shadow, none, font weight, I'm gonna set this at 700 for now. We're gonna override some settings later. Text shadow, it has the same value as none. Now for the heading sizes, I'm actually gonna add a new one here called $heading5Size. And I'm gonna use a typographic scale, you can find one at typescale.com. You basically set your base font size and you choose a scale. In my case, I believe this Major Third is suitable for presentation. So we're gonna use the values that we have here. So $heading1Size, that's gonna be 3.052em. This one 2.441. Heading 3 is gonna be 1.953. Heading 4, 1.563, and Heading 5 will be 1.250. And then, I'm also gonna bring this up the vertical spacing between blocks of text, I'm gonna set this to 0 as well, so just reset that completely. All right, so with that done, let's so go ahead and take a look at our page. We can see the new fonts are now loaded properly. All right, so we're starting to get somewhere. Topography has the largest impact on any web project. So, as soon as you change that, you immediately start to get a real feel of the final product. All right, we still have a long way to go until we get to where we want. But this is a good start. All right, and that's pretty much what all we're gonna do to the typography for now. We got all our fonts in, we set the base styling for them, like the heading sizes, the line height. So we're pretty much good to go. The next step we're gonna tackle is colors. So as much as possible, we're gonna define the colors for our presentation thing here. That's coming up in the next lesson