 Hi there, in my last video we looked at six quick typography tips that you could use to make your websites look more professional, but one thing I did not talk about, and this was on purpose, I did not talk about how to pick fonts because picking fonts is something people really struggle with and it's something I wanted to dedicate an entire video to, and guess what? That's this video right here. Hi there, my name is Kevin, and if you're new to this channel, this place is all but learning how to make the web and how to make it look good with weekly tips, and tutorials, and as I said here, we are going to be talking about how to pick fonts, how to choose fonts. It is not going to be a deep dive into typography. It's a subject I'm really in love with, but we're focused on development and I don't want to overcomplicate things because then people just get, you know, we don't want to do it then. If it seems like something hard, you're not going to do it. And picking fonts does not have to be hard, even though it can sometimes seem like it. In this video we're going to be focused on two different ways or two different approaches that you can use. One of them, it's honestly the easiest thing in the world. But before we get to that, I want to talk to you about DesignMoto's postcards. DesignMoto has once again been kind enough to bring you this video right here, and their postcards are honestly something really cool. People on this channel have been commenting for years now asking me to make a video on making HTML emails because, you know, it's just a completely different beast from what all that other stuff we do. And it's been over four years now that I've had this channel and I still have not made one of those videos because tables scare me. I started making websites with tables way back in the day. That's just how we did it then. And I don't want to think about those days. I'm happy that we're gone. I like having Flexbox and Grid and not having to worry about tables anymore because honestly, they suck. And luckily we have tools like DesignMoto's postcards, which is a really, really awesome way to be able to build really nice looking emails for you or your clients. DesignMoto's postcards use a whole bunch of separate templates. You're not stuck with like here's template one, template two, template three. Using different pieces to build it out so you can really design these emails to look exactly the way you want them to. You're literally just dragging and dropping the different elements that we need. You can edit the colors. You can change the images, update the text all within the browser. And from there you have two options. Postcards integrate directly with MailChimp and HubSpot. So if you're using either one of those, you can export directly to them. Otherwise, you can download it as a zip file and easily bring it into your email service provider. And as an added bonus, you can choose for postcards to host the images for you. So if ever you need to build emails either for yourself or for clients, postcards is an awesome, easy, and great looking solution. The link to it is in the description right below here. And thank you very much to DesignMoto for helping support my channel. Now onto the topic at hand, the reason that you're here picking fonts. And you can definitely use these fonts. We're going to be looking at Google Fonts. So if you are building out an email template, you can use these fonts in your email templates with DesignMoto. And as I said, we have two solutions. We're going to be using Figma to explore exactly what I'm talking about. Let's get to it. So you may remember this design from the last video I did, if you did watch it. I've stripped away some of the changes I had originally made just because there are certain things in here that I do want to take a look at when it comes to choosing fonts. So the default in Figma is to have Roboto. And Roboto tends to be a good choice. And one of the reasons for it, and one of the first tips I gave in that other video was to make contrast through font weight. And that's one of the nice things with Roboto is we do have a whole bunch of weights. And we have the italic weights here to play with as well. And this is the first tip. The very first tip, the quick win is just find a font that has a lot of different weights in there because it makes designing so much easier. So just to give you an example here, we have, I've put this to black and why don't we just come here? We don't want to overdo it because unless we're using a variable font, we know that we can be increasing the load time and stuff like that. But just by putting those in black, it has made a really nice and big difference from what we had when it was, let's go back far enough, something like that. So like this, it's OK. And then just by putting those up in font weight, we've made it much better. You can even have some text in your paragraphs that end up being, let's put that up to black and you get a bit more interest going in like that. So honestly, if you're looking for Google fonts, don't grab something with one style, grab something with like 12 styles or 10 styles. And one font that is a nice Saucer font is Anton. It looks pretty cool, but Anton only has one style. So just to give you an idea, if we grabbed all this and I switched it all over to Anton, you can see that we, they, the paragraph text becomes really, really hard to read. So, you know, this is just becoming difficult to read there. This is a nice condensed, bold font like this works really well for titles, but it fails miserably with body text or text that's longer than just like a couple of lines or even a couple of words I should be saying. So I guess another thing that wasn't part of my quick win, but it's when you're choosing your font, start with a nice, really simple font. And a good way to start with is literally when you're in Google fonts here, go with a true trending now and just choose or not even trending now. Sorry, we shouldn't go with trending now. We should go with popular, most popular. Now you might be going, this is boring. Lots of people are using it. Yes, they are, but that's because these fonts will work. These are all nice, clean, sans serif fonts that have lots of styles on them. So there's a reason that these are popular. People keep coming back to them because they work super well. They're nice, they're clean, they're easy to read. You want to always start by choosing your body font. So let's say we come here and we want to choose or change our font that we'd used originally here. So we go over to Google fonts. We want to choose a nice, clean font that's going to work well. Now, there's a few things you can pay attention to. You can look at things like X height. You can look at the like Roboto mono. I probably don't want a mono space font. This is under oh, my category is gone. So again, if we just go down to sans serif, they are usually the easiest ones to start with. So this is the quick win. Remember, we're not going into big typography discussions here. We just want a quick win to get you rolling. So starting with a sans serif, switching over to most popular. And you don't have to take Roboto, even though it's number one here and it works well, you can definitely come through and find something else. PT sans, I'm a huge fan of. I wouldn't go with condensed fonts necessarily, unless you had a really good reason to. They do tend to work better for titles. But as we keep going, you're seeing like they do look really similar. But there is a lot of variation coming here. Look at poppins, how wide the characters look and how huge this is. And it's also one of these round a's compared to the Nato sans here, or even just compare it like the new new new Nito compared to poppins. Like these letters look huge compared to these ones. So it will change the way things work. And I think poppins actually wouldn't work well with these narrow columns that have here because the letters are so wide, but it's always try it, see if it works. And if it doesn't, you try something else. Now, one thing I just said is I love PT sans. But one of the problems with PT sans, this version of it, I only have a regular and a bold because, you know, these aren't going to help me. I don't have a light. I don't have other things I can play with. Now that might be enough, but I'm a little bit worried that that's not going to be enough weights, but in general, as long as you do have your regular, your bold and an italic, at least you've got the base things covered. So actually, why don't we go with PT sans for this over here? So I'll change my title over to PT sans. And that one, I'm going to make the bold this, this and this can all get changed over to PT sans. In this case, with that font, I might even be able to reduce my line height a little bit. I don't know what I made it. Let's put it at 150. There we go. And then now when I come into this, maybe this one. So actually, let's select everything along the bottom here. PT sans. And as we saw right now, this is kind of boring. I don't really like how it looks, but we can go and grab the name of each person and just switch that up to the bold. And right away, we've added a little bit of hierarchy in there. If we had some bold text that was coming through on, you know, different things you're trying to highlight, you have that bold option. And it definitely makes things a bit more interesting. But maybe it's not making it interesting enough for you. You find, OK, this was a quick when it worked. Now, if you really struggle with design, please start there. Don't try and mix two fonts right away. Start with having one font. And then once you're comfortable with that font, then you can start thinking about adding in a second one. And that's what the next part is where we're adding in an accent font. The first step is still the quick win. You want to pick a font that works well, but it's easy to read that you're going to use for all of your body text, all of your small font sizes, all of things that aren't titles. And then you're going to come in and find an interesting font that you can use throughout the rest of your site. This is for your titles, through things that you need to pop, things that you need to stand out. So in that case, you probably don't want to go with another Saucerif, even if it's a condensed one. Now, you can definitely 100 percent mix two different Saucerif, but it's really hard to do. The more contrast you have between fonts, the better. And the easier it is going to be. The classic is always to have, whoops, no category selected. The classic is a Serif with a Saucerif. That's like the absolute classic. For now, though, what I'm actually going to suggest is that you go with like a display or the handwriting or something, because you know, it's completely different from the Saucerif that you already have. It's a little bit easier to mix these in general. Compared to mixing a Serif and a Saucerif, just because sometimes there's a little clash between those, but it is a really classic thing to go with a Serif and a Saucerif. But always trying to get two different styles. And let's also be careful here, because I've took my display and my handwriting, but Comforta here, this is pretty much a Saucerif. If I took this, it's going to look kind of weird. So let's just say I take my name on each one of these. I really should have made this a component, but Comforta. Like it looks a little bit strange mixing this and this. Let's zoom in just on my text there at the bottom. And like there's not there's so much similar here that it's a little weird. These are kind of roundish and rounded corners. These are hard edges. The O is a bit of a different shape, but there's not enough difference that it's saying they're definitely two different fonts. It just creates this weird awkwardness a little bit. Whereas instead of Comforta, let's say I went with something that's like, I'm not a huge fan of Permanent Marker, but it's going to give us a lot bigger. It's going to at least work now. I might play with my font size a little bit on this one as well, if I were to come in with that. But like now it's definitely the wrong style for testimonial. But now it's definitely coming in with like two fonts that are completely different and it's technically it's going to work. It looks a lot here where these two fonts, they're sort of conflicting with each other because they're similar. Here there's this clear distinction between the two. Now, if you want something, it's a bit more clean. Grabbing these types of fonts can be cool. This is clearly something different. Now, with these, it's not so important. They have multiple styles because you might want to have a bold and not bold, but a lot of time you'll notice one style, one style, three styles. These style of fonts tend to only have one style anyway, because they have so much personality in them that they don't necessarily need to have the multiple ones. So I think for this one, I'm actually going to go with luckiest guy here. I think that's an interesting font. It has a bit of personality. Let's say my brand is a little bit luckiest guy, a little bit more on the fun side. So you can see that it works, you know, it's a different style. It is more Saas Arif, but it's almost like comic book Saas Arif. So, you know, the two of them are going to tend to work well together. Now, one problem with this is the font is all caps all the time. So because it's all caps all the time, it will limit the ways that you can use it. So you do want to be careful with that and just be aware of that, because if you do need to have lowercase text, if I wanted to keep this in lowercase, it wouldn't work on something like that. So you would want to be careful with it. Now, I think actually it would work well over here with my sort of interesting looking pig, so we'll try it, luckiest guy. I think that actually goes really well with my pig. It has a bit of personality to it. But this would be impossible to read if I set this all luckiest guy. You know, now that this is hard to read all cap text, it's already harder to read. Now it's all cap, it's bold. Everything about this is just hurting me. I'm not going to read that if I'm somebody visiting a website. Whereas if it's a product that interests me, maybe I'd actually read it here. And I do like the extra personality that I've gotten from that. So looking at one more example here was this fundraiser one we did. So once again, let's actually just stick with Roboto for most of this. And we can come here and take advantage of Roboto's bold and things like that, or maybe that's even black. But we want a different font that we can bring into here. And maybe the ten dollars can even get it. And this is one of those cases where it's make our lives a little bit more difficult. We're not going to go with this, because I don't find these wacky type fonts work for the type of card that I'm building. So let's actually go with having our just serif font here. And in this case, we want to find a serif font that's going to work well. So here in here, I want to get something once again that has a bit of personality into it. What I might do is look for fonts. I'm going to go into the font properties in the thickness. This is like the weights. And I do want something it's going to be for my titles and stuff. So in general, they're going to be bold. Now, this is not going to eliminate fonts that here, I still have 12 styles. So it's only going to include ones that do have the bold, but it doesn't mean it's eliminating it just because it has other weights as well. So this could be something good. And actually, I sort of like that one. I do want something a little bit more serious. Once again, I like this font, but it's really limited because it's all caps. And maybe I don't want that limitation. So it's something I'm going to pay attention to. Actually, I'm going to come back up to the top because the one sort of stood out to me the most was bitter here. So let's just see if we can get bitter to work better. There we go. And I did like the bolder version of that better. And I do think that works well. And I do think one advantage with this one is it's going to be able to work well for a few different places. So let's try that here, bitter. And I think I could reuse it in a couple of places because it's always nice if you don't only use it for your title, but you do find a couple of other places to use it on. If something's used only once in the design and you never see it anywhere else ever again, it's probably kind of weird. If it's on all your H1, H2, H3s already, it's better. And then maybe you can find a few other little places to bring it into. Now, I sort of like the all-sauce-serif one here better. I didn't spend a ton of time picking this, but I do think this combination does tend to work. I don't see any strange conflicts. They're clearly two different fonts, so it's not this weird thing. Whereas if I use like open-sauce on here, open-sauce bold and then or extra bold, whatever, you know, these look like they're almost the same font, but they're not the same font. And at one point, if you ended up with something else, like even if I just came into here and I made this bold, you'll start seeing some similarities between them and you'll start seeing some things that are not the same. So one example here is the shape of the S here and the shape of the S here are different. And what this does is because these two fonts are so similar, it creates this weird conflict where people notice there's a difference, but they don't know why they're noticing it because they're not analyzing the shape of the S's. It just creates like, why am I choosing two different? Like what's the purpose of having two different fonts right now when I could just keep either all open-sauce or all Roboto. The fonts are so similar. There's literally no reason to have two different fonts, so don't do it. So either I go with all Roboto across everything or all open-sauce or I come in with something that's quite noticeably, just like that, a completely different font. And then we know it's going to work as well. And there you go. I hope that this has made choosing fonts at least seem a little bit less scary. And hopefully once you get into doing it for your next project, you are a little bit less intimidated or a little bit more confident in going out there and picking one thing before you go. I'd really like to know, what is your favorite font? Leave a comment down below and let me know your favorite font. Now, if you're anything like me, your favorite font's always changing. So what's your font de jour? You know, what do you, what are you digging right now? Leave a comment down below and let me know. A big thank you once again to DesignMoto's postcards for bringing you this video. If this is your first time here and you haven't yet subscribed, please do consider subscribing for weekly tips, tricks and tutorials like this, or also a lot of CSS stuff too, because that's just, that's my jam. I love the CSS's. And I guess that's it. A big thank you to my patrons for helping support me and everything I do here. And of course until next time, don't forget to make your corner of the internet. It's a little bit more awesome.