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).
Our Art Deco version of the Library Book Sale page is almost done. But before we move on, we need to check the fallback fonts. We need to make sure the page looks good even if the fonts don't load. We're still working with the file from the last lesson. If you didn't save yours that is okay, I've provided a new starting point for this lesson. Just make sure you put your embed code in the document so your Typekit fonts will work on your system. Let's open the HTML document, mine is already open in TextWrangler.
And in the CSS portion of the document, let's add an X for our font family so that they'll break. Now looking at our font stacks here, the Nimbus Sans is using Georgia and Serif. Let's change that to Arial and Sans Serif. This will work better because Arial and Nimbus Sans have a very similar structure. I save that and let's look at the h1. Right now we're using Georgia, I'm not sure if that's going to work but let's test it, it could be a nice contrast to the Arial.
So we're going to upload this on our server, I'm going to go to the right file here and let's reload it. And it's not bad, but the headline is a little bit smaller here, so the Georgia just feels a little bit smaller and softer than I'd like it to, especially with the Arial and with the lines going across the top. So let's go ahead and change our font stack, back into the text editor and let's change it to Arial Black and then Arial, and then we'll do a Sans Serif here, go ahead and save that re-upload it to your server, and view it in our browser.
This looks much better. I think the Arial Black has much more presence than Georgia did on the page. So I think we can go with this. This is a really good solution. Now let's just go back and get our fonts. So if they're working again on our servers, we don't want to leave them up there broken. We'll go ahead and take out our Xs and save this file, upload it to our server one last time and reload it again. Excellent, that's what we're looking for. Now Arial Black is very different from Limelight.
While they're both Sans Serif, Limelight has extreme contrast between thick and thins and it's also quite geometric. Arial Black is neither of these things. But when picking a Fallback font, it's more about creating a feeling than exactly matching the font. And Arial Black will give us the impact we need in our h1. And now that we have our fonts stack set, our Art Deco version is 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.