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 Calluna site, let's take a look at how using Calluna, a Venetian font, affects the look and feel of the site. We'll start by comparing Calluna to Times New Roman. Now, you don't have a Times New Roman version of this site; it's one I made just for comparison purposes. And if you just sort of relax your eyes, don't look at the detail, but look at the overall texture of the page, Calluna on our left looks more open and round. Times New Roman on the right looks a little bit darker.
That's because the Times New Roman letters are a little narrower, so the words feel a little more squished together. You'll also see a difference in the numbers; Times New Roman uses lining figures. If you look at the article about the new restaurant, and you look at the phone number, you'll see that all the numbers look like they're uppercase. They sort of stand out from the text, versus over here in the Calluna, where the numbers are what we call old style; that is, the numbers have ascenders and descenders.
They fit in better with the text, and they feel a bit more elegant. Now, Times New Roman doesn't have a Semi Bold Italic, so the sentence about the Bay Road businesses is a little bit darker, a little heavier, and it begins to compete with the heading for that article. Over here in Calluna, that Semi Bold Italic stands out from the text, but it isn't as strong as the heading. Now, the main heading, Springfield, Rhode Island, is also a bit heavier in the Times New Roman, because Times New Roman doesn't have a light weight.
Over here in the Calluna, that main heading, it's lighter, it's delicate, and again, it's a bit more elegant. Now we're going to look at a small detail, and that's the comma in the main heading. The comma in the Times New Roman is a bit bubbly. It's very round before it goes down into the tail. You can see here in the Calluna, it has a more calligraphic feeling that works with the text itself. Now, a comma is not something you really need to pay attention to as much in text, but when you're using one in a main heading, it's good to take a look at how it works with the text.
I'll zoom back out and now let's compare Calluna to Georgia. Now, Georgia is not a Venetian font, but it feels more like the Calluna version than the Times New Roman did, because Georgia has the old style figures for the numbers, and it also has a slightly rounder and lighter look than Times New Roman did. But again, Georgia does not have the variety of weights Calluna has. So we lose the light calligraphic feeling up in the main heading, but other than that, it still feels pretty elegant.
We have a nice italic, and the serifs, which relate back to what we've seen here in the Calluna. Of the three versions, I prefer Calluna. I enjoy having the extra weights to work with, but I wouldn't use it. Calluna is a beautiful font, but as we saw in the video, choosing a Venetian font, it doesn't hold up cross-browser. This is not a problem with Calluna. None of the Venetian fonts hold up cross-browser. They all lose that crossbar on the E, making the text harder to read. So how fonts render cross-browser has to be an important part of our decision making as Web designers, no matter how much we like using a certain font.
So until there are some developments made in how browsers render Web fonts, if I had to choose, I would still choose Georgia.
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.