Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
When we read, we don't read every word individually like this. Reading is a complex activity. People use both their central vision and their peripheral vision to process more than one word at a time. People fixate on certain words and fill in the rest. People scan across lines of text and down lines of text at the same time.
If text is too hard to read, people will scan down to the next line or even the next paragraph. Thus, we need to make reading text is easy as possible. One way to make reading easier is to make sure words illegible, so the reader's eye doesn't have to slow down and their brain doesn't have to work harder to recognize a word. People read word shapes, not individual letters. We can keep word shapes intact by using lowercase letters. Lowercase letters have A centers and D centers, so word shapes are more distinctive.
Do not set large amounts of text in all caps, because word shapes get lost. Save all caps for a small amount of text like headlines, a pull quote, or for emphasis. Space in between letters also promotes legibility, because people use the strokes and spaces in letters in order to recognize word shapes. Use normal font weight in style for large amounts of text. Bold text and italic text tend to lose the spaces in between letter and are more difficult to read. This is Verdana.
But Georgia has a similar problem in the bold. Save bold and italic for small amounts of text, like headlines, a pull quote, or for emphasis. Another way to make reading large amounts of text easier is to promote horizontal motion in reading. Encouraging people eyes to move forward along a line; otherwise the instinct to scan down will win and draw their eye down to the next section of text. Promote an horizontal motion by setting text at a correct size.
Text that is too big or too small becomes difficult to read. Big text is hard to read, because not enough words fit in the peripheral vision we use when we read. Small text is hard to read because it's difficult to recognize word shapes. Again save overly big or small text for small amounts of text. Promote horizontal motion by sending a generous line height. Lines of tests that are too close together are harder to read, because the horizontal lines begin to melt into one another and become a fabric of texture, rather than individual lines of text.
Lines of text that are too far apart begin to float away from each other and are difficult to recognize as belonging together. Set the text in a comfortable line length. Lines of text that are too long are harder to read, because your eyes have to travel so far along the line before traveling back to the start of the next line. Lines of text that are too short begin to feel choppy and lose the rhythm of the text. Give the reader a common left edge to return to after reading each line.
Providing a ragged left edge makes reading harder, because people need to find a starting point of each new line. Thus justified and align left are recommended for large amounts of text. Of the two, justified text tends to cause more problems with awkward word spacing, so I recommend align left. Align center can be used for small amounts of text, such as headlines, captions, and pull quotes. Align right is appropriate for captions and pull quotes.
Neither is bad. They simply don't promote readability for large amounts of text, because they don't provide a common left edge for people's eyes to return to, or to scan down while reading. Reading is a complex process. We can make it easier on our readers by continuing to promote legibility, via use of case, weight and style. We can also make reading easier, by paying attention to size, line height, line length, and alignment.
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.