Join Laura Franz for an in-depth discussion in this video Understanding legibility, part of Typography for Web Designers.
- View Offline
The first thing to look for in a font is legibility. Text is meant to be read and if it feels hard to read, people won't want to read it. When we read, we don't read every letter. We read the shapes of words. These shapes are primarily created by two things: the strokes that make the letters and the spaces in and around the letters. So what makes a font legible? Open spaces and healthy strokes. If you've ever had to read a bad photocopy of text, you have experienced how hard it is to read an illegible font.
If we look closely at these hard to read texts, we can see we've lost the spaces in the letters here in the dark photocopy. They filled in and made the words hard to read. In the light photocopy, we have lost the strokes in the letters. We are only left with parts of letters, making it harder to recognize words. Screens have a lower resolution compared to printed text on paper. we need to be more sensitive to spaces and strokes for web-based topography. It's easier for them to get lost on the screen. So we need to start by finding a legible font, but what makes a font legible? Things to look for in a legible font are generous x-height.
That's the height of the lowercase x. See how it's higher in Verdana than in Times New Roman. Even though they are both set at the same size, the Verdana looks bigger and the spaces in the lowercase letters feel more generous because of the x-height. These spaces inside the letters are called counter forms. Legible fonts have open apertures. That's the opening in letters like C, A, and E. See how it's bigger in Verdana? An open aperture creates more visual space.
Slightly loose letter spacing also promotes legibility. The text in Verdana is clear to read. Generous bowls also promote legibility. The bowl is the shape of the rounded forms in the lowercase letters. If a bowl is too narrow, the counter form is too small, if it's too round, the counter form gets too big. Look for a bowl that falls nicely in the middle. Also related to bowls and counter forms or shoulders. Shoulders are where the curved line meets the stem in letters like H, D and M.
The stem is the straight vertical stroke in a letter. See how Verdana's shoulders make the counter forms feel a little bigger? This helps keep the counter form open even at smaller sizes and at low resolution. A legible font has prominent ascenders and descenders. Ascenders are strokes that extend above the main line. Descenders are strokes that extend below the baseline. Slightly longer ascenders and descenders or having serifs on the ascenders and descenders can help make the shapes of the words more recognizable.
Serifs are the little strokes coming off the ends of stems in some fonts. We call these serif fonts. The fonts without serifs we call sans-serif fonts. Does a legible font need serifs? One common misconception is that text should be set in a serif font because it's easier to read and sans- serifs should be used for headlines. This is not always true. Both serif and sans- serif fonts can be legible or lack legibility. Here Verdana is more legible for text than Times New Roman.
Strokes and spaces are far more important than serifs when it comes to how easy a font is to read. But let's look at Georgia, a more legible serif font than Times New Roman. We can compare their terminals. A legible font has discernible terminals. Terminals are the ends of strokes in letters like A, R, and F. Some terminals have a ball or pen-formed shape. Other terminals don't have any extra shape to them. While you don't want a font with a crazy shape like blood or thorns, having a bit of shape can help readers differentiate between the letters in text.
Finally, legible fonts have generous strokes. If strokes are too thin, they get lost. If they are too thick, you run the risk of losing space in the letters. Here the thick strokes stand out, while the thin strokes and serifs practically disappear. A font with very thin stroke is also harder to read. As web designers, we now have hundreds of fonts available to link to. Not all are legible. Look for a font with generous space and healthy strokes and you'll be on your way to choosing a good font for your site.
In the next lesson, we will look at how to choose a font to convey meaning.
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes