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 Tenby Eight 700 and 300. The page looks pretty good but Georgia is not a good second font. Georgia has serifs, thick and thin strokes and a slightly vertical structure. Tenby Eight, on the other hand, is Sans Serif, monoline and has a square structure. Let's pick a different font to use for the text. Here we have a screenshot of Tenby Eight and here I've added Georgia to use as our starting point.
We already know it doesn't work. There's too much contrast and not enough concord. They're not in harmony with each other. Crimson Text is even worse, because it feels too Humanist and inky. It just doesn't work with the abstract square letter forms in Tenby Eight. Museo Slab doesn't work either. Even though the strokes are monoline like the strokes in Tenby Eight and the Slab Serifs aren't as traditional as either the Serifs and Crimson Text or Georgia, Museo Slab is just too textural.
There's just too much going on in the text and it competes with the heading. Museo Sans works better. It feels more clean and geometric than Museo Slab but it feels a bit Humanist and a bit bubbly. It's not terrible but I think we can do better. I expected Nimbus Sans to be a better pair with Tenby Eight. Even though the bowls in Tenby Eight are based on squares, the font doesn't have any diagonals and tends to have strong verticals. Nimbus Sans, as a Transitional Sans, also feels more vertical.
But in reality, I think Nimbus Sans is a bit too dark and inky. The A and E feel a little too closed. I think Museo Sans was actually a little better. Looking at Arial, our other Transitional Sans, it's lighter. It works better than Nimbus Sans but it feels a little tight. I thought I'd love Arial paired with Tenby Eight. I thought it would work but I'm not crazy about it. Open Sans is Humanist and I didn't expect it to pair well with Tenby Eight, but Open Sans has lighter strokes and the open aperture feels right.
This pair surprises me because Tenby Eight feels like it represents technology while Open Sans is Humanist, but perhaps that is the contrast where there are open, Sans Serif, monoline forms are the concord. I think this might be the font. I just want to look at Museo Sans one more time but after seeing Open Sans, Museo Sans feels too heavy and round, so we'll use Open Sans. And I'm reminded not to assume I know it's going to work before I look at all the possibilities.
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.