Auto-generated transcript Okay, so today's gonna be a really quick video. I just want to talk about fonts again. I know I talk about fonts a lot, but I want to specifically talk about how to choose between headline fonts and body fonts. Now, both of these are completely different things. Not completely, but like... There are certain fonts that look great for headlines and there are certain fonts that look great for small body text. And if you choose the right font for the right job in the right place, then it ends up looking a lot better than if you just, I don't know, use the same font everywhere in every use case. So that's what we're going to talk about. We're going to talk about how to pick the right fonts for the right job so that our design looks a lot better than it normally would. The main thing here is to not use headline fonts for body text because that will just kill your readability. The thing with headline fonts is that they are literally designed to look great on large text. Now this design does give them some distinctive properties that makes them a bit harder to read on small body text. We know that body text is really small, we know that headlines are really large, so we need to pick the right fonts for the right job. If you, for instance, pick a font that is meant for headlines and if you try to use that in your small body text, it's gonna be a lot more difficult to read that font because it's not designed to be used on small body text, right? So yeah, stuff like that. That's what we're going to talk about in today's video. Now, when you're trying to pick between when you're trying to pick a body font versus a headline font they're basically two properties that you need to look at two properties in typography in different fonts that you need to look at that's the X height that's number one and the letter spacing that's number two and I'll show you what both of these mean and how we can use them to pick between different fonts so first of all the X height now I'm going to pick a font here called Joss this is headline font which means it's meant to be used on headlines and not in body text the X height let's let's talk about the X height the X height is basically the height of the lowercase X so if I have some I don't know some text here like this is some text if I have this over here and I go down to the regular 400 font weight the height sorry about that the height of this x character is what's the x height all right the lowercase x now why is this important especially in choosing fonts because when it comes to small body text we want to have a taller x height as that makes it a lot easier to read that text but when it comes to large headlines right headlines are already very large we don need to worry about readability when it comes to really large headlines So what we can do is we can use a font with a smaller X height something like Jost right here. Now this is meant for headlines, right? So it has a smaller X height. If I showed you a different font, let me open up another page here and let's look at something like Montserrat. So this is a body font and you'll notice that it has a lot higher a lot taller x height if i have the the same text here let's say it says some text and you go i go down to the regular 400 you'll see that the x height is a lot bigger over here and i'll just show you both of these side by side as well so you can so you can compare these as such there we go let me also make sure that the text is the same yep 48 pixels here 48 pixels here so it's the same text same font weight everything but you'll notice that the x over here is just larger than the x over here right and the reason for that is just this font is meant for headlines which is why it has a smaller x height whereas monster art over here this has a taller x height and that's because it's meant for body text so again just to recap if you want to pick up if you want to pick a font for body text you want to pick something that has a taller x-height as that's going to improve the readability of your text which is very important when you're using it for small body text right and if you're trying to pick a font for headlines you want to pick something that has a smaller x-height something like just something like anything else really that has a smaller x-height and you need to do this because it's just going to look a lot better because headlines headline text is really large so we need to have a smaller x height there and that just looks a bit better right so that's what that's how we can use x height to pick better fonts now let's talk about letter spacing so letter spacing as you probably already know is the space between each letter in a font right now if you've done some sort of coding or designing in css or figma or anything like that you'll know that we can actually tweak the letter spacing of each character on our own right so css has a property letter spacing that we can use to differentiate between oh sorry to deliberately change the value of the letter spacing in our font right but every font also has its own intrinsic letter spacing that's literally baked into the font right so if i show you these fonts again you'll see that the let me line this up as well you'll see that the text over here in JOST which is meant for headlines is a lot tighter whereas here in Montserrat which is a body font the text is a lot wider like there is a lot more letter spacing between each font right you can see that it actually takes up much more space as well right like see this Montserrat text it takes up a lot more space which means that characters are a lot wider there's a lot more letter spacing in them and that is why it's good for body text whereas the same thing over here in Jost it's a lot tighter like a lot the characters a lot more tight together right so it has a lot less letter spacing than monster art which is great for headline text now why is this the case well this is because when it comes to small body text we want to have a wider letter spacing and this just makes it easier to read that text right it's small text we want to keep the readability really good and the way we can do that is to have wider letter spacing it just makes the the words a lot easier to read now when it comes to large headlines again they're really large very easy to read we don't need to worry about the letter spacing there we can actually use a tighter letter spacing there and that just makes it look a bit better right so that's how we use letter spacing to pick fonts between headlines and body text tighter letter spacing the words are or the letters are a lot more mushed together that looks much better on headlines, on large headline text. Wider letter spacing, and that's just great for body text, because body text is really small. We want to improve the readability of that small body text as much as we can, and wider letter spacing is going to help us do that. So that's basically how you can pick between headline fonts and body fonts. The x height, you need that, and also the letter spacing. So just a quick summary of everything we talked about. So when we're trying to pick a font for headlines, we want to have a short x-height and we want to have tighter letter spacing. But when it comes to body text, when we want to pick a font for body text, then we want to have wider letter spacing and a taller x-height. And that's just some basic readability rules that's going to help improve the readability of our text and just make it look a lot better, right? So that's how you pick fonts between headlines and body text. Now, Now this video wouldn't be complete if I also didn't talk about display fonts. So display fonts are basically just headline fonts. They are literally only meant for headline fonts and they have some really striking visual characteristics right? And these characteristics look really great on large headline text but when it comes to small body text it just makes the text completely unreadable. So display fonts are meant only for headlines. Now I show you some examples of what I mean here I can go to the filters and I can use any of these really all of these are display fonts in some way maybe something like this and I close this other tab you can see that these fonts are really like weird in a sense right like they're meant only for large headlines why because they're hard to read right look at this it's really hard to read unless it's some really large text right this is really hard to read because it's small text this is 120 pixels this is easier to read so display fonts are only meant for large headlines if you want to make your headlines look a bit like just more well-designed like if you want to make it look like you really pay attention to the details then you can try using a display font but just be careful not to use it on body text because it's just going to destroy the readability of the text just imagine using some font like this on small body text which is literally 16 pixels right something like even less than this right it's just gonna be impossible to read and you show you a couple other fonts that are meant for displays as well but yeah something like this as well this could look great on headlines if you're building some sort of a playful kind of kids website or something but it's not going to look great on body text. I can shorten the text again. It's just really hard to read, right? So just be careful with that. Do not use display fonts, which are only meant for headlines. Do not use them on body text. It's just going to destroy the readability of your text. Only use them for headline text, large headlines where the text is just going to be so large that these fonts aren't going to hinder the readability right but yeah that's about it so just a couple basic rules for picking better fonts especially for headlines and body text don't over complicate it it's just really basic rules follow the x height follow the letter spacing and just pick great fonts you don't need to over complicate it if you just follow everything that we talked about in this video you're already ahead of most designers just like that so yeah don't over complicated follow the simple process and that's about it like subscribe and if you want to work with me or something then check out my website the link will be in the description if you want to improve your design skills or something I have a free book on design which is just all of my experience building websites and I just shoved all of the knowledge I have into that book if you can you can check that out as well it's completely free yeah that's about it