Join Laura Franz for an in-depth discussion in this video Recognizing the anatomy of letters, part of Choosing and Using Web Fonts.
- View Offline
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.
- 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