[MUSIC] Welcome back. In this lesson, we're going to find out how we can use CSS to control the fonts that our website uses to display text. And so essentially, fonts come in three varieties that we can use meaningfully on websites. So, remember the fonts, there's many thousands of fonts in the world. And but your web browser might not necessarily have access to all of them. So we tend to think of them as appearing in three groups. So we can call those sans serif, serif and mono-spaced. So what's the difference between those? Well, let's write some code and see how they look when we use those different font types. So what I'm gonna do is I'm gonna start by redefining the fonts on the heading tag, so I write h one there, and I'm going to put in font-family, and I can set it really basically to something like that, so let's just dig into the browser, see how that looks. Okay, and you see when I reloaded that, it didn't really make any difference to those fonts, so let's try this. Okay, so you probably saw it change when I reloaded that time. So we're looking at this text here. Let me just flick it back to serif again. Okay, so what does that mean, serif? Okay, well if we zoom right in, in fact we don't need to zoom right in anymore. We can just say, use the font size and CSS and set it to some great big font size like that. Okay, perfect. So I've set the font size to 100 point, just so we can really see what serif means essentially. Now if we look at, so have a look at that s there. You can see it's not just a sort of nice, smooth line. It's actually got some extra bits on it there. So if you look at the end of the s there. It kinda widens out into a little piece. And if we turn that back to sans serif again. You see that the s kind of ends. It just kind of goes to a straight line at the end there, instead of having that wiggly bit on the end. Okay, so that is the basic difference between sans serif and serif. Essentially, sans, in the French, means without. And a serif is basically the little wiggly bit on the end of the letter. So, you can imagine that sans serif means without the wiggly bit, and serif means with the wiggly bit. So, if you look at that font now, you'll see that's obviously sans serif, because it doesn't have any fancy additions to the font, okay. And so, back to serif. You can see the t kinda has the special bits on the end. And so it's a more elaborate font. And typically your serif fonts are what you would see in a book. And probably the most well known one is times new roman. So when we're specifying our fonts, we can actually specify particular serif fonts. So there's not just one serif font, if you just write serif, then the operating system and the browser will just select just a simple serif font. But you can actually specify exactly the name of the font, and certain fonts are guaranteed to be there pretty much, so times new roman is normally available. And so that's a way of saying well my favorite choice, is times new roman, which we have to put in quotes, because it has spaces in the name. But if you can't find it, then just use whatever serif font you've got available. So that's a way of sort of having giving the browser some options. And we might refer to that as being graceful degradation, which is a kind of web programming concept, where you think well not every web browser is the same, maybe someone's logged in on a Windows computer from 1997 suddenly to my web page, and they don't have all the fonts or facilities that that I have now. This is quite rare these days. But, so what you've got with graceful degradation, you kind of make a few possibilities. And this is an example of that, we're basically saying, well, try this font which is my favorite. Otherwise, just go for this one. Okay, so I did actually say there were three types of fonts. The finer one is the monospace font. And monospace. Okay. So let's have a look at that one. So what's special about monospace, is that every letter actually has the same width. So it means that it lays out sort of perfectly, in a perfectly regular grid. Regardless of you know, which letter it is. So let's have a quick look at the web browser there, you can see the, if you think of this being columns so you've got the t and you've got the i below it, and so on. It fits in perfect columns, but let's just go back to one of those other fonts again, and see what happens. Okay, all the columns have gone all over the place, because in the design of a serif font, actually different letters have different widths, and that's sort of considered to be easier to read. Because you know, the serif kind of leads the eye onto the next letter. But it does mean it's not possible to make it monospaced, so it doesn't lay out in a perfect grid. And normally when you're working on code, actually, the editor that you use will have, be using a monospaced font, so that's where it's most commonly used. So let's say you were making a webpage that was talking about code, and you want it to show some code examples, you would use a monospaced font there. Then typically, something like a sans serif font, is considered a more modern kind of font. So you might use it for, to sort of have a nice modern title on your page. And some people just like having the main body text with a sans serif font as well. Okay, so we've sort of had a bit of an exploration of different font types and how you can control the fonts that are used for different parts of your documents, and we've seen that there are three types and considered a little bit where you might use those different types of fonts. And so in the next lesson, we're gonna dig a little bit deeper into how we can really control the layout a bit more. [MUSIC]
