Week 10 Page 8: More About Readability

a1

More About Readability!

In the last two pages, we looked at how readability is affected by type size, font, style, capitals and line length. Now we're going to discuss the impact alignment, spacing and background has on readability.

Alignment:

Left alignment is best. But why is that?

Studies have shown that we read more easily when there is a solid edge to return to on the left side (because we read from left to right!). Centered and right alignments create a ragged edge on the left side. What about justified alignment (lines up on both sides)? Justified is risky because it can result in large white gaps between words if there are too few words on a line. (And, as you know, on the web it's difficult to control exact type sizes.).

left and center alignments

Alignment Example #1 (justified type):

Look at the "Contact Us Today" text box for an example of how ugly justified type can look. I have indicated the big gaps between the words (called rivers!) with yellow arrows:

justified type

Alignment Example #2 (centered type):

What do you think of the alignments on the following web page? Does center aligned type follow the design principle of alignment (Alignment rule reminder: elements should share a strong edge)? How easy is it to read centered paragraphs of type like this?

centered type example

Line Spacing (Leading) and Paragraph Spacing:

Line spacing can really improve readability. Readers use the space between lines to guide their eyes to the next line. Type with too little line spacing is hard to read. You can use CSS to specify the line and paragraph spacing that best suits the typeface you have chosen. (More about spacing on the next page!)

Beware of Backgrounds!!

Lastly, be careful of your backgrounds! Busy or poorly contrasting backgrounds can wreak havoc on readability. So... forget the busy texture, the big exciting photo, or the gloomy dark background if you're planning on putting a lot of type over it.

Is this background busy enough for you? See if you can catch other readability no nos at this site!!

 Go to next page >>