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 font looks like, we need to pick one to use. First, let's look at Utopia Standard. It's a transitional font. Look at the lowercase o in Utopia; the stress is almost vertical. That's true in the P as well. You can see the shoulders going into the stem are not a heavy pen stroke; they're thinner, and the weight of the bowl stays on the outside edge. The head serifs are no longer wedge-like, and we can also see that the foot serif on the lowercase d is horizontal.
It no longer looks like an angled pen-formed shape. Also, if we look at the aperture of the lowercase e, it's tighter than we'd see in a humanist font. The bowl is starting to come up and around higher, completing more of the circle, while the closed counter gets a little bit bigger. Yet, when Robert Slimbach designed this font for Adobe in 1989, he combined the transitional elements with some more humanist characteristics. The terminal on the A is not a teardrop, but feels more organic and pen-formed.
There's more contrast between thicks and thins, but the thin strokes are not as thin as we'd expect. This is actually probably a good thing, because there is a better chance Utopia will remain legible on screen. So just like in the last chapter, we had Caslon, which is an old style font leading toward a transitional font, here we have a transitional font with some humanist characteristics. It bears repeating that font design is an art, not a science, so many fonts will straddle different classifications.
I've tested Utopia across browsers, and it holds up beautifully. Unfortunately, it's only available in Typekit's Personal plan and higher, so it's not available to those who haven't paid for a plan. In addition, I'm interested in trying to find a more traditional transitional font; one without the humanist qualities, so I'm going to keep looking. This is another transitional font I found. It has a lot of the characteristics of a transitional font; the thinner thins, the more horizontal, crisper serifs, and, well, the serifs are just no longer wedges, but I'm not crazy about this font for a couple of reasons, so I don't think how I want us to use it.
First, it's a little too spaced out. When I look at it, it looks like letter spacing has been added. The letters are starting to float away from each other. Second, some of the letters feel awkward to me in the context of the text. For example, the G is a little bit small and dark compared to the other letters. Reading the words Throughout history in the second paragraph, the g sort of pops out of the word Throughout. I also think the terminal on a lowercase a comes in and closes up a bit too much; we can see it there.
When reading the text, the A stops my eyes slightly. It feels a little too complex in relation to the other letters in the font. We can also see the stem on the lowercase f feels too short here between the words of and the. And the terminal is a little too close to the meanline, and in fact, the f starts to read more like a t. Finally, the spacing is uneven. Again, if we read the words Throughout history, we can see that hist is too far from the ory.
I know we saw a similar problem in Crimson Text in the last chapter, but in Crimson Text, at least in the Roman style of Crimson Text, not the italic, it was a rare occurrence between a couple of letter pairs. Here, it's happening too frequently. Uneven spacing can undermine the aesthetic texture of your text. It can also make the text slightly more difficult for your visitors to read. So I don't think we're going to use this font. Let's look at another one. This transitional font has high contrast between thick and thin, and a straight up and down stress, but it's just too heavy overall.
It's marketed as a normal weight, but it feels more like a bold version to me. Also, I said early on that one of the problems I run into when testing Web fonts is when letters are just too unique, and that's happening with this font. The designer chose to combine wedge-shaped head serifs on this font, which is fine. We've already seen how a font can straddle two categories in their classification system. But when they put the wedge-shaped serifs on some of the letters, they lowered the stems on the R, M, N, and I, and this affects the visual size of the letters.
So look closely at the first three words in the text: For decades, critics. The R and the two Is in critics feel shorter than the other letters in the word, and the text starts to have a visually uneven meanline. Finally, the font has an italic but it feels like a fake italic. It doesn't have the italic forms I associate with the serif font. Instead, it looks like it was just sort of slanted over to the side. We need a font with a more traditional italic. Again, I don't want to use this font for our site.
It's not appropriate for a lot of text, so let's keep looking. The last font I want to show you is PT Serif. Now, PT Serif is sort of funky. In fact, I had to think long and hard before deciding whether to even include this as a transitional font. PT Serif probably officially belongs in a classification I've created, and we'll talk about later in the course, called other serif fonts. It doesn't quite fit with anything we've looked at so far, and I can tell you, it's not going to fit with modern or slab serif either.
But I decided to include it as a transitional font because I was having such a hard time finding a font we could all use that really has the sort of forms I'm looking for in terms of the relationship between thick and thin in the vertical stress. Now, PT Serif does have the higher contrast between thick and thin strokes, and it also has a more vertical stress. In fact, I've used it before, and when seen in text, it feels very much like a transitional font. It's the terminals in the serifs that sort of throw it off.
The terminals are not teardrop shapes, and the serifs aren't thin and more refined, so it's definitely not a traditional transitional font, but we're going to use it anyway. It's available in Typekit's trial plan, so everyone can use it, and it will give you a sense of what a transitional font looks like in text.
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.