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 Museo Sans is working on our site, let's make some changes to improve the hierarchy and chunking on the page. Looking at Museo Sans in our site, the text looks good overall. It's not too big, not too small, not too tight, and not too loose. But looking closely, we are having a bit of a problem over here in the events listing. The date, time and place feel a little bit loose to me. They don't feel as cohesive as I'd like them to.
They need to be chunked together a little bit more to help readers skim the information more easily. When I scroll down it's hard to see that these things all belong together. So I'd like to tighten this up a bit, and if I look at the text over here in the main column, there's a very generous line height. So I'm wondering if just tightening up the line height a little will help us with this problem. So let's go back into our Text Editor and in the Universal Selector let's try making our line-height 21.
We'll Save this, toggle back over to our browser and Refresh, and that works better. The Time, Date and Place feel a little bit more cohesive on this side but the line-height on the text in the articles is still generous enough to help guide our eyes horizontally along the rows of text. So I think that solved our problem. That's good. Now let's just take a look and see if there's anything else we'd like to change. Usually I like the quote to be a little bit bigger to just standout a little bit more.
So we'll go in and change that and let's see if there's anything else. The footer is looking a tiny bit big here so I think I'd like to make that a little bit smaller. All right, so let's go back into our Text Editor and on the quote, let's bring that up to 16 and 23. Now in the footer let's add a line, font-size, and let's make it 14 pixels so it's just slightly smaller than the text, save that, Refresh and the footer looks much better.
Now let's go up and check our quote. You know, usually I like the quote bigger but I think with the geometric sans and the oblique feeling here it's actually just feeling a little bit too big and clunky to me, so I'm going to bring that back down. Sometimes the technique I use with one font doesn't work with another font. So let's go ahead and bring that back down to 15 on 22, Save that, and back over into our browser, that's much better.
I think the oblique is enough to call attention to that quote without it having to standout by being slightly bigger. So everything else looks pretty good. The page has good hierarchy and the information is chunked really well. Now because we used to the @font-face syntax, we could only use three weights and styles that were available to us. Because we were using free fonts, we could have used more weights and styles if we were willing to purchase licenses for the other weights and styles, but we didn't. So because we didn't use all the other weights and styles that would have been available via Typekit, we can see here that the Save the Date is a little bit lighter that we're used to as is the main heading.
Well, that's okay, it's not bad. It's actually quite nice. But if you wanted to use more weights and styles of the Museo Sans, you could always redo this page using the font from Typekit because all the weights and styles are available in their Trial Plan. Now, I'm glad that we did it using @font-face though, because what's nice about getting this page to work using @font-face is that we are no longer dependent on Typekit or Google Web Fonts to add Web fonts to our site. We can now use any font licensed for font linking via font-face.
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.