A guide to web design


Legibility is the degree to which glyphs (individual characters) in text are understandable or recognizable based on appearance. “The legibility of a typeface is related to the characteristics inherent in its design ... which relate to the ability to distinguish one letter from the other.” Legibility includes factors such as “x-height, character shapes, stroke contrast, the size of its counters, serifs or lack thereof, and weight.”

Factors such as x-height, counter size, letter spacing and stroke width which are more significant for legibility than the presence or absence of serifs.

    There are three design features that make a typeface legible:

  1. Large X-Height:
    A large x-height increases the negative space within each letter. This makes it’s shape much more discernable.

    This serif font is Georgia 1lI rn jg

    This serif font is Times New Roman 1lI rn jg

  2. Large Counters:
    The negative space within a letter is called a counter. When a typeface has large counters, it is easier to distinguish the shape of each individual letter.

    This sans-serif font is Verdana 1lI rn jg

    This sans-serif font is Arial 1lI rn jg

  3. Simple Letterforms:
    The simpler a letterform, the more legible it is. Sans serif types are generally more legible than their serif counterparts because they do not have any serifs interfering with the shapes of the letters. However, this does not mean that sans serifs are necessarily easier to read in text. Actually, serif types are generally considered more readable.

Here are some letters and a number – nhy jg pbd 1lI rnm – set in Arial, Lucida, Verdana and Optima which can be hard to distinguish from one another because the look alike, run into each other and look like another letter, or look very similar when they are reversed or rotated for those with dyslexia.

nhy jg pbd 1lI rnm – Arial

nhy jg pbd 1lI rnm – Lucida Grande

nhy jg pbd 1lI rnm – Verdana

nhy jg pbd 1lI rnm – Optima