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 Open Sans site, let's take a look at how using a Humanist Sans Serif font can affect the look and feel of the site. Let's start with a spilt screen with Open Sans on the left and Verdana on the right. Open Sans and Verdana looked very similar when we looked at the Web Fonts specimen cheats earlier in the chapter, so it's not surprising that their pages would look somewhat similar. But if you just relax your eyes and look at the overall texture of the page, the Open Sans page looks a little lighter and open.
Open Sans has a slightly more open bowl. We can also see the Open Sans has a lighter main heading and the about town is also lighter, that's because we had the 300 weight that we could work with. We were also able to use a semi-bold italic for that sentence about the Bay Road businesses. Now the Open Sans has that slightly rounder bowl than Verdana, so it starts feeling a little bit more geometric than Verdana, but it still doesn't feel as geometric as say Museo Sans does.
Let's take a look at that. If we look here between Open Sans, we can see the bowl on the o, and Museo Sans we can see that the bowl here in Museo Sans is much rounder, and Open Sans has more open apertures. We can look there on the e, compared to this e, which is more closed. Museo Sans also feels darker on the page, that's not because it's geometric, that's just the design of this font, it has slightly thicker strokes. Overall, I think the Museo Sans feels crisper and a little more structured.
Now let's compare Open Sans to Nimbus Sans, our transitional Sans Serif font. If you relax your eyes and just look at the overall texture, you can see that Open Sans looks much lighter and it looks more open. It feels a little more delicate, you could maybe even say it looks a little more friendly. It doesn't feel bubbly really, but the Nimbus Sans over here feels a little bit more closed in on itself. It's also a little more crisp, a little more clean. Also because the Nimbus Sans is a little bit of a darker font with a little bit more letter spacing, we just get a really different texture on the page.
Finally, I want to compare Open Sans to a different Humanist Sans. This is open too. We did not make this page in the course. I made it on my own for comparison purposes. I pointed out earlier in the chapter that the forms of some of these letters, especially we can see it here in the p, n, g, here on the a, we can see that these letters they come to a point in one corner of the letters. And these corners they give the font a slightly futuristic look to it.
It's not quite geometric because the font has Humanist forms, but there is something very structured about it. We can see that it creates a different texture in the text. Ubuntu comes with a lot of weights and styles. The bold was actually too bold, so this is actually the 500 weight which is the semi-bold, and I use this for the article headings as well as for the sentence about the Bay Road businesses. There are so many great Humanist fonts, it was hard to choose one to use for this course.
All of the Sans Serif fonts we just looked at are really good choices. They all hold up well cross-browser and I would recommend any of them. When people first start looking at fonts it's easy to think they all look alike, especially Sans Serif fonts. But once we start to notice the slight changes in the letter forms and how the letters relate to each other, we can start to see how each font creates a different texture on the page.
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.