Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Learn how to choose fonts for a web site and create beautiful, legible type. Author Laura Franz shares how to create designs that maximize readability (and keep visitors on the page) by paying attention to details in size, line-height, line length, alignment, color, vertical space, and more. Laura also demonstrates how to incorporate web fonts, style type with CSS, and pick fonts that work well together.
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 A centers and D centers. A centers are strokes that extend above the main line. D centers are strokes that extend below the baseline. Slightly longer A centers and D centers or having serifs on the A centers and D centers 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.
Find answers to the most frequently asked questions about Typography for Web Designers.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.