1. Introduction

1.1 Web Typography Basics in Figma

In this course, you're going to learn how to design web typography for a site using Figma, and implement an extensive repertoire of typographic principles that we've covered on Tuts+ tutorials across the years. This is the first of a two-part course. And in this first part we're gonna cover the most important fundamentals of web typography. By the end of this course you're gonna have a clear understanding of how to select and pair fonts, how to set up your text sizes in a flowing, but practical way, how to properly plan for spacing throughout your typography and when you need to create overrides for the text styles that you've already established. So let's go ahead and get started with web typography basics in Figma. I'll see you in the first lesson.

2. Font Selection

2.1 Font Classifications

Hey, I'm Kezz Bracey for Tuts+. Welcome to the first section of Web Typography Basics in Figma. This first section of the course is gonna be all about font selection, and we're gonna break that into three parts. The first part is gonna be about the different classifications of fonts. Then we're gonna move on to combining fonts together, and then the third part, we're gonna talk about font stacks. So first up, we're looking at font classification because it just helps to simplify the process of font selection. Generally speaking, if you have an idea what type of a style you're going for in a design, you're gonna be able to match that to a certain category or a classification of font. There are six essential categories of fonts. So if you know which category you're looking for, you can immediately reduce the number of fonts that you need to troll through down to a sixth of what it otherwise would be. What you can see on the screen here is a set of examples of each of the different classifications of font. So just to quickly rattle them off, we've got serif fonts, sans serif fonts, slab serif fonts, semi-serif, script, and monospace. And in each of these examples, the first four of the fonts that you're seeing on the screen here come from Google Fonts. Now, Google Fonts are automatically available for you inside Figma, whether you're using a desktop version or an online version. However, if you want to use local fonts, fonts that you have installed on your machine inside Figma, there are two ways. You can either go via the desktop application for your operating system. If you're using the desktop editor on either Windows or Mac, then it will just automatically pick up your local fonts. There isn't actually an official Linux version of the Figma desktop application, but there is an unofficial version which is built on Electron. It's also free and open source, and I will link to that in the notes below this video if you are working on Linux. This will also pick up your local fonts automatically, but in my experience so far, it will only pick up fonts that are inside your user share fonts TTF folder. So you might just need to take some manual steps to make sure that your fonts are inside that folder, and then you'll be all good on Linux as well. If you're using the online version of Figma, then you can still use local fonts as well, but you're gonna need to install the Figma Font Helper. Now, this one is only available for Mac and Windows. And I'll provide a link in the notes below this video to the instructions on how you can get that local font enabler set up on your system. Okay, now with that bit of housekeeping out of the way, back to the fonts. In a lot of lessons in this course, we're actually going to be building on top of topics that we've previously covered already on Tuts+. And in the case of this lesson, we're building on this excellent article titled, A Comprehensive Guide To Typography Basics. And again, there'll be a link to this in the notes below this video. This gives you a really good theoretical rundown of the difference between all of the different types of classification, and a little bit on the history as well. So definitely go and have a read of that article when you get the chance. The first of these classifications that we're looking at is the serif typeface. The one thing that all serif fonts have in common is these little lines that you see that terminate the ends of several of the lines that form up the letters. And as you can see in this little bit of text here, interestingly, it's thought that it was the use of chisels that led to the creation of this particular stylistic element of fonts. Now with these different categories, some of the categories of fonts can really only be used well in headings. But a serif font can be used well in both headings and in regular text as well. It's fairly readable. In fact, in some schools of thought, it's believed that a serif font actually enhances readability, because the serifs help you to quickly differentiate between similar letters. We traditionally see serif fonts used a lot in newspapers and news websites, but serif fonts are kind of a one-size-fits-all type of a classification. You really can't go too far wrong using a serif font in just about any situation. Next up, we have sans serif fonts, which as the name suggests, means that the serifs have been removed from the letters. And in the article that we're building on, it tells us that sans serif fonts came into popularity in the 1920s. And in a nutshell, they were designed to give a more modern style, something fresh and new. And you might describe the sans serif style as being something a little cleaner. And there's a lot of debate over whether sans serif fonts are actually more readable than serif fonts. And that will probably tell you that you are actually fine to use sans serif or serif fonts in your body copy. Because if it's a fairly even debate, then that tells you that it's probably a fairly even of number of people who prefer one over the other. So you're all good to use either type in your body copy. Next up, we have a couple of variations on the serif font type. First up is the slab serif, which is almost the same as a regular serif font, but it just has a different type of serif on the letters. So we're in a regular serif font, you can see there's sort of a tapering that happens on the serifs. So we have these smooth curves that lead from the main part of the letter out to that serif. However, with a slab serif font, the serifs are more slab shaped. So instead of those curved and tapered serif shapes, we just have rectangular serifs. And our article gives us the background on the slab serif fonts, that they're often used for typewriters to make sure that you had enough contrast on the page. So basically, the time at which you want to use a slab serif font is when you really wanna grab attention. And that's why, generally speaking, a slab serif font is best used in a heading, but probably not in body copy. So if you need a font for a major heading in your design and you need it to be punchy and attention grabbing, that's when you would consider using a slab serif font. Now, a second variation on the serif font in the semi-serif font. This type of font is kind of halfway in between a serif and a sans serif font. So you have some serifs, but they're not complete serif like a serif font. They're not slabs, and they may not be present in the same places as you would see in a classic serif font. For example, in this Philosopher font here, you can see that we have the serifs along the top of the letters. But they don't extend out to the right, they only extend to the left, and we don't have serifs along the bottoms of the letters. So it has a kind of serif, but not a complete serif, hence, we call it a semi-serif font. A semi-serif font is going to almost exclusively be something you would use in headings. When you're choosing a font that you use in body copy, you want something to be fairly consistent, something that a reader is used to so that they can more quickly and reflexively read the text on the page. Semi-serif fonts, by their nature, are atypical. So their novelty means that they can be great for headings, they can be great for attracting attention because they are that little bit different. But even though you can make your judgment on a case-by-case basis, generally speaking, you wanna keep your semi-serif fonts in the heading sections of your designs. Our next classification of fonts is a script font. And these are, generally speaking, designed to emulate handwriting, whether it be a sort of informal handwriting style or perhaps a calligraphic handwriting style. When you want something to look more human and more personal, that's when you would look at a script font. So that might be part of a set design that needs to be more lighthearted, or you might use a script font to sign off a name, for example. And then the final classification of fonts that you can choose from is monospace fonts. And what makes monospace fonts unique is, again, suggested by the name. It's the fact that there is the exact same amount of space from one letter to the next, they're all the same width. So for example, in one font, a W or an M might be quite wide, while an I is quite narrow. With a monospace font, both of those letters will take up the exact same amount of space. Monospace fonts originally came from typewriters. Typewriters had to make sure all of the letters were the same width. That was just part of the way that their functionality was set up. So if you trying to create a design style that emulates a typewriter, then go for a monospace font. Another area where monospace fonts are used heavily today is in coding. So if you need to present some code examples on your site, then again, definitely go for a monospace font. And then the third area where you might like to use a monospace font is if you're trying to do something stylistic to make it look digital. So for example, you might want to create a clock that looks like it's counting down to a release date on a coming soon page, for example. Then you could use something like this Date Stamp font here to create that kind of a digital look. Okay, so that covers our classifications. The next question is, once you know which category of font you wanna use for a particular portion of your typographic design, how do you actually find these fonts? So at the start of the video, I mentioned that you've got two ways to get access to fonts. In Figma, you've got access to Google Fonts, and you've got access to locally installed fonts. So we're gonna cover how you can find the right type of fonts through either of those methods. So we're gonna start by heading over to Google Fonts, and the first place that we wanna look is in this Categories dropdown. And in here, you can see that we have a number of the categories that we just discussed. So right away, we're gonna see that if we want to view only serif fonts, then we can just uncheck these other fonts. And then now we can see just serif fonts, we can find the name of a font that we want to use. Let's say we wanna use Merriweather. Then we can come back to our Figma document, create some text, and then in our text dropdown, we can just start typing in the name, M-E-R. And then we're gonna be able to locate that Google font. So every single Google font is available to you through Figma in this way automatically. If you want to speed the process up of finding fonts that are more likely to be good quality, then one of the things that you can do is sort by most popular. And most of the time, the fonts that come up as being most popular come up for a reason. They're almost always really good fonts. So we can do the same thing, we get rid of this filter here, and now, we can just look for sans serif fonts. So that's just the same process again. We also have an easy way to find monospace fonts. So then that just leaves us three more categories to try to find on Google Fonts, slab serif, semi-serif, and script fonts. We don't have any built-in categories named exactly that. However, the handwriting category in here is actually just using a different name for script fonts. So script and handwriting are pretty much a one-to-one match. And then, that just leaves slab serif and semi-serif. To find slab serif fonts, I've found that the easiest way is just to filter down to serif fonts, and then just add in slab to the search phrase. So then that does a pretty good job of finding a whole bunch of slab serif fonts, and you can see those in action in these first four fonts here. I used that method of refining down Google Fonts to find these four fonts here. These are all serif fonts from Google Fonts. And these four fonts here, which are all sans serif fonts from Google Fonts. And you can see here, these four fonts are those four most popular fonts from Google's handwriting section, which corresponds with the script category. And here, we've got four of Google's monospace fonts. All four of these are excellent for code sample displays. Now, semi-serif is a bit more tricky. Because of the nature of semi-serif fonts, they kind of fall between the gaps, they're not really in one category or another. And I didn't actually find any particular search on Google Fonts to reliably bring up semi-serif fonts. But what I did find was that on 1001fonts.com they have two filters, Google web and semi-serif. And that allowed me to find a pretty decent list of the semi-serif fonts that you can get off Google Fonts. And these four are four of those semi-serif fonts that I thought looked particularly good. So that gives you a guide for how you can find each of these six classifications on Google Fonts. The next thing that we're gonna look at is finding fonts in each of these categories for local installation. And we're gonna focus on doing that via Envato Elements. So along with the subscription that gave you access to this course, you also have access to all of the fonts that are available on Envato Elements. To access them, just head to elements.envato.com, go up to Browse, and then just choose Fonts. From here, you've got a couple of things you can do. You can select some of these filters to refine the results, and you can use the search field. But just as with Google Fonts, the easiest thing to find is just the serif or sans serif fonts. So here, I have just refined the search by serif. And another thing that's really useful, because you're doing web typography and not print typography, it can help you to find web suitable fonts by also checking the box Web Font down the bottom of the sidebar here. So I've gone through and picked out a couple of examples of each of the different categories that have come up in the search results. So we've got Kohm, Montrell, Antique, and Reformer. So I've downloaded each of these fonts and installed them locally on my system, which then made them available for me to use via Figma. So these are those four fonts in action here. To find sans serif fonts, it's the exact same thing. Just check the Web Font box, but now check Sans Serif, and some examples pulled out from this search are Bw Quinta, Helios, Stickler, and Enrique. So that's these four fonts here implemented inside Figma. The next category to show you how to find is slab serif fonts. For this, I just did the same search as i did for regular serif fonts, so with the Serif and Web Font boxes checked, but also with word slab in the search term. And that brought up several examples, including Falcon, Bw Glenn Slab, Camelia, and Haytham, and that is these four in action inside Figma. With semi-serif, again, these are the most hard ones to find because they don't really fall cleanly into any category. However, I found the best results came from, again, using the same search as we did with serif, with the Serif and Web Font boxes checked, searching for semi-serif in the search field. Still a lot of these pretty clearly either slab serif fonts or regular serif fonts, but I did find one example, this SUNN Serif font. It has serifs, but they're not quite the normal kind of serif, and here it is in action inside Figma here. Next up, we have our script category. There's a premade check box for this one as well, so just checking Script and Handwritten, keeping Web Font checked. And through this search, I found the Selfish font, Summer- Handwriting Font, Geographica Script, and Humble Script. And that is these four loaded up inside Figma. And then finally, we have monospace fonts. The monospace fonts don't have their own category up here. Instead, there is a set of spacing filters that you can use down here, and you can check Monospace, once again, keeping that Web Font box checked. And through this search I found the Bergen Mono font, Espion Grotesk, Date Stamp, and Arkibal Mono, and that is these four fonts in action here. So as you can see, between those two different sources for fonts and the six different categories, we've got a quite diverse array of fonts to choose from. And I'm sure you're probably already starting to get a feel for where these different types of fonts would be most useful. So as I mentioned at the start of the lesson, once you can break things down into these six different types of categories, then you can make your searching much, much faster. And you can find the font with the right type of style for the design that you're working on. Okay, so next up, we're gonna start looking at font combining. It is completely possible to use just one single font throughout your entire design. But more often than not, you're going to use two or maybe three fonts throughout your design for different purposes. You might have a different font for heading and text. You might have a different font for block quotes or code samples. But it's important to be aware that sometimes, two different fonts, even if they look great separately, they won't work well together. Learning how to find two fonts that work really well on the same page, especially in close proximity to each other, is a major part of web typography design. So what we're gonna do is outline a couple of simple rules that you can follow to make sure that when you're selecting fonts to work together, to pair together, that they're gonna work well. So we're gonna go through that in the next lesson, I'll see you there.