Auto-generated transcript How to choose good fonts. Now developing an eye for picking good typefaces out of the thousands of fonts out there can take years. Now I don't claim to be a typography protege but through my experience developing all sorts of websites for different clients, I picked up a few techniques for selecting good fonts. And I'm going to share all of them right now. So first things first, you need to pick a category of fonts. Now there's all sorts of fonts out there but generally you can classify all of them into four major categories. Firstly we have serif fonts and these are fonts that have edges at the end of characters. If you're going for a classic, sophisticated, kind of a corporate kind of look, then serif fonts will work great for your project. Some popular examples of serif fonts are Times New Roman, Playfair Display or Merriweather. Up next we have sans serif fonts and unlike serif fonts, these fonts don't have any edges at the end of characters. If you want to go for a more casual, sort of friendly kind of vibe, then sans serif fonts can work great for your project. You can pick either a rounded sunsurf or a neutral sunsurf. Either of them can work great. But if you want to be completely neutral in your font choice then a neutral sunsurf works great as well. Some popular examples of sunsurf fonts are Roboto, Open Suns, MonsterArt and Inter. Up next we also have display fonts and these fonts are special fonts. They have some very unique attention grabbing characteristics. Some really striking visual features. They're very attention grabbing and they look great as headline text. Now use these fonts sparingly and only use them on large headline text because they are pretty much useless on small body text because they will hinder your readability. You've probably also seen fonts that look kind of like handwriting and those are called script fonts and they're just another subtype of display fonts. If you're going for a more creative, personal, artsy kind of vibe on your website and you want to add some creative flair to it, then script fonts are also a great choice for your fonts. Now finally, we also have monospace fonts, and these fonts are mostly used in the programming or technology niche. That's where I see these fonts used most often. If you're in a similar industry, if you're operating in the technology or coding niche, then monospace fonts can be a great choice as well. Otherwise, if you're in a completely different industry, then I would say either don't use them at all or use them very very sparingly. Now we have a bunch of font categories. Now you need to think about the brand that you're building this website for. You need to think about the overall personality of this brand, the vibe that this brand gives off and then based on that pick a font category which would suit it best. And if you really can't decide on a font category then just check out some competitor websites in your industry and see what fonts your competition is using this will give you a really good idea of what fonts look great in your specific industry You can use the browser dev tools to tell what font a website is using, or you can also get a browser extension that tells you what font a website is using. Either of these methods can work. Just pick one and use them. See what fonts your competition is using, and after that, it will be really easy for you to decide on a font category for your own industry and your own website. Now by now you should have a font category that you're going to use in your designs. Now just head over to Google Fonts or some other website that's hosting fonts, filter them by your chosen category, browse a bunch of them, and just select and download one that looks best to you. I usually go with something on Google Fonts because all of the fonts there are open source, but there are also other websites to pick fonts like My Fonts, Font Squirrel, Font Space, and others, and you can check them out as well if you want to pick a different font. Now I'm going to give you a couple more tips for picking a specific font in your chosen category. First you need to pick fonts with 10 or more styles. Now styles are just the font weight along with their italic variations. So a font weight is a style and that same font weight in its italic variation is also a style. You want to pick fonts with 10 or more styles because generally the more styles that a font has the more well designed it is. In general, and this is not a hard rule, but in general, this is what I've observed. The fonts with more styles are often the kind of fonts where the designers have put a lot more attention to detail and care into designing this font. And so you can take advantage of this and be able to find great fonts. And this way you can pick out the good fonts without having to be a typography expert. And also you are going to need different styles if you want to design a complete website. You're going to need things like bold and italic and light and different variations and different styles of font families. You're going to need all of these things if you want to design a complete website. Now, the thing with font styles is that if you don't have a style or if you're missing a specific style, the browser is going to try and compensate for it. And usually that does not make a pretty picture at all. For instance, here's two versions of the Poppins font with bold 700 font weight. Both of these are the exact same text with the exact same font family with the exact same font weight. But you can immediately see a difference in both texts. The first one is the original bold styling of the font, as defined by the font's designers. While the second one is the browser trying to compensate for the bold styling. And the way the browser does this is by literally thickening each character, just to make it look like it bolded And as you can see that not a good picture at all Obviously the styles that the font designers have created are the best ones And we want to make sure that we using the font original styles rather than having the browser trying to compensate on the fly and just making a watered down version of the original styling. We want to avoid that as much as we can. So this is one more reason why picking fonts with 10 or more styles is a good choice. Because you don't want to rely on the browser trying to compensate for any missing styles on the fly. Now you also want to make sure that the font you choose also supports the languages that you want to use in your website. Most of you are just going to be using English or the English alphabet, but if you want to support a completely different language, something like I don't know, Persian or Arabic or something like that, which uses completely different characters, then you want to make sure that whatever font you choose also supports that language. And if it doesn't, you need to find a different font that does support that language. Or you can just use the default system fonts. But whatever choice you make, you have to be mindful of it. Next you want to make sure that you're using the right font for the right job. Now some fonts are designed to look great on large headline text, while other fonts are designed to look great on small body text. And you want to make sure that you're using the right font for the right job in the right place. Now that leads to the obvious question, how exactly do you tell whether a font is meant for headlines or body text? And the answer is very simple. want to basically look at two properties. The X height and the letter spacing of the fonts. Now the X height is just the height of the lowercase letters in a font. Headline fonts will have a shorter X height while body fonts will have a longer X height. And this is just for readability purposes because fonts with a longer X height are a lot more readable which is why we use them in our small body text. Whereas when it comes to a large body text it's already so large that it's already readable. So we don't need to worry about the x-height there. So we use a shorter x-height on headline text, while we use a longer x-height on body text. And as for the letter spacing, the letter spacing is just the distance or the space between each letter in the font. Headline fonts are going to have a shorter letter spacing, whereas body fonts are going to have a longer and a wider letter spacing. And again, this is just for readability purposes, because fonts with a wider letter spacing are going to be much more readable, which is why we use them in our small body text to make it more readable. We don't have that problem in our large headline text, so we use fonts with a shorter or a tighter letter spacing in headline text. So to summarize that, when it comes to headline text, we want to use fonts that have a tighter letter spacing and a shorter x whereas for body text we can just do the literal opposite of that We want fonts with a wider letter spacing and a taller x So that how you can tell which fonts are meant for headlines and which fonts are meant for body text And if you use the right fonts in the right places, they're going to look a lot better. Another quick tip for selecting specific fonts if you're feeling stuck is to just sort them by popularity and pick one of the more popular fonts out there. For example, if you're trying to find a good sun-studded font, you can literally just filter them by popularity, sort them by popularity, and just choose one of the more popular options over there. And this is really useful because these fonts, they're popular for a reason. They're popular because they're very well designed and they're used on all sorts of different websites out there in the world. And if you're not a typography expert, then in a lot of cases, you can just trust the popularity of the font, trust the wisdom of the crowd here, and just pick the popular option. Because remember, if it wasn't popular, then it wouldn't be good either. The only reason it's popular is because it's good and people are using it in various different websites out there. So if you're feeling stuck, consider just trusting the wisdom of the crowd, trusting the popularity of the fonts, and picking one of those popular options as well. Now finally, I know we talked about checking out competitor websites before, but I really just want to talk about that point again because I think it's super useful in our work. You can literally browse a bunch of websites in your exact industry and see whatever fonts they're using. And you don't have to use their exact fonts, although you could very well do that, but you don't have to. The real benefit here is that you can find out what kinds of fonts look great on websites in your industry, and then you can base your font search on that. This can help you pick the exact font category you should go with, the kinds of fonts you should go with, and all sorts of different things. So to wrap all of that up, pick a category of fonts and then go on to Google Fonts or some other font directory and use all the tips that we learned and discussed in this video to pick some really awesome fonts. Look at the font styles, look at the languages it supports, look at the x-height and the letter spacing, spy on your composition if you have to. Over time, you're going to become better and better at picking out good fonts and you'll start to develop an intuition around this. You'll start to feel like you can wrap your hands around typography. You're going to start to notice and understand the little details that go into a well crafted design and a well crafted font family. But until that time comes, these tips are going to serve you very well. But anyway, that is all I can teach you today. Go out and implement this and play around with it. Implement it and you'll understand it a lot better. That is all. If you like this video, then like it. If you want to subscribe, then subscribe. And if you want to work with me on something, check out my website. The link will be in the description. That is all, thank you for watching and bye.