The best website fonts for legibility

Best fonts for website legibilityIn a previous post titled The best fonts for websites, I talked about how to choose the best fonts for your website so that no matter which operating system your visitor is using (Windows, Mac, Linux, etc.) or which version (Windows 98, XP, Vista, Mac OS 8 through 10.5) they will be able to see exactly what you intended.

In this post, however, I’d like to talk about which font style is best for legibility (i.e. which font is easiest to read on a computer monitor.) But before reading deeper into this post, I encourage you to check out the post mentioned above (The best fonts for websites) as well as the post titled Different types of fonts. They both contain information that will help you understand this post.

All done? Ok! Let’s uncover which fonts are best for website legibility:

Serif fonts: The crowned ruler of the paper kingdom

If you’ve ever read a typical magazine or book (that was actually printed on paper ;) ), then you will have seen a serif font in action. Serif fonts — the kind of fonts with the little “slashes” at the ends of the letter strokes — are the best fonts for the printed word. Why is that? Because the little serifs actually help to make the letters flow together and make reading much easier on the eyes. Some common serif fonts that you probably know include Times New Roman and Georgia.

The computer monitor conundrum

There is one thing that many computer monitors lack that makes using the above mentioned serif fonts the perfect choice for your website: adequate resolution. Resolution is basically how many pixels your monitor can display. The more pixels there are, the more details you can have. For example: my monitor has a resolution of 1600 x 1050 (which is pretty darn good.) But not everyone has such a high resolution monitor. And in order for those little serifs to make reading easier, a large amount of detail is required.

Back in the day (which, in computer years, means about 10 years ago), the best monitor resolution was around 800 x 600. Not that great for serif fonts. And nowadays, devices like Apple’s iPhone (320 x 480) and the new genre of computers called netbooks (most being 800×480) — both of which can be used to surf the Internet — also have a somewhat “limited” resolution to accurately display those detailed serif fonts.

Sans Serif fonts: The masters of all computer monitors

Since not everyone has a high-resolution monitor to surf the Internet, we’ll have to avoid using serif fonts on our websites if we truly want the pure text (i.e. the sentences and full paragraphs of text) to be easy to read and easy on the eyes. That’s where the Sans Serif fonts come to the rescue.

For many years, sans serif fonts have been the main style of font used for the pure text of websites. Since they all lack the little “slashes” of the serif fonts, they don’t become garbled on lower-resolution monitors. This makes them the perfect choice for the pure text of your website.

Looking at the first list from the post titled The best fonts for websites you can see only four serif fonts that all operating systems of all recent versions can display. Those are:

  • Arial
  • Helvetica
  • Trebuchet MS
  • Verdana

If you stick to using one of these for the pure text of your website’s content, then you will have almost guaranteed the legibility of your text. Your visitors may not directly thank you for it, but they will be much happier when reading the inspiring words you so arduously brought forth from the creative depths of your mind.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!

4 Responses:

  1. Robert

    There’s a typo in the paragraph just before the bulleted list of sans serif fonts. The paragraph says “…you can see only four serif fonts that all operating systems of all recent versions can display…” I think it should say sans serif instead of serif. And shouldn’t it be “all recent versions of all operating systems”? Sorry, I’m a technical writer … But I like your posts or I wouldn’t have taken the time to write this!

    Verdana will make Illegal, Illiterate, Illness and so on look OK with a capital I; Arial won’t!

  2. Melissa

    Hi Robert

    Thanks for the additional information, but you reversed the names at the very end. Its Arial that looks okay when placing an uppercase I beside a lowercase L and Verdana that looks odd.

  3. Ricardo

    Why we (human) has the ugly tendency to ONLY look for the mistakes of the others…? Sorry, my English is really the basic, it is my third language, so PLEASE, do not waste your time doing a review of my writing :-)
    Thank you for the article Melissa!

  4. --cc /0+z3

    Nice layout, good looking site, refreshing and it might be good information/data with a date. No biggy, the net is full of pages/columns/articles like it. Except for blogs, probably 90 percent of articles/net-pages have no date. Later after closer observation (weeks of research collecting) you find out roughly half are obsolete because they were discussing an old operating system or it was C++/CSS whatever rules/regs typed up in 2002 etc.

Share your thoughts below: