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 Nimbus Sans as our transitional sans serif font, let's use it in our site. This time we'll open up the Arial default site in your text editor, and let's save it as nimbus_sans_tk_site. And again, you can keep it in the original folder since we will not be rewriting anything, and let's view it in the browser, and it's in Arial, and we need to get Nimbus Sans from Typekit.
So go to Typekit, make sure you're logged in, and launch your Kit Editor. We'll need to delete one of our fonts; I'll delete PT Serif, and then we can add Nimbus Sans to our kit. We'll need the Regular, Italic, Bold, and Bold Italic, and we've been using Light for our main heading, so let's grab that as well. Our Kit Size is still fine. We can publish our changes.
And while we're here, let's grab our embed code, and copy that, and paste it in the head of your HTML document, and then save that, and I want to go back to Typekit for a moment. We're using five weights and styles, which means we're going to have to use, under Weights and Styles here, the variation-specific font-family names. We can copy this from the Regular, and go back into our HTML file, we'll go to the CSS portion, and add that with a comma for universal selector.
So now we have the normal style, 400 weight, Nimbus Sans and our universal selector. Change that to 400. Now take a moment to add the variation-specific font-family names throughout the document. If you need a refresher, I covered this in the chapter on Venetian fonts. When you're done, meet me back here. Okay, so your variation-specific font-family names should be in your document, and I'd like to scroll down and just do one thing here. I'd like to show you the strong.
The strong is what we've been using to make the sentence about the Bay Road businesses either bold, or bold and italic. I'd like you to make sure that you've set it using the nimbus-sans-i7, and a font-weight 700, and a font-style italic, so that it will be bold italic. Once you've done that, make sure it's saved, and let's put it on your server. Then we can go to the browser. I can use a tab here, and let's view it on our browsers off of our servers.
And we can see now that it's set in Nimbus Sans. We have the light for the h1 and the h3, we're using the bold for the h4s, and the regular for the text. Everything looks a little bit too small. That's not surprising, because Nimbus Sans has a small x-height compared to Arial, which was the original default font for this site. Because it does have a quite loose letter spacing, the only thing that feels like it really fits is the footer.
So if we increase the size on the font and on the type, we're going to have to make sure that the footer doesn't get any bigger. So let's go back into our text editor, and we're going to make a couple of changes here. Let's change the universal selector to 16. We're going to keep the line-height the same, because it looked quite generous; I don't think we need to make it any bigger. And let's make our h1, let's make that 33 on 35, and welcome, we'll make that 15.
The h2, let's make that 18 on 18. The h3, let's make that 25 on 25. The h4, let's make that a 17 on 17. As for the quote, let's go ahead and make that a 17, because we just made the text a 16; we like to keep this a little bit bigger than the text, and let's go ahead and keep it on 22.
Actually, let's go ahead and make it on 23, because we don't want it to be too tight. Let's set the acronym to 14 down here. And we want to make sure that the footer doesn't get any bigger, so let's make sure we put in a specific font size for our footer. We'll keep that at the 15 pixels. Now let's go ahead and save this, and we'll have to reupload it to our servers, and then let's take a look, and refresh, and that looks good. It looks pretty good, and I want to check, and good; our footer is still working.
Now there are two things that I'm not crazy about on this page. One is I'm not crazy about the bold italic that I had you set for the Bay Road businesses. I think that between the bold and that oblique, which is like a false italic on the word businesses, the e's are starting to fill in a little bit. So I'd like to just make that a plain bold. We're going to get rid of the italic on that. And then the other thing is I'm noticing that the Date, Time, and Place feel like they're sort of floating away from each other here.
They don't fill like a cohesive unit. I think that they need to be a little bit tighter. And I'm noticing that our overall line height is quite generous, so maybe what we need to do is just tighten that up, and we might be able to fix that problem. So let's go back into our text editor, and on the strong, let's go ahead and get rid of the italic. We can turn this back into an n7. And then in the universal selector, let's go ahead and make our line-height 21, and see if that'll fix that other problem we're having.
Let's reload it onto the server, and refresh, and that looks better. Bay Road businesses looks better, and so does the chunking here on this information. It feels more cohesive, like it belongs together. That's good. Let's see. Everything is looking good, and the hierarchy is working, the visual chunking of information is working; this page looks good.
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.