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 PT Serif site, let's take a look at how using PT Serif, a font with transitional characteristics, affects the look and feel of the site. Seeing the site done, I'm really glad I took a chance and used PT Serif to show you how a transitional font looks when used in text. If you just sort of relax your eyes, don't look at the detail, but look at the overall texture of the page, PT Serif has an up and down quality. I talked earlier in the chapter about how transitional fonts have a more vertical stress.
They have left behind the angled stress of the pen-formed bowls. Even the quote about the library, it's clearly Italic, but less calligraphic than it's been in the past. Let's compare PT Serif to Crimson Text; our old style font. Let's look at that italic, and you can see here that the PT Serif italic looks more up and down than the Crimson Text does. The Crimson Text italic, it just feels more calligraphic.
Even looking at the regular text, you can see that PT Serif has a larger x-height, and a larger closed counter on the a, compared to Crimson Text's smaller closed counter on the a. So PT Serif feels larger, and more open, and more vertical, and it feels less handmade. Let's take a look at PT Serif compared to Utopia. Utopia was a font we looked at earlier in the course, and we didn't use it. Primarily, I was considered about its humanist qualities, and also, it's not available on the trial plan in Typekit.
So we did not make this page together; I made it for comparison purposes. And you can see that Utopia also has the up and down quality. It has lost the angle of the stress of the pen-formed letters, and in fact, Utopia starts to feel almost square in text. The bowls are almost square if you compare, for instance, the word announce to the word over here, announce in the PT Serif. I'm glad I took the time to make both of these pages, and look at them side by side, because at this size, it seems like the idiosyncratic characteristics of the font just don't stand out as much.
I had been concerned about PT Serif, because when we looked at it large, we could really see the very wedge-shaped serifs, and with Utopia, we could really see how humanist the font looked, but when used in text, they both feel very transitional. Let's scroll over a little bit here. They both have lovely bowls that don't fill in, and Utopia also has the semi-bold and semi-bold italic you can see here in the Bay Road businesses sentence. It's nice to have that extra weight and style to work with.
They both have large x-heights, which help them stay very legible on the screen. I've provided the final HTML files for both of these pages as part of the files for the course, so you can go in and see how I set the Utopia standard page if you want to. It does have a slightly smaller x-height, so I did have to make some changes in size. I tested both fonts cross-browser, and they both hold up really well; neither font has spacing problems, and I would highly recommend using either of these fonts if you're looking to use a transitional font other than Georgia.
PT Serif is available in the trial plan, while Utopia requires the Personal plan or higher on Typekit.
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.