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).
So now that we've picked our font, Lobster Two Italic, let's make it work. I've provided an exercise file which we're looking at here called lobster2_script_book_sale.html. I've already added the Google Web Font code to the head of the HTML document and I've setup the font-family as usual. Note that I've added a font style of italic to our h1 which is our main heading on this document.
Now let's take a look at it in the browser. I already have mine open, I'll toggle to it and we can see that there are a couple of problems. First is that everything in the page is set in Lobster Two because we used it in the universal selector. So it makes it sort of hard to figure out what we might need to change to make this headline look as good as possible. So let's go in and change that. Back in the text editor, I would take this font family and copy it, go down into the h1 and paste it.
So now our h1 is definitely set as Lobster Two and then back up in the universal selector, let's just delete Lobster Two from our font family stack. You can save that and back in the browser we can refresh it and that's better. Now we can see how the display font, how the headline interacts with the text font. And I think it looks a little bit too small. Now this page is based on a default page that was created in Georgia. And in Georgia, the font looks fine.
But with the Lobster Two it just looks a little bit too small. So let's try bumping that up a bit. Back in the Text editor, let's try making this 95 on a 105. You can save that and refresh it and that looks pretty good, but now I think it actually looks a little bit too big and I'll tell you why. When I set this in the HTML I actually use some line breaks to control where the lines would break. I wanted to keep one book together and one potato chip together.
So I don't usually use line breaks. I very rarely use them, but I will once in a while in a headline. But when you use a line break, you have to be more responsible. We have to be sure that if this page is seen on a browser that makes the font a little bit bigger or a little bit looser, we don't want one of the words to bop down to the next line. It would create a very uneven ragged edge in this headline. So we need to go in and make it a little bit smaller. Why don't we try that at 90 on 100, go ahead and save this, back into the browser and refresh, and that looks a lot better, it gives us some wiggle room.
Now you've probably noticed we're keeping the line-height really tight. It's only an extra 10 pixels, I would never do that in text. But it works here because we're working with only a few words and it also helps that this font, Lobster Two Italic, has a really short ascenders and descenders and then it also helps that none of the ascenders and descenders are directly above and below each other. So they don't have the opportunity to run into each other. This looks pretty good and we could keep it just the way it is, but I think we should look for a better font for the text part of the ad.
Georgia is a good font but the Serifs have a lot of texture and the bold is sort of bubbly. We might be able to find another less visually complex font that could let the heading pop out even more.
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.