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 Venetian font looks like, we need to pick one to use. The first Venetian font to consider is Adobe Jenson Pro. It is available from Typekit in their Portfolio plan. This makes it a little out of reach for this course, so we probably won't use it, but let's look at it anyway. Adobe Jenson Pro has a very small x-height. Look at the body size compared to Georgia. This makes text set in Adobe Jenson Pro look very small. Here, I've set the text to 19 pixels to make it readable.
It's a beautiful font. It has the details that make it feel hand-lettered. The characters work together in a system, all the letters feel like they belong together, and the spacing is good; not too tight, not too loose. But I find it a little hard to read onscreen. The closed counters on the a and e are very small. My eyes get tired more easily when I read text on the screen set in Jenson. In addition, the thin rising crossbar on the e gets lost in Internet Explorer 7 and 8, making text even harder to read when set in Jenson.
I love this font, but it's not going to help visitors read my Web site, so we're going to keep looking. Next is Calluna. It's available from Typekit in their trial plan. Though it feels less old and pen-formed than Jenson, it has a larger x-height, and feels bigger and more open in text. It has a lovely italic and bold. The closed counter forms on a and e feel a little bigger, and make the text a little easier to read.
Unfortunately, when we test Calluna cross-browser, it has the same problems on Internet Explorer 7 and 8, as well as Safari, and Firefox on Windows. It's a great font, but the old forms are too complex for the screen, and don't render well if they're lightened. Let's look at one other possible Venetian font I found. I wouldn't use this font. For one thing, it's not as Venetian as I'd like it to be. It has the rising crossbar, but if I look at the o in the heading, there isn't any ribboning in the bowl at all, and the foot serifs on the end, they don't look as pen-formed as I'd like. Now this is fine.
The designer obviously wasn't going for the same kind of old-looking Venetian font that I want to use, but what concerns me more is the letter spacing. It's too tight. Read the first sentence; For decades, critics have predicted the end of the written word. Now look at the word predicted. The letters in the word are so close together they actually touch. When letters are this tight, it makes it more difficult to immediately identify letters and words. Visitors have to work a little harder to read the text on your site, and if we want to create the most pleasing experience possible, so readers will stay awhile, and maybe keep coming back, we don't want to use a font whose letter spacing is so tight.
So now we have a problem. We have two fonts that could work: Jenson, and Calluna. Calluna is a little easier, in my opinion, to read, but Jenson has that real handwritten quality. The problem is, neither one of them holds up cross-browser, so we really shouldn't use either one of them for text on the Web. But browsers in operating systems change constantly. New fonts come available all the time. A day will come when you'll be able to use a Venetian font with confidence that will work cross-browser.
So I'm going to show you how to use a Venetian font in a Web site anyway. I'll show you what to look for, and how to think about sizing and hierarchy, and we'll use Calluna, since it's available in the trial plan 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.