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).
We're going to start this course by zooming in and to looking closely at the anatomy of letters. I want to point out some of the terms you need to know. I'll use these terms throughout the course when we compare and contrast fonts. It's helpful to know the vocabulary for other reasons too. Type designers and font providers use these terms, and when you're reading about new fonts, it will help you to know what they're talking about. In this course I'll focus on the important anatomy; the parts that most obviously change from font to font.
Paying attention to these parts can help you narrow down your search when looking for a new font to use. Throughout the course, we'll be looking at a variety of fonts. I'll show them to you using a Web font sheet, which is a page I use for testing fonts. Let's zoom in on a Web font sheet comparing Georgia and Verdana, two popular Web fonts designed for the screen by Matthew Carter. The fonts were designed for maximum readability onscreen, and hold up well cross-browser.
Throughout the course, I'll compare other Web fonts we are considering to one of these two fonts, so you'll see these Web font sheets often. Verdana and Georgia are very different. To start with, one has serifs and the other one doesn't. Serifs are the little strokes that come off the ends of stems and other strokes in the letters. You can see there are head serifs at the tops of letters, and foot serifs at the bottom of letters. You can also see that some fonts don't have serifs.
We call these fonts sans serif, which means no Serif. Related to the serif is the terminal. Terminals are the shapes at the end of rounder strokes, like at the end of the f, a, and c. The x-height is the size of the lowercase x in the font. The x-height goes from the baseline to the meanline in the font. Most of the bowls also come up to the x-height. The bowls are the round forms within letters.
If you look closely, you can see that bowls actually extend slightly above the meanline, and slightly below the baseline. This is because rounder forms feel smaller in text. That's because of all the extra space around the curve. In order to look the same size as other letters, the bowls need to be slightly bigger. Related to the x-height and bowls are the ascenders; they ascend above the meanline, and the descenders, which descend below the baseline.
All letters have space inside of them. This space is called a counter form. When talking about counter forms, we often call them counters, for short. Counters can be closed like this one, or open like this one. The lowercase e has two counters separated by a crossbar. The crossbar doesn't look exciting, but it plays a pretty important role early on in font design. It also helps define how large or small the closed counter is. Also in the lowercase e is the aperture.
Much like counter forms, the aperture is about space; it is the opening in the letter. You'll also find the aperture in the lowercase a and the lowercase c. I've been talking a lot about the space and side letters, but it's also important to look at the space between letters. Letter spacing is not necessarily a part of a letter, but it's still important to look at. If letter spacing gets too loose or too tight, it affects the readability of a font on the screen.
Finally, you should know about stress. Stress is the angle of the thick strokes in the bowl. You can find the stress by drawing an imaginary line connecting the thinnest parts of the bowl. Stress varies from font to font. Some, like Verdana, don't have any stress if the stroke of the bowl is a consistent width. All of these parts of letters play a role in classifying, choosing, and using fonts. With time and practice, you can learn how to use anatomy to choose and use the best Web fonts available.
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.