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).
We have our main heading set as Holtwood One Small Caps and we've picked Museo Slab as our text font. Right now, the text is still set in Georgia, so we need to fix that. Let's look at it in the text editor. I've already added the Typekit code for the Museo Slab from my Typekit. You need to add Museo Slab 500 and 700 to your kit, publish it, and add your embed code to this document so it will work on your system.
I don't usually use fonts from both Google Web Fonts and Typekit, but when I do, I paste the Typekit code after the Google Web Font code. So now that your Typekit has been set up and the correct embed code is in the document, we need to apply the font family as usual. We need to add Museo Slab as our font family in our universal selector. Let's go ahead and do that now, museo-slab.
We also need to change the font-weight to 500; Museo Slab uses a 500 and 700 for regular and bold. And then down here in the h2, let's change our bold to 700. We can save that. Now in order for us to see this font in action, we need to upload it to our servers, so let's go ahead and do that. And then back in the browser, take a look at it from your server. Mine is at goodwebfonts.com/lynda and I can pick mine up here and that looks good.
It's now using the Museo Slab. Unfortunately, the Museo Slab is looking a little bit too big down here in the bottom line and I wish there was a little bit more contrast between the h2 and the text. So I think what I'm going to do is bring the text size down a little but keep the h2 as is. So back in the TextWrangler or whatever text editor you're using, I'll go ahead and change my font-size to 17 and 27, I'll save that, and I need to re-upload it, and then back to the browser, refresh it, I'm using Command+R on the Mac.
It's looking a little bit better, but I think that the text can get even a little bit smaller. So I'll go back and into the TextWrangler, change that to 16 and 26. Again, I'll keep the h2 as is, I like that little extra contrast. Upload, back to my browser and I will refresh again. And that looks pretty good. The Georgia font would have been fine, but I think the Museo Slab makes the ad feel more finished.
It was worth the extra effort to find and apply a second font. Now before we finish up this lesson, I wanted to show you one last thing. I've been thinking about the more complex headline fonts that I decided not to use for this project. I said they need to be set big in order to show off their detail, but we wouldn't have enough room to do them justice. Well, I decided to go ahead and try one of them. We didn't make this page in the course. I did it on my own, and I provide the file with the final files in the exercise folder, so you can take a look at it.
I set a page in Ewert which has a lot more detail than Holtwood One Small Caps. I set the font big like it deserves and it's quite beautiful. It works better centered at the size as you can see, and as I scroll down, you can see that Museo Slab still works well as a second font. Now the ad gets long, so my client might not like it. But when a font calls out to me, I'll often try a second version just to see if I can get it to work. Sometimes it works, sometimes it doesn't, and you never know, the client might love the unique experience created by such a long page.
It definitely draws out the quote and it creates suspense. Of course, when I do something like this, I need to be prepared for our client to try and merge the ideas. And I need to have the vocabulary and confidence to explain why Ewert can't be used smaller like we were able to do with the Holtwood One. I need to be able to explain to them and point out that Ewert was designed to be used big and that we'd lose all the detail we love if it's set small. I just wanted to show you that like most projects, there are multiple successful solutions to our Wood Type page and that changing a font can completely change the outcome of the project.
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.