Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course focuses on the theories behind web fonts: what makes a good font, why different fonts look the way they do, and how fonts affect the look of a web page. Author Laura Franz covers common tasks, including downloading a font from an online source such as Typekit or Font Squirrel, implementing the font in HTML and CSS, and changing the size and line-height to improve the readability of text. The course also covers different periods of type design and explores the history behind handwritten fonts, text fonts (used for large amounts of text), and display fonts (used for headlines).
Now that we've fixed the size and spacing on the text, this page looks pretty good. We could leave it as it is and call it done, but I'd like to take advantage of the various weights and styles available for Calluna. So let's go back to Typekit. We're going to launch the Kit Editor, and I'd like to add the Light and Semi Bold Italic to our kit. We'll make sure that we Publish it so that the changes take effect. Now, notice that we have five Weights & Styles selected.
This is going to cause problems with Internet Explorer, which only recognizes up to four Weights & Styles per font, but Typekit has a workaround for this problem. Scroll down and click on the Using weights & styles in CSS, and we're going to want to click on the variation-specific font-family names here at the bottom. And you can see that each weight and style now has a specific font-family name associated with it. So let's look at calluna Regular, calluna-n4, which stands for normal style, not italic, and 4 is for 400.
I'm going to select that, and copy it, and we're going to need to put these variation-specific font-family names into our CSS. Back into our editor, the universal selector, we can add calluna-n4, and then keep the regular calluna, georgia, serif, with a font-weight of 400. Now, we're going to have to use this anytime we make a change, including using italics, bolds, or the light version.
So let's go ahead and select this whole line, I'm going to copy it, and in the h1, I would like to use the light version; make it a little bit lighter. So I add the font-family, and now I'll call it n3, normal style, 300 weight, and then I also have to add a line called font-weight: 300, so that the h1 will come in at the 300 weight. We also need to add a variation-specific font-family name any time we use the italic.
And we'll change calluna-n4 to i4 for italic in the tagline, and in the em, and in the quote. Now let's go back and make sure we do the same for our bolds. Our h4 uses a 700 weight, so I'll change that to n7. And the same is true with our strong; uses an n7, 700 weight.
So that should be good, and let's save this, and re-upload it to the server, and let's reload that. Nice! So we can see that the main heading is now a little bit lighter, which is good. Even when you're using a regular weight font, when it gets this big, it can sometimes feel a little bit bold. We can particularly see that over here where it says Save the Date, how Save the Date feels like it's a little bold, even though it's not, and that's because it's so large.
In fact, I'm thinking we should go in and make the Save the Date and Around Town headings also in the 300 weight. And the other thing I'd like to do is we haven't used the Semi Bold Italic yet, and I'd like to use that here in this sentence for the Bay Road businesses. We could just use a regular bold italic, but I think it would be a little too heavy, and since we have the Semi Bold, we might as well use it. So let's go back into our TextWrangler, and for our h3, that is our Save the Date heading, let's make that and an n3, so it's a 300 weight.
And then we have to add the font-weight: 300, and then down in the strong, where we're currently using a bold weight to set the sentence about the Bay Road businesses, let's turn that into an Italic Semi Bold. We'll change the font-weight to 600 and the font-style to italic. I'm going to save this, and then I'm just going to double-check that 600 is the correct weight for that semi bold, because different fonts use different numbers for semi bold.
Semi Bold Italic is 600, so it's perfect. Go back into TextWrangler, double check that I've used an italic 600 for Semi Bold Italic, and I have. I can save this. I'm going to drag my Calluna page back over to my server, and let's reload that, and there we go. So the Save the Date is now a little bit less bold. It looks more like the regular size; that's nice.
We can see here the sentence about the Bay Road businesses being opened during construction is slightly bolder than the text, and its italic. So everything looks good, and since we used the variation-specific font-families, the light headings and the Semi Bold Italic sentence will show up on Internet Explorer.
There are currently no FAQs about Choosing and Using Web Fonts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.