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 cleared one of the fonts out of our Typekit, it's time to add Museo Slab, and apply it to our Web page. So let's find Museo Slab, and add it to our kit. Now, you can see that Museo Slab has more weights than we've used thus far in the course; 100, 300, 500, 700, 900, and 1000, and these numbers don't match up with what we've been used to using. We've been using 400 for regular, and 700 for bold, but Museo Slab doesn't have a 400. It has a 300, and a 500.
So how do we know what weights to use? Well, we don't, until we test them. We can narrow it down a bit, though. 100 is going to be very light. I wouldn't use it unless I was using very, very large text. And the same is true with the 1,000. It's going to be very heavy, and I wouldn't use it unless I was using very, very large text. So probably the 300 or 500 could work for our text weight, and we know that in our text, we also use an italic, so we should also select the 300 and 500 Italic.
We're going to be using a bold as well. We're not sure if the 700 will work, or the 900, because it depends on whether we use 300 or the 500 for the text. So let's go ahead and select both the 700 and the 900. Now, hopefully we'll also use sort of a semi-bold italic for that sentence about the Bay Road businesses. Now again, either the 500 or the 700 Italic would probably work.
So, I'd keep both of them selected. We have a lot of weights and styles here; we won't use them all, and so in the end we'll need to come back and clear some of these out to keep our kit size as small as possible. Right now our Kit Size is less then 400K, so we can still use it as is while we test these fonts. Let's go ahead and click Publish so the changes take effect, and then the next thing we need to do is start our HTML document. Let's toggle over and open up the original Georgia site, and open it into your text editor with a right-click.
I use TextWrangler, and let's save this. I'm going to save it as museo_slab_tk, because we are using a Typekit font, _site.html. And again, you can save it in the same folder; we won't be rewriting anything. And I like to see my files here, and then open it in the browser to see what we have so far. And so far it is using Georgia, because we haven't changed the font yet.
So the first thing we need to do, go back into Typekit, launch my kit editor, get the embed code, select and Copy that. I'm going to toggle over to my text editor, and paste it, and then back over into the kit. Let's get our font-family name here: museo-slab. Back in the TextWrangler, let's set our font-family for museo-slab, with a comma; that way we have a font stack started, and now let's take a look at getting the weights that we want into the text.
Let's start with 300; the lighter weight font for Museo Slab. We'll use that for most of our text, and then for the things that are bold, let's try doing a 700, because we're used to using the 700 for our bolds. And then the strong that I've been using for the Bay Road businesses, let's try making that a 500, and we'll think of that as being sort of semi-bold. Let's go ahead and save this, and because we're using a Typekit font, we do have to load it onto our server.
There's our museo_slab, over onto the server, and then back into Firefox, or whatever browser you are using; let's take a look at that online. Okay, looking at this, I would say that using the 300 weight is a little bit too light for the text. It just looks a little weak to me. I'm thinking maybe we need to go up to the 500 for the text. I'm not sure though, but we are going to try it and see what happens. One of the things that I do when I'm trying to make decisions between weights or fonts is I take screenshots, so that I can go back and refer to them later and compare them.
So I just used Shift+Command+4 on the Mac, and I'm going to drag this. So now I have a screenshot of this page that I can go back to, and let's go change those weights. I'm thinking that the 300 works really well for the h1 and the h4, but just not for the text, so let's just try changing that, and then currently the Bay Road businesses sentence is set at a 500, which means it will no longer pop out, so we're going to have to change that to a 700.
Let's go back into our universal selector, let's change that to 500, then let's change everything that's bold, which would be our h4 to a 900, and then let's change our strong to a 700. You can see how this looks. And again, we need to put it onto our server, and refresh it. The text looks better, and oh, I meant to keep that as a 300. I can go back and change that; that's not a problem. The text looks better, but the 900 on the bold is just too heavy.
And in fact, we're going to want to go back and change that to a 700. I don't even need to check my screenshot. I can see that e is really filling in there. Now, if you're looking at this on Internet Explorer, you're not seeing as many weights and style as I'm seeing on my screen, and that's because we are now using more than four weights and styles on this page. So what we need to do is we need to go in and use the variation-specific font-family names for this site. We're going to take a moment.
I'm going to ask you to add them to your syntax. We've already covered this. If you need a refresher on how to use them, we covered it in the chapter on Venetian Fonts. So when you've got your variation-specific font-family names done, meet me back here, and we'll keep exploring Museo sans. Okay, so we've added our variation-specific font-family names. So everything should be working on Internet Explorer, but there are still some changes we need to make to how the page looks. The h1 and h3 are a little too heavy, as is the h4.
So let's go back into our TextWrangler, or whatever text editor you are using, and on the h1, we want to make this 300 weight, because we're using the variation-specific font-family names. I just copied and pasted a line from my universal selector. I need to change that to an n3, because we're using 300, and add the font-weight 300 here, and I will want to do the same; I can just select and copy this for my h3s.
The h4 is currently set at 900, which is too heavy, so we're going to make that a normal style of 700. So change that to a 7, and 700. Save this, reload it onto the server, refresh it; that looks much better. Now, I'm a little bit concerned about the contrast between the headings here: the h4, and the text.
The text is a little heavier than we're used to using. Usually it's set a 400 weight, and this is a 500 weight. So what I'd like to do is bump our h4 up just a little bit, just a pixel perhaps, and see if that helps. It's currently at 16; let's make it 17, and save it, and reload it, and refresh it, and that is a little bit better. Now that we have our weights and styles set, and we know which ones we're using, we do need to go back into our Typekit, and remove the ones we're not using.
In Museo S,lab, we are not using the 300 Italic and we are not using the 900. This will help make our site run a little bit more smoothly, a little bit more quickly, when we get rid of these fonts. And that lowers our Kit Size; that's great. We'll Publish it, and you'll notice I kept the 700 Italic there, even though we haven't used it yet. It reminded me that we want to add that to our sentence about the Bay Road businesses. Let me go ahead and do that now. On the strong, it's currently just a Bold; let's make that an Italic Bold, so that that sentence will pop out a little bit more.
Save it, reload it to our server, and refresh it, and that's good. We have a little bit more contrast between that heading and that sentence. All right. So everything looks good, and our Typekit has been reduced, so that it'll load more smoothly, and it looks like we're done.
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.