Hi, there. My name's Joe Laguero and I'm a Designer and Developer in the San Francisco Bay Area. Today, I'd like to share a few tips that I've picked up related to Font Size Color and Family. First, I'd like to start by sharing a general guiding principle that I've found useful and that is, is it readable? Ultimately, these decisions around color and size and font family boil down to whether or not people can read the texts on your screen. If they can't read the text on your website on their screens, then they're not going to be able to understand what it is you're trying to communicate. So when in doubt, come back to this question. Is it readable? And does this decision, aid my audience in understanding what I'm trying to communicate. Let's jump into Font Size. In general, you want to use a Font Size that's at least 14 to 16 pixels for the majority of your text. This is a good size, because it's not too small, so that people will have a hard time seeing it and it's not so large that people are going to have to scroll a lot. Headlines and titles can be larger, around 20 to 24 pixels. You'll see websites that use 32-pixel headlines and websites that use all the way up to 54-pixel headlines or above. There's not necessarily a one size fits all solution here, but the main point is that they should be bigger than the majority of your text on your site. See what feel right for you. Keep in mind that anything smaller than 14 pixels might be hard to read. That said, 12 pixels is occasionally appropriate for what's called microcopy. A good example of microcopy is the category or tag used to organize an article or a blog post. Another example might be the date of an article. These are pieces of text that aren't essential for someone to see on your website. Let's move on to Font Color. I'd like to share a resource with you called Web A-I-M, which stands for Web Accessibility in Mind. They have a contrast checker that will tell you if the contrast between your background color and your foreground color or font color is high enough. Here's the website. As you can see, you can select the foreground color here and you can select the background color below. I've picked a background color of white and a foreground color of 666666, which is a decent color. It's around a medium grey or so. The contrast ratio is 5.74 to 1. And if you adjust this, that will go down and up accordingly. Wow, looks like we're passing all the tests here since we raised that contrast. WCAG AA and AAA are two different measurements that give you a sense of whether or not people are going to be able to read the texts on their screens. As you can see, higher contrasts pass all the tests. But low contrasts, fail all of them or maybe just some of them. At a minimum, you want to make sure that your text color for the majority of your content is at least passing the AA standard. Otherwise, a lot of people might have trouble reading it on your website and that won't be good for anyone. Like I mentioned, make sure you pass AA at a minimum. I'd also like to recommend that you use color sparingly with text. Usually black, dark gray and light gray are sufficient. Remember that blue signifies a link to a lot of people on the internet, that's a common pattern that isn't really possible to change just on your website. So if you have blue text, people are going to think that they can click it like I demonstrated in this slide. Unfortunately, that's not clickable, but you can visit that URL yourself by typing it into your web browser. Finally, let's talk about font families. It's totally normal if you feel overwhelmed. There are so many options and so many possible pairs that it's hard to make a decision with font families. I'm going to share a resource that will help you, but first, I want to cover a few basics. This is a sans-serif font and what that means is that it doesn't have serifs. What are serifs? Serifs are a little feet that appear on this serif font, which is merry weather. The difference, it's important to some people and less important to others, but it does have implications for readability and it's an important thing to consider when choosing two fonts for your website. In general, I recommend that headings and titles are either serif or sans-serif, but the body and the vast majority of the text on your website be sans-serif. You'll find a lot of different opinions about this on the internet and you can read about those, if you want to by Googling a few. But in general, you're not going to go wrong if you follow this pattern here. Serif and sans-serif for headlines and titles and sans-serif for the bulk of your text. It's also important to keep in mind that using more than one or two font families can make a website feel unprofessional and disjointed, because. They might clash or a user might just no know where they are. Finally, for font recommendations, I'm going to recommend that you visit fontpair.co and click Serif/sans-serif. The great thing about this is that all the fonts on that website are available for free. And now, I'll demonstrate that website for you. Here it is and I've already navigated to the Serif/Sans-Serif section. As you can see, they offer a bunch of free font pairings and demonstrate them here. So, this is Crete Round and AbeeZee. Crete Round is the headline and title font and the font family for the body. Oops, it seems I've edited this website. The font family for the body is AbeeZee. You can see that there's a download link below. Hopefully, this will be useful if you're ever trying to decide which fonts to pair on your own website. And like I mentioned, the best part is that all these fonts are available for free. I hope you found these tips useful. And remember, when in doubt, come back to that guiding principle. Is it readable? Good luck, making design decisions on your new website and thanks for listening.
