Join Laura Franz for an in-depth discussion in this video Looking at how using a Venetian font affects the look and feel of a web page, part of Choosing and Using Web Fonts.
- View Offline
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.
- Explaining the history of text fonts, from Old Style, Transitional, and Modern to Slab Serif and Sans Serif
- Understanding font classifications
- Setting up a Typekit account
- Choosing a quality font based on forms, spacing, and weights and styles
- Accessing fonts from various sources
- Implementing fonts with the @font-face syntax
- Looking at how fonts affect the look and feel of a web page
- Changing font styling to improve readability
- Making various font weights and styles work correctly across multiple browsers
- Pairing fonts (headline and text, two fonts in text, and so on)
- Setting fallback fonts