Typography

[00:00:00]
>> Kevin Powell: Next up we have our typography. There's two different fonts that are being used in here, we can get that from the typography guides. You'll see them both right here in the list of the fonts being used, there's Outfit-Bold and Fira Sans-Regular, and there's a bit of Fira Sans-Bold in there as well.

[00:00:17]
So these are Google fonts just to make our life a bit easier and a little bit faster. For this project, you can just come here and copy this and bring it into your project. This will link to the Google fonts for both Fira Sans and the Outfit that we'll be using with all the font weights that you do need to have.

[00:00:35]
I'd say if you do want to do a little bit extra on yourself, I would actually recommend self-hosting them. Google Fonts makes it a lot easier to download things now. The priority for them used to be doing it this way, but self-hosting fonts tends to be a little bit faster these days.

[00:00:51]
And you don't give any advantages of caching cuz there's no cross-site caching that we have. But for today, I am just going to do it the easy way for this project. And if you wanna take that extra step to self-host, by all means, it can be a nice little bonus that you could do, but we could bring the two of them in just like that.

[00:01:11]
Then in our style sheets, the two things I would do is we can stay in our root folder here, and we can just get those two working. So again, I like doing --ff, you'll see a lot of people who are a lot of times you'll get recommendations for something, whoops, that's not what I wanted to do, but an ff-serif or an ff-sans-serif.

[00:01:31]
But we have a problem with this one, serif is both of these fonts are sans-serif fonts, which you often get. Different namings that I've used over the time has been base and accent, just to separate the two of them. Is one option if, depending on how they're being used within the project.

[00:01:50]
In this case, I think it's completely fine, just to say this is our body font style and this is our heading, because the headings all use outfit and the body text all uses Fira Sans. So I'll be doing it this way, if you have a different name that you'd like to use you can.

[00:02:05]
And it just be "Fira Sans", sans-serif as a simple font stack there and then here you can do "Outfit", sans-serif. And the reason now that I prefix things the way I do is because VS Code makes it a lot easier to use different styles. So if I came here and I say my font family, you don't actually have to write the whole var and then start writing everything out.

[00:02:36]
You can just do -- and then push ff, and you're going to get a list of your two font families. So then you can choose from the two that you want. And then for the color, we can do the same thing, we're gonna change this in a bit.

[00:02:47]
But for your color, you do --clr-b and you just get a list of all the ones that start with what you want. So it just makes it easier if you're trying to pick through colors having a little prefix on there. Then you get the list and then you know which one from there makes your life a little bit faster.

[00:03:03]
So for now, let's just do that so we can see if it works. And again, we can make this the 500 is our lightest one, just so we can see that we can see a bit of a brown color on the page there and see that it's working.

[00:03:14]
Next up with our typography, one of the fun things with Figma is when you get the font sizes from it, most of the time you're gonna be getting them in pixels. We're gonna talk a little bit about pixels versus other units. The one time you don't wanna be using pixels is for font sizes.

[00:03:30]
It's the only time I'm ever gonna argue on what unit you should use. And I would generally suggest using REM, it's what all the font sizes will be setting up now are. Again, this just takes a little bit of time to set up. If you using some sort of preprocessor, you can always come up with a calculator or something else to do it.

[00:03:48]
The reason I'm saying that is this for accessibility reasons. If you set things up in pixels, if a user is set a specific thing at their browser level in pixels, it will overwrite it. If you're doing it in M or REM, it's going to adjust itself to whatever the user preferences are.

[00:04:04]
And usually, if the users actually change the font size in their preferences, they've changed it because they probably want the text to be bigger. And that means maybe they have bad vision, could be anything that's usually probably what it is. If they end up on your website and you said 14 pixels, and this text is really small, they might zoom in, or they might just leave.

[00:04:24]
And if people have made those decisions, we might as well respect them. So by not having font sizes in pixels, you're respecting those decisions. So it does take a little bit of time, and I'm not gonna once again, just for the custom properties, I am going to provide them for you.

[00:04:38]
Just so you don't have to do all the calculations yourself on getting the different font sizes. It's just a little bit tedious and we're not learning a ton by just dividing everything by 16 along the way. The one question that might come up on that is the font size 62.5% thing you can do on your HTML element.

[00:04:55]
You can do that, it's sort of fallen out a favor from everything I've seen these days. And it's not that hard to work in REM once you get used to it. So I've gotten used to working that way, and it's how I'm going to be doing things along the way.

