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 we have our main heading set as Lobster Two Italic and the page looks pretty good. But I think the texture created by Georgia, which is the Serif font is slightly competing with the main heading. The two fonts are okay together, they aren't bad, but I think we could find a simpler text font that would let the main heading stand out more. So here we have a screenshot of our main heading from back when I was testing script fonts. I can add part of a screenshot of Georgia from my files, just to see how the two worked together.
It doesn't have to be the exact text at this point. I'm sort of sketching here. I'm looking at the relationship between the fonts. I often use screenshots of existing text to do this. It saves a lot of time. So as you know I think Georgia is a bit too visually complex. I think part of the problem is that even though Lobster Two is a Script font, it doesn't have much of a slant. It has pretty thick almost vertical lines and those lines are repeated in Georgia bold. In fact there are some lovely similarities between Lobster Two Italic and Georgia.
And if I were using Lobster Two Italic in a different project, if I wanted to find a font to compliment it and have a more similar visual relationship, this could be a really nice match. But since I want this heading to stand out as much as possible, I want to go with a font with a bit more contrast. So I'm immediately thinking Sans Serif. This is Museo Sans. I started with Museo Sans because I figured I would show you the least successful pairing. I expected the heavy strokes and the very round bowls would create too much contrast.
But I have to say Museo Sans Humanist qualities are working here and this is really a very nice font pair. The heavy strokes on Museo Sans, instead of creating contrast, are in harmony with the thick strokes on Lobster Two Italic. The Humanist a and e in Museo Sans keep it feeling softer than a true Geometric font, but the circular bowl makes a nice contrast to the slightly narrow bowls in Lobster Two Italic. In fact, Museo Sans helps make Lobster Two Italic feel a little softer, more flowing and contrast to the Geometric shapes in Museo Sans.
Nimbus Sans on the other hand is fine but the slightly loose letter spacing gives it a bit more texture than I'd like to see here. The Open Sans is really nice. As much as I like the thick strokes in Museo Sans, the thinner strokes in this font really let the bold strokes in Lobster Two Italic pop out. I think there's more contrast between regular and bold here too, which could really work for us when setting our headline in the ad. Finally I like how Open Sans' bold and regular weights work together and they mimic the thick and thin strokes in Lobster Two Italic.
This might be the one for me. But we've got one last font to look at, PT Sans. It's funny because in the last chapter, when looking for a font to pair with Crimson, the PT Sans felt good in the text while the Open Sans felt too bubbly and round. But here the Open Sans felt good to me and the PT Sans feels a little too narrow. I think it's too similar to the Lobster Two Italic and it's creating a texture of vertical lines and shapes that mimics the vertical strokes in Lobster Two Italic.
It just goes to show you that picking the right font really depends on context. Well I think Museo Sans and PT Sans would be perfectly acceptable choices. In this case, the Open Sans is my preference, it's more open and round than Lobster and it has good contrast between regular and bold weights. I think it'll 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.