How to apply the legibility principles to screen reading? What is important point for it?

What is the difference between the "legibility" and "readability"?

1 Answer 1


If you look at the dictionary definitions, it doesn't seem like a lot of distinction between the two:

  • Legibility - Also called visibility. Typography. the quality of type that affects the perceptibility of a word, line, or paragraph of printed matter.
  • Readability - Typography . the property of type that affects the ease with which printed matter can be read for a sustained period.

Practically speaking, legibility has to do with being able to recognize the characters on the screen. Readability has to do with the long term effects of using the font/background/etc. Assuming the font is legible (you can make sense of the letters), a reader may experience eye fatigue reading the font for an extended period of time.

You don't want to base the main content of a web site with a font that has low readability. However, using a splash of fonts with lower readability for your titles can give your design freshness. You just don't want to overdo it.

Consider these example problems:

  • The font is too small - even with anti-aliasing when a font gets too small you are no longer able to distinguish between some of the characters. This is a legibility problem.
  • Horizontal gradient background - The reader's eyes have to adjust to the difference in contrast between background and text. When the reader starts the next line, they have to sharply readjust their eyes to the new contrast. With prolonged reading this causes eye fatigue and headaches. It is a readability problem.
  • Yea,,, thanks. I'm going to do a research about "compare the difference of print design and screen design principles to achieve legibility and readability". Any suggestion?
    – Grace kan
    Feb 18, 2011 at 15:41
  • I think you'll find more similarities than differences. The differences you will find have to do with the screen being illuminated from behind vs. light reflecting off a page. If you do a little research with polling people, I'd recommend a couple control samples that really exemplify bad design. This will help you determine if the user simply understates their reactions. Feb 18, 2011 at 15:59
  • What do you think the similarities about that. And I would like to see the samples. could you give me the links. Thanks!! ^ ^
    – Grace kan
    Feb 18, 2011 at 19:44
  • google.com/search?q=typography+web+vs+print NOTE: the biggest difference between web and print is designing for the availability of fonts on the client's machine. The WebFont CSS standard helps address that problem, though. Feb 18, 2011 at 21:14
  • As stated, the differences are fewer than the similarities. The differences would be: light source, resolution, and typical distance from viewer. Otherwise, the same principals of good typesetting apply to both mediums fairly much the same.
    – DA01
    Apr 19, 2011 at 12:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.