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 now that we know what a transitional sans serif font looks like, we need to pick one to use. Let's start by looking at Arial. Arial is a default Web font. You can see that it has a similar x-height to Verdana, and it has a much smaller, narrower aperture. It has an italic that is oblique. That means that it doesn't have some of the humanist forms we've seen in the italics so far, but it's a good italic. It remains readable, and the same is true of the bold.
The bold has good contrast with the regular weight, but it doesn't fill in too much. A great thing about using Arial is that it works cross-browser. A drawback is that as a default font, it's ubiquitous, and many Web designers are tired of using it. Another drawback is that it only has two weights: regular and bold. Throughout this course, we've found it advantageous to use three or four weights. If you're interested in using a transitional sans serif, that is, a font that looks similar to Arial, but is not Arial, you might try using Pragmatica.
Pragmatica's italic and bold are fine, and it's been tested cross-browser, and holds up well. I would recommend using Pragmatica. It's a good quality font, and well-hinted, so it doesn't distort on different browsers. I find it has a slightly tight letter spacing for my personal preference, but it's within range, and it's still readable. Pragmatica is available in the Personal plan and higher on Typekit, so it's not the best choice for this course. So we'll keep looking.
Another font to consider is Nimbus Sans. Nimbus Sans is a little bit darker on the screen, and it has a smaller x-height, you can see here, compared to Verdana. You can see that I've set it at 16 pixels on 22 pixels. It needs to be set a bit larger than Pragmatica or Arial, because of its small x-height. The bold on Nimbus Sans is a bit heavier than many of the bolds that we've been looking at, and this is probably because the text weight for Nimbus Sans is a bit heavier to start with.
One of the things I enjoy about Nimbus Sans is its slightly looser letter spacing, and it's been tested cross-browser, and works very well. In addition, it's available in the trial plan on Typekit. Next is FacitWeb. It's a popular Web font that works cross-browser. It's a little different from the other three we've looked at. It has a good x-height, and a slightly narrower bowl that feels almost square. It also has an even more open aperture. You can see in the a, and the e, and especially on the c. The aperture is becoming a bit humanist, as you'll see later in the course.
But I'd still place it in the transitional sans category, because of the font's upright structure, particularly the bowls on the b, the p, and the q. One drawback about FacitWeb to me is the letter spacing. Where Pragmatica's is a little too tight for my taste, FacitWeb's is a little too loose. It's still within range, and it hasn't lost legibility; it's just a little too loose for my preference. On the other hand, one of the things I really like about FacitWeb is it has a more humanist italic.
You can see here the extension on the f in the word font. I find the bold a little too heavy for my personal taste again, but it's within range, and you can still read it. Another font I want to show you to recommend something to avoid in a sans serif font is when one letter stands out from the other letters in the system. Here, the lowercase t extends down below the baseline, and that looks lovely in a heading, but I find it doesn't work in the text. We can start reading the text, For decades, critics have predicted, and that t just keeps popping out at us, and it can stop the reader's eye.
You don't want a font that will make your readers slow down or stop. They might leave your page. This font is a little bit too light, and a little too tight than for what I'd recommend using for text. It looks quite lovely as a heading, but not in text. You'll see that it's set quite large, and partially that's because it's so light that when set smaller, it was even harder to read. Let's scroll down, and I'll show you it in 14 pixels here. In 14 pixels, it gets a little bit harder to read.
This font has another problem. Wherever there's an fl in the text -- for instance, this is the word flavor -- the fl is replaced with a capital L. I think there's a ligature that's supposed to be working here that isn't. Since the font is so tight, it gets very textural, and it's got a beautiful texture. I might recommend a font like this for headings, or a callout, or something where you're not using so much text, but it doesn't work for extended text. Based on looking at all of these fonts, we're going to go with Nimbus Sans.
It's available via the trial plan, so everyone can use it, and it's got good letter spacing, good contrast and weights, and it works cross-browser.
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.