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 our site is using PT Serif from Typekit, it looks great. The type size is legible, and the hierarchy is working. This is probably because if we go back to our PT Serif Web font specimen sheet, we can see that PT Serif has a similar structure and x-height to Georgia. Now, PT Serif's x-height is a little bit bigger. See here the a is bigger than the a, but then the tops of the bs are the same height. So the x-height is a little bit bigger.
So let's go back and take a look at the size the PT Serif is in our site. But it doesn't look too big. It looks okay, it's not big and clunky, so I don't think we need to change the size. The only thing I'd like to do is work on the sentence about the Bay Road businesses down here. It's bold just like the article heading is. Now, it doesn't seem to be competing with the article heading; it's a really well-balanced bold, but because those two lines have a different purpose on the site, I'd like to give them a slightly different treatment.
Let's make the Bay Road businesses sentence a bold italic. So go into our HTML document from the last lesson, and we're going to scroll down to strong, because that's what I used to set that sentence. We're going to add a font-style: italic. Now, I happen to know that the PT Serif Bold is a 700, and while we're at it, let's go in and make all the weights correct. So our normal would be 400 here under the universal selector, and the h4 is 700, and the strong we've already changed to 700, so we're good.
If you've missed one of these, it's fine. Remember, the browsers read 400 as normal and 700 as bold, so they read them the same way. They'll still put in the right font weight. But I think it's a good idea, as you start using more complex fonts with more weights and styles, to get used to setting the weights using the numerical values. So let's go ahead and save that, and because we're using a Typekit font, we need to upload to it to our server, and then back in the browser, we can refresh, and we can see now that that sentence about the Bay Road businesses is a bold italic.
The PT Serif bold italic is really quite legible; it works really well. In fact, I like it better than any of the bold italics we've seen so far in this course, including Georgia's. That's why the original site doesn't use a bold italic for this sentence. So we've got the site all set up with a font with transitional characteristics. This was probably the easiest font to work with so far. That's because PT Serif has a similar structure and x-height to Georgia; the original font. You'll find that x-height plays a huge role in how big or small a font feels on the screen.
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.