Legibility refers to the ability to identify letters. A letter may be illegible because it is too small; too faint or difficult to recognize:

Italic text tends to be less legible than regular text (which means it should be used in moderation). ALL CAPS is generally less legible than mixed case because the letterforms are all the same height and therefore less distinctive. That said, text in all caps has a clean look that makes is desirable in some cases.

Readability is different than legibility. Legibility is about letter identification. Readability is about processing lines of text. One cause of poor readability is poor legibility. Readability is also influenced by alignment, line length, line spacing and letter spacing (examples below with more explanation later):

Screen Shot 2015-02-20 at 3.39.27 PM.png

Screen Shot 2015-02-20 at 3.46.03 PM.png

Screen Shot 2015-02-20 at 3.50.35 PM.png

------------------------------INSTRUCTIONS-------------------------------

For each font in your infographic, analyze the legibility & readability traits listed below. If your infographic is well designed, you will find that text is both legible and readable, though there may be instances when one or the other is slightly compromised in order to achieve other design goals such as creating alignment or contrast or the right tone.

The value of this exercise is to become more attuned to how the designer has ensured readability and legibility in your model infographic so you can emulate those strategies and ensure that your infographic is legible and readable.

NOTE: I'm expecting that you'll have identified 1 or 2 fonts or at most 3 in your model infographic. If you have 3 or more start with the 2 main fonts and add more if you have time.

LEGIBILITY TRAIT 1: size

With an online infographic, it’s a bit tricky to determine what size the text is intended to be (since this will vary from screen to screen). As a compromise, set your zoom level to a place that feels comfortable for viewing the infographic and note whether some text seems uncomfortably small.

LEGIBILITY TRAIT 2: value contrast

Value refers to brightness/darkness. The part of our visual system that helps us identify letters and words does not recognize color. It relies on the contrast between the value of the text and background to distinguish between them. If the value of the text and background are similar, the text will be difficult to read even the color contrast is high.

The grayscale test (Edit -> Edit Colors -> Convert to Grayscale) is a good way to see if there is adequate value contrast. Look at the red text on a green background below on the left. Notice that it feels uncomfortable to read. The image to the right is the same box in grayscale. As you can see, the text virtually disappears. The version on the right is what your brain is working with when you read.

For practice, note whether your text model infographic has good value contrast. (I say "for practice" because this is one aspect of your text model that you won't be emulating since you'll be adopting the color strategies from your color model).

LEGIBILITY TRAIT 3: typeface

Note whether any of the typefaces used are difficult to read because of their unusual shapes or because of the use of italics or ALL CAPS. (Generally unusual fonts, italics or ALL CAPS are used only for short and/or large text where readability is less of an issue).

The next 3 traits you'll analyze are readability traits. To analyze readability, look for blocks of text in your model infographic (I don't have a precise definition of a "block" of text, just looking for a group of words that are long enough to require more than a glance to process).

READABILITY TRAIT 1: Line length

if lines are too long, it is (theoretically) more difficult for the reader to scan from the end of one line to the beginning of the next line. (I say "theoretically" because there is some evidence that this is less of an issue on screen than in printed form). Lines that are extremely short are also less readable because they get in the way of absorbing several words at a glance.)

Are there lines that feel awkwardly long or short? Make note of that and comment on whether there seems to be a good reason for compromising readability this way.

READABILITY TRAIT 2: leading

Adding space between lines improves readability to a point, but this has to be balanced with the goals of using space efficiently and making text feel like it belongs together.

Do the lines feel cramped or too far apart?

Make note of that and comment on whether there seems to be a good reason for compromising readability this way.

READABILITY TRAIT 3: letter spacing

You might find that letter spacing has been increased in headings or titles to make the heading align well with elements above or below it, or just to create a certain bold and elegant look. You might also find slight adjustments in letter spacing in body text and annotations to create alignment as well. Usually this is too subtle to affect readability.

Did you find that you had to adjust the space between letters to match the font? Does it seem to compromise readability?

NEXT: To continue your analysis, go to the Analyze: Text uses and association strategies page