Join Laura Franz for an in-depth discussion in this video Understanding how we read, part of Typography for Web Designers.
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.
- 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
Skill Level Appropriate for all
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Using Fonts to Communicate the Meaning of a Word or Headline
2. Using Fonts for Text
3. Maximizing Readability
4. Visually Chunking Text
5. Shaping a Page Using Typography
6. Shaping a Traditional Typographic Page
7. Shaping a Modernist Typographic Page
8. Attending to the Typographic Details
Additional resources3m 9s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.