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. The page looks pretty good. Georgia is a fine second font with Holtwood. There's a nice contrast in terms of bowl, weight, and serif shape. Georgia's more delicate serifs creates a texture that contrasts nicely with Holtwood One. And if we wanted to, we could keep the page as is. But it's always good to consider our other options. Here we have a screen shot of Holtwood One and here I've added Georgia.
I think Georgia, as a transitional Serif font, is a great choice for a Serif. It's more structured than, for instance, Crimson Text which feels Humanist and sort of inky. Crimson Text just has a little a bit too much contrast with Wood Type font. Museo Slab is an unexpected surprise for me. I thought it would be too similar to Holtwood One, but it's not. Museo Slab is more Humanist and the texture is good. The softer forms are working for us here.
Merriweather on the other hand which does have serifs that feel almost Slab-like is just a little too light, a little too Humanist, and too vertical. There's just too much contrast here and I think it draws away from the power of the heading. If I were to use a Serif, I'd go with either Georgia or Museo Slab at this point. Checking out the Sans Serif fonts, Museo Sans is a good option. Without the serifs, it feels more clean and geometric and makes the heading feel even stronger.
It also emphasizes the square serifs in the heading, the square layout we created. Nimbus Sans is okay, maybe a little too vertical, a little too loosely spaced. It's not bad or wrong and someone could choose this font, but it's not my favorite. And I think Open Sans is a little too Humanist and PT Sans is a little too Humanist and a little too narrow. I think I like the Museo Slab the best. This surprises me because I expected to want more contrast, but the two feel right together.
I'm tempted to use Museo Sans and that wouldn't be a bad decision, but it starts feeling maybe a little too clean, too geometric with Museo Sans. Museo Slab sort of supports and continues the Wood Type feeling that's been created in the heading. At the same time, it softens a little bit in the text. I think it will serve us well.
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.