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 Limelight. The page looks pretty good. Georgia is a fine second font, there is a nice contrast in terms of bowl and weight and Limelight is Sans Serif and Georgia is Serif. Georgia's more vertical structure keeps it from feeling like it has too much contrast with Limelight. If we wanted to we could keep this page as is. But as usual, it's always good to consider our other options. Here we have a screen shot of Limelight and here I've added Georgia to use as our starting point.
It's more structured, so it's not too bad of a second font. Crimson Text, on the other hand, feels too Humanist and inky. It just doesn't work with the crisp lines and the vertical forms in Limelight. Museo Slab is not bad, though I think the Slab serifs are a bit too much. They create a stronger horizontal shape than Georgia's do and feel out of place with the vertical shapes in Limelight. Though I have to say, the round bowls work very well, which makes me think that Museo Sans could be a good option.
It has the round bowls but without the serifs, it feels more clean and geometric. It might be a better match for Limelight. But I think Nimbus Sans is even better. Even though the bowls in Limelight are based on circles, they also have these strong vertical strokes. Nimbus Sans as a Transitional Sans also has a more vertical feeling, and it has good harmony. In addition, I usually think Nimbus Sans is a little too loosely spaced. But here because the pattern of black and white created in Limelight, the extra spacing in Nimbus Sans looks like it could be a good fit.
Though I am concerned that Nimbus Sans might be a bit too dark and inky. Looking at Arial which is our other Transitional Sans and lighter, I think it's a toss-up. Arial does recede and helps the heading pop out more, but Arial doesn't have the generous letter spacing and I enjoyed Nimbus Sans' texture. We could absolutely go either way with this. There are positives and minuses to both. The only other font I wanted to look at is PT Sans.
It's Humanist but also narrow and I thought it could work, but I think it's just too Humanist to pair with the graphic Limelight. So I think we'll use Nimbus Sans. It has contrast because it's a monoline font, but it harmonizes with Limelight because it has a slightly vertical structure and an open texture created by its generous letter spacing. 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.