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 script version of the library book sale page looks great, but before we move on I want to check the fallback fonts. I always set fallback fonts so I have some control over what fonts load if my Web fonts don't. But in this case I want to take a couple extra steps to make sure they work the way I want them to. I'm trying to control the heading. I want to create a specific rhythm. I want the first line to end with one book and the last line to contain all three words, one potato chip.
I forced this using br tags. This isn't great syntax and I don't usually try to force line breaks, but this heading is the main element in the page. We aren't using any images so I want it to be perfect. But when we try to control line breaks we have to be aware of what can go wrong. You'll remember we set the heading a couple of pixel smaller than its maximum size. So if a browser slightly expands the letter spacing the words will still fit on each line. Now we need to make sure the fallback fonts will fit too.
So let's take a look at this in our text editors. If you didn't keep the file from the last lesson that's okay. I've provided this file in the Exercise Folder. So I like to check my fallback fonts by purposely putting the wrong font-families in my syntax. I do that by adding a capital X here after Open Sans and then here after Lobster Two. You can save this and take a look at it in the browser. We'll refresh and it does not work and that's because the fallback font right now for our h1 is Georgia and Georgia has much wider bowls than Lobster Two Italic, so the word book did not fit on that line and it bobbed down to the next line and it's just not delightful.
So we're going to go back and then change that. Back into your text editor let's try making our fallback font Times New Roman. Times New Roman has a narrower bowl so this should work for us. Refresh it and that's better. It at least fits, although it's just barely fitting and if this were pulled in to a browser that in any way slightly opened up the letter spacing or made the letters a little bit bigger, it's not going to fit. So I think we're going to need to bring our type size down just a little bit.
So let's go ahead and bring this down to 88 on 98. Save that and refresh it and that gives us just a little bit of wiggle room. I'm feeling pretty confident that this will fit on most browsers. So we're good. Let's take a look at how this would look if we took our Xs out and saw it in the correct font again. That looks good. Now we know even if the fonts don't work the fallback fonts will still look great and keep the rhythm of the heading intact.
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.