[00:05:09]
But, ooh, sorry, before we go to there, we do have the two different font sizes that we have to deal with for the small screens and our larger screens. And this is really where custom properties help us out a lot. Because native custom properties in CSS can be redefined within media queries, so it just makes life really easy to be able to do this.

[00:05:26]
There's also ways you can do fluid type with Clamp, and other things like that, that people really like. I love that, if it's a personal project of mine, where I'm just figuring out stuff on my own, and designing it on my own, I love doing that type of thing.

[00:05:37]
But when you have these types of things we are set for specific things from a Figma file, it can be really hard to figure out the calculations to get fluid typography to work. So if you wanna go for it, that's awesome, if you can get it to work, that's really good.

[00:05:50]
But I find it's not worth the headache, so I tend to avoid it in those types of situations. So in my root, once again, we have the colors that we're gonna have, ooh, sorry, the font sizes we have here. Same idea as before, of just going up and down based on my numbering system for the exact same reason.

[00:06:11]
But I'm as again, CSS vibes, my base size is 400 instead of 500 colors, 500 is my middle font size, my body's font size I always do is 400. The reason I choose 400 is cuz usually you don't have a lot of things smaller than your body's font size.

[00:06:26]
You'll definitely have one thing along the way, but you'll have a lot of font sizes that are bigger. So all I'm doing here with those font sizes is I've taken all the ones we have here, switch them over to REM. And just in order from biggest to smallest font size 300 up to in this case, I had to go to 1,000 cuz that's how many different font sizes I had.

[00:06:47]
So we can copy that, And bring that into here. So I think I have my font families, twice now, we can get rid of those. And now I have my font sizes just making sure it works, we can just come here and say font-size. And once again, you don't have to rate the var out, you just do fs, so you know it's font size, which is handy.

[00:07:14]
And then, let's just say, I don't know, 600, so that should actually, whoa, it didn't auto-complete for me there, okay. All right we'll do it the long way. --fs-600, save and my font got bigger or we can do a 700 for now, we can see it getting bigger so we know it's working.

[00:07:32]
Then we need a media query because this is for my small screen sizes. When we get to larger screen sizes, we do want these font sizes to get bigger. If you were doing this the old way, we would just come outside of here, make a new root selector or a media query, and then add another root selector in there.

[00:07:48]
But CSS has nesting now, and nesting is awesome, and especially for media queries. It's the best use case for nesting, in my opinion. So inside your selector, you can just throw a media query now. So inside the root selector, we can do it. And I'm gonna use the range syntax as well.

[00:08:03]
So width > is the same, I'll just do it first, 760 pixels. We'll talk about break points after. 760 is a bit of a magic number, I'm just gonna use it for now, if we need to adjust it, we will. As far as the syntax I'm using here, again, that's the range syntax for a media query.

[00:08:23]
They have this in CSS now, which is great cuz this used to be a min-width, that would be the same thing. min-width is always this weird thing cuz you're putting the word min, but it means bigger than, which is this weird cognitive thing that you eventually get used to.

[00:08:38]
But at the beginning, I always found it confusing, and I always noticed people had trouble with it. And just saying width > 760, is a lot easier, you can do < if you want it the other way, you can do <=, whoops, there we go. The same all the different types of operators, that you'd want or normally do.

[00:08:59]
So we can have our width > 760 and then we can redefine those font sizes wrong way. So I can just take those same font sizes again, I just got all these from Figma, I redefined them all. And at the larger font sizes, I decided what they should be.

[00:09:19]
So now, when this gets smaller, that font size should decrease and increase, there we go. You can see it's from the small size, and then it jumps up to a bigger size at that larger viewport. So I know that it's actually working. A couple of really fast things here before we move on.

[00:09:37]
You'll notice my font size, 900 and 1000 are the same at small screen sizes. That's just that part that I talked about, where at small screens they had to be the same, but at larger screen sizes, there's a difference between the two of them. This, for me, is the easiest way to do it, some people don't necessarily like having it that way.

[00:09:53]
So if you have a different approach you'd like to take, by all means, go for it. But I just said these are both the same here, but when we get to the larger screen size, they're both bigger. The other thing I did do is, I'm redeclaring a few of them, these two stay the same.

[00:10:06]
There's not really a point in having it. So we could just do it this way and only have the ones that are actually changing at larger screen sizes, that's perfectly fine.