Legibility

Unlike the readability which is about the opportunity to comprehend the text block as a whole, legibility measures how easily you can distinguish each individual character one from another in a specific typeface. Readability is defined by the work of copywriter and designer, whilst legibility is the result of designer and developer work.

Legibility is not always connected with readability and vice versa. Sometimes letters are legible when staying separate but too hard to perceive in a word.

‍

Tips & Tricks

Some features you can use to enhance your text legibility:
 

• Mind the contrast between the text and the background. To make this work you can conduct a test: convert the paragraph to grayscale, and if it is difficult to read — try more contrast. However, using black text on white background may provide too much contrast in your text. It is usually better to apply shades of grey instead.
• Choose a medium x-height. It should be not too low to cause a big difference with capital letters, and not too high to make it hard to distinguish capital and lowercase letters.
• Use tracking to reduce the text density and increase legibility.
• Adjust the kerning and check the space between particular letters: it is advised to keep the proportion to make a better legibility.
• Try to check the point size. It is the space between the bottom of a descender and the highest point of the ascender in a typeface. Recommended size for the web is between 15 and 25 pixels. It could get hard to distinguish the letters with a smaller distance.
• Don’t forget about the font weight: very bold or very thin typefaces are difficult to read.
• Bigger counters help to recognize the character. The smaller the counter — the harder the text is to read.
• Character width can be also important: typefaces with average width are much easier to perceive.
• Choose a simpler typeface: ones with complicated elements can make the text block look heavier.
• Stroke contrast — the difference between thin and thick strokes in typeface — should be considered as well. Extreme contrast can reduce the legibility.
• Sometimes sans serif is better than serif. For example, with numerals: sans serif is simpler and can make the figures more recognizable.

After all, don’t forget that the easiest way to make the most readable and legible text is to make it ‘transparent’ for the reader. Design doesn’t need to bring attention to itself and the main purpose here is to make the text perception easy and comfortable for your client.