7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 1 hour

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 CSS Font Properties

In this lesson you’ll learn how to control typography with the fundamental CSS font properties such as font-family, font-size, font-weight, and font-style.

Related Links

2.2 CSS Font Properties

Hi, and welcome back to Start Here: Learn Typography CSS. In the last lesson, we went through a basic introduction to CSS. And in this lesson, you're gonna start writing your own CSS, beginning with the four fundamental properties for CSS typography. And they're font family, font size, font weight and font style. Now, to get started, you're gonna need an HTML file like you see on the left side of your screen here. Now, there are two ways you can get this. One, you can make a copy of the HTML file that you created in the last course on HTML Basics, and you can just delete all of the content, all of those elements that you placed, and just replace it with one paragraph inside your div class wrapper. And then just put any text inside that paragraph that you like. Or if you don't want to do that, you can just download the source files that you get with this course, and this HTML file will be provided for you. Now, this HTML file is already linking in a stylesheet. And you went through creating one of these link elements to bring in a stylesheet in the last course on HTML Basics. So this is loading in this stylesheet here, style.css. And there's a little CSS already in there, but don't worry about the contents of that right now. That's just putting a little bit of layout styling into our page, and we're gonna be working with layout in another course, so just ignore that for now. Now, what we're gonna be doing is creating a selector that will target our paragraph tag. And then we're gonna be setting up each of these four fundamental font properties to target our paragraph tag. All right, so head in to your style.css file, and then below the code that's already there, we're just going to add a p. Now, this p selector is going to look through the HTML of our page here, and every time it finds a p element, a paragraph element, it's going to apply the CSS that we create. Now we need to add an opening curly bracket and a closing bracket and make some space inside. Now let's apply our first of the four properties that we're going to be working with. We're going to apply a font-family property. Now, you'll often hear people referring to just which font they're going to be using. But in CSS, we don't just say font to specify which font we want to use, we say font-family. So let's set the font-family for our paragraphs. So first we need to specify the property, which we'll do by entering font-family. Now we need to put a colon, and then after the colon, we can specify the value. Now, here we need to enter the name of the font family that we want to apply to our paragraph. So let's use Arial, so that's capital A-R-I-A-L. And now let's end our line. We need to add a semicolon. Now let's see what it does to our text. So there we go, that's changed the font-family from the default that's been set by the browser over to our new Arial font. Now, if we inspect our paragraph, we can see that our code here has been picked up from our stylesheet. And if we look down here, we can see on the rendered fonts area in the inspector window, it's picked up that we specified the Arial font family. Now, you can change this value to anything that you like. So, for example, we might use Times New Roman instead. Now, whenever you have a font family that has spaces in the name, you'll need to use quotation marks. So we'll add quotation marks and we'll put Times New Roman. And now our font has changed to Times New Roman. All right, so next up, let's tweak our font size. Now, we're just gonna put that back to Arial. And now we're gonna set the font size of our text. So just like we did before, we're gonna add the property, which is font-size. Now we'll need to add a colon, and then after the colon, we can put a value. Now, let's bump this up and make it a little bit bigger. We're gonna to set the value to size of 1.5 rem, and I'll explain more about what rem means in a subsequent lesson. So we'll put 1.5 rem, and then you should see the size of our font increase. So there we go, that's bumped it up, and you can see how it's affected the display of our text. Now, font-size is very important. It's one of the most important things that you can learn to control in typography. If your font-size is too small, then it's very difficult and uncomfortable for a reader to go through. If your font size is too large, then you'll find that you're crowding too many words onto a line to make for a comfortable reading experience. Now, right now, we're working with a paragraph element, and that's what the bulk of the text is going to be in most websites. Now, the size that we're working with now is probably a little bit too big, so let's pull that back down a little bit again. We're gonna change this to 1.125 instead. Now, that's brought that down to a far more comfortably readable size for our paragraphs of text. Okay, so next let's have a look at the font-weight property. Font-weight controls how thin or how thick your letters are. So in the next line, let's add in font-weight, and a colon. Now, the easiest and the most common use of font-weight is just to set text to bold. So let's see what happens. So we'll add in a value of bold and save. And now we've just bolded the text that we're working with. If you have some text that's already bolded but you don't want it to be, then you can set the value of font-weight to normal, and you just get normal thickness in your lettering. As well as using words like normal and bold, you can also use numerical settings for this. Now, different fonts can support multiple different numerical settings. Now, the word normal is kind of a shortcut for the number 400. So if I put in a value of 400, nothing will change. And similarly, the word bold is a shortcut for the number 700. So if I change this to 700. We see the text bolded again. Now, some font families have support for multiple numbers. Now, let's take a quick look at Google Fonts, just so I can show you what I mean. So here we are at Google Fonts, and we're looking at the font family Open Sans. And a later lesson I'll show you how to use this font family in your styles. So as you can see here, we have Normal 400. And that gives you the normal weight for this font. We also have bold 700 which gives you the bold weight. But this font also has support for 300, 600, and 800. So when you're using a font like this, you'll very commonly set one of these numbers as the font-weight in your CSS. All right, so, that covers font-weight. Now, let's move on to using font-style. And you'll use font-style when you want to italicize something. So let's add in our new property font-style and add a colon. And then let's add our value of italic. And now that's italicized all of that paragraph text. And just like I described before with the font-weight, if you have some text that's already been italicized and you need override it, then you can set the value for your font-style to normal. All right, so that is all four of the fundamental font properties. Now, there's just four of them, but these font properties will actually form the foundation of a huge portion of your website designs. So in this lesson, when we were changing the font-family, we just looked quickly at the Arial font and Times New Roman font. Now, those two fonts, Arial and Times New Roman, are what we consider web-safe fonts, because they're already installed on the vast majority of computers. Now, in the next lesson, we're gonna go through working with web-safe fonts and more detail, covering which fonts are considered web safe. And then we're also going to look at how you can use custom fonts. Now, we took a quick peek at the Open Sans Google Font, and we're gonna look at how you can take a font like that and use it in your designs. And then we're also going to look at how you can set up font stacks which will create a series of fallbacks that your design can use just in case the font family that you have specified is not working for one reason or another. So for all that, I'll see you in the next lesson.

Back to the top