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 we've finished the Museo Sans site, let's take a look at how using a Geometric Sans Serif font can affect the look and feel of the site. First, we're looking at a split screen here. On the left is the page we created in Museo Sans. We used a couple of free fonts available for use with the @font-face Syntax. There wasn't a Museo Sans Bold available, so we used a bold, slightly Serif version of Museo. There were only three weights and styles available overall.
On the right, we have another version using Museo Sans. We did not create this page together. I created this one on my own using five of the weights and styles available in Typekit. I wanted to create it for comparison purposes. I was able to use all Sans Serifs fonts. I was also able to incorporate a light font and a bold-italic font. In the version on the left, we weren't able to create subtleties in weight on the page because we had less weights to work with.
Looking at the one on the right, you can immediately see that the heading Around Town is quite a bit lighter. That's because it's set using a 300 weight. The same is true of the main heading, it's much lighter, and at this size it still feels like a regular weight than a bold. Now if you just relax your eyes and look at the overall texture of the pages, the one on the left feels more complex. It feels less crisp. The headlines in the articles use a Serif font and this is adding more texture to the page.
With the version on the right, without Serifs, it feels crisper and cleaner, and I think the light heading helps make it feel even crisper and cleaner. Both pages are very good. Museo Sans is a lovely font no matter how many weights and styles you work with. Now, let's compare the Museo Sans to the Nimbus Sans version. Even though the text on both pages are Sans Serif, Museo Sans has a slightly humanist quality combined with very geometric bowls are very round, so it creates a more complex texture than the Nimbus Sans.
The Museo Sans has a more humanist texture and it's just not as crisp and clean, it feels perhaps a bit older and softer. Now either font works fine. Choosing which font to use in the final version would depend on the overall feeling we were trying to communicate about the city.
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.