When we judge the usability, or clarity, of a text passage, we usually do so according to two different criteria: legibility and readability.

And while legibility and readability sound similar, perhaps even like the same thing (isn’t that just generally the fate of words that end in –ility?), the concepts are actually quite independent one another.

For instance, a passage of text could be highly legible but hardly readable:

Conversely, a passage of text could be highly readable, but have legibility issues:

So, what does “legibility” mean exactly?

In simple terms, “legibility” concerns itself with the anatomical features of letterforms, for example:

• X-height is the height of the lower case letters (with the exception of ascenders or descenders.


• Modulation is the visual difference between the thick and thin strokes that give structure to letterform.


• Stems are formed by a letter’s main supporting stroke.


• Serifs are small strokes at the end of an arm, stem, or tail of a character.


• Counters are the white-spaces enclosed within a letters like o,e,c,a and b.


• Ascenders are the parts of letterforms that extend above the x-height


• Descenders are the parts of letterforms that extend below the baseline of a typeface.


• A baseline is the imaginary line upon which text rests.

These intrinsic characteristics make up the DNA of a font and combine to give a typeface its appearance (and affect our perceptions of it as ugly, beautiful, legible, etc.) Our ability to distinguish one letter from another contributes greatly to the legibility of a typeface.

Unfortunately, unless you are a type designer, there isn’t much you can do to improve the legibility of a typeface without modifying it’s design. For this reason, it’s important to grasp the concept of legibility before you choose a typeface.

Legibility on screen: a question of resolution

“In the harsh light and coarse resolution of the screen, such literate accessories are difficult to see…”—Robert Bringhurst

I love the web. And I love computers. But screens have some peculiar traits that we, as web typographers, must be acutely aware of for they pose challenges to the way we choose typefaces, and the way we set type.

With the exception a few notable mobile devices most screens have poor resolution: in the ballpark of 110ppi–135ppi for a high-end display.

To put this in perspective this is less than 50% of the maximum resolution the average person can perceive (roughly 300ppi though debatable).

The limited resolution of the majority of computer screens significantly restricts our ability to utilize high contrast fonts or fonts with fine details or “literate accessories,” unless they are rendered at “display” sizes.

Such details simply get lost in the comparatively loose pixel grids of our devices, even despite the closer approximations to original letterforms that anti-aliasing technologies have afforded (at least when compared to bitmap/pixel fonts). But as you can see, even anti-aliased fonts break down at small sizes.

Consequently, good text faces for the screen tend toward the middle ground: not too showy or delicate, not to bold or heavy, not too much flavor—just enough to avoid blandness, if possible. Fonts designed for the screen tend to feature:

• A large x-height
• Simple curves
• Loose letterspacing
• Open counters
• Wide proportions
• Low-contrast
• Well-formed serifs (or none)
• A rational axis (grid-friendly)