Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 Nimbus Sans site, let's take a look at how using a transitional sans serif font can affect the look and feel of the site. We're looking at a split screen between Nimbus Sans on the left and Pragmatica on the right. We didn't make a Pragmatica page in this course. I made one on my own for comparison purposes. Just sort of relax your eyes and look at the overall texture. You can see that the Nimbus Sans page feels darker.
It's a darker, heavier font. The Pragmatica page feels lighter. They both have an oblique italic up here in the tag line. It's not a humanist italic, because both fonts are transitional sans serifs. The Pragmatica has a slightly lighter bold than in the Nimbus Sans. The bold in the Nimbus Sans on the left, on the e, it's starting to fill in, but Pragmatica's e is not starting to fill in. In some ways, though, I actually like Nimbus Sans' bold better than Pragmatica's bold.
And the reason is, if we look closely down here, the C's in Construction Continues feel a little bit darker than the rest of the bold. We can also see it up here in The New Kids in Town. It's most noticeable down in the italic, where the capital B and R in Bay Road are a little bit bigger and thicker than the rest of the letters. You'll also notice that the bold italic feels a little extended. All the letters feel a little bit wider than the other letters in the font.
In fact, I wouldn't use the bold italic in Pragmatica. I just kept it this way because I wanted to show you how it looks. It feels a little bit like it's outside of the system to me. Let's take a look at another sans serif font: Arial. Now, most people, when they're first starting to look at sans serif fonts, think that they look pretty much alike, but we can see this isn't true. Again, Arial has a slightly lighter texture than Nimbus Sans, and Arial also doesn't have as many weights to work with.
So we'll see that the heading up here, and Around Town, they're heavier than what we were using in Nimbus Sans, because Nimbus Sans has more weights to work with. Now, that doesn't mean that Arial isn't as good; it just means that it doesn't have the same number of weights to work with. Of the three transitional sans serifs we've been looking at, Arial, to me, has the best bold. The e doesn't fill in, and there's a consistent size and weight between the capitals and lowercase.
So these are the three transitional sans serif fonts. Let's take a moment to compare Nimbus Sans to a couple of serif fonts. I chose to compare Nimbus Sans to Museo Slab, because a slab serif font like this one has a monoline stroke. So it has more similarities to Nimbus Sans than other serif fonts would have. But even so, if you relax your eyes, and just look at the overall texture of the page, Museo Slab has more texture on the page, and that's because of the serifs.
The page texture is just more complex. Let's look at one last page here. We'll look at the Merriweather. Merriweather has some slab serif and some transitional serif qualities. It's not exactly a monoline font, and it does have more humanist qualities than Museo Slab did, which gives it a different texture when we're looking at it. And especially compared to Nimbus Sans, you can really see that Merriweather looks older and more traditional. Merriweather is also the only font we've looked at in this video that has the old style numbers, which really increases the humanist texture on the page.
So using a transitional sans serif font gives a cleaner crisper look to the page. It's easy to see why some people call them old fonts when we compare them side by side with the font like Merriweather, which feels very open and friendly. But neither look, neither font is right or wrong. It really depends on the overall feeling you want to create for the site you are designing.
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.