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 picked Open Sans as our Humanist Sans Serif font, let's use it in our site. Start by opening the original verdana_site. Let's open it in our Text Editor. I'll right-click, and let's save it as open_sans_tk -- let's use the Typekit font for this -- _site, and you can save it right in the original folder since we won't be overwriting anything.
And then now, let's open that in the Browser as well. Right-click and we can see it's still in Verdana, we haven't added our new font yet. So let's go to Typekit, and if you're not logged in you'll want to do that first. And then let's launch our Kit Editor. We need to remove one of the fonts, let's remove Museo Slab and then we'll find our new font, Open Sans and we can add that to our kit.
Now in the kit, let's grab the Light, we've been using that for our H1 and H3 headings, and we'll need the Regular and Italic for text, and the Semi-Bold Italic we've been using for that sentence about the Bay Road businesses and then Bold for H4 headings, and I don't think we need the Bold-Italic so we don't need to use that. Let's go ahead and publish the Kit so changes are official and we'll need our embed code. We can copy that and then back in the Text Editor, paste it as the first item in the head of your HTML.
Save that, and back in Typekit. You can see we're using five weights and styles, so we are going to need to include the variation-specific font family names so that these weights and styles will work with Internet Explorer. Let's see here. We'll start with the Regular, copy this, back in our document. We can add that right to the font family for our universal selector, make sure you put a Comma (,) in there. So now our text, anything that is not told otherwise, will come in as the 400 weight, normal style Open Sans.
Next we need to add the correct variance throughout the page. Take a moment to add the variation-specific font family names throughout the document. Remember to use the 300 weight for the H1 and H3, and the Italic 600 weight for the strong element. If you need a refresher on how to do this I covered it in the chapter on Venetian Fonts. When you're done, meet me back here. Okay, your variation-specific font family names should be in your CSS.
Let's scroll down so you can see the ones that I've put in, in case you need to take a look at them. Now let's make sure our document is saved and on our server. Save it, and there it is. And we can view it in the Browser. You'll have to get it from your server, mine is at goodwebfonts. We can name it open_sans_tk_site, and there we are. It looks great.
It looks perhaps maybe a little bit too small. It's readable, but I think it could be a pixel bigger and I think it might be because Open Sans, even though it has the same structure as Verdana, it's a little bit lighter. So let's go back into the CSS portion of our HTML and make a couple of quick changes here. We'll change the universal selector to 15 on 22. H1, we will change to 31 on 33.
The H2, we'll change to 17 on 17. The H3, we'll change to a 24 on 24. The H4 can go up to 16 on 16, and I always like the quote to be a little bit bigger, so let's go ahead and do that at 16 and we can keep it at 22. Let's change our acronym as well, AM and PMs. Go ahead and save this.
We'll need to re-upload it to the server, and then back in the Browser we can refresh, and that looks good. It looks maybe a little bit big now but at the smaller size it looked a little bit too small. That is one of the problems working with Web Type is, unfortunately, we can't work with one-half pixels. But either size is fine and it looks like the chunking looks good, the hierarchy looks good, the italic semi-bold is beautiful there so I think that we are all set.
As I said, neither size would be wrong whether we have everything one pixel smaller or kept it at this size, neither one is wrong or bad. It's just a matter of finding the best visual balance possible.
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.