Here are some notes on fonts* [see terminology note at foot]. My job is always partly involved with usability (and 100% for some projects); here are the specifications for text legibility that I work to. We are specifically referring to web pages here.

Font family

The best fonts for on-screen use are sans-serif fonts.

The best fonts for offline use are often serif fonts (ie for printed pages).

Sans-serif fonts are the 'clean' ones like Arial, serif fonts are the ones with squiggly bits on like Times New Roman.

So on a website we always use sans-serif fonts. Exceptions are used only to make a clear distinction for some purpose, eg for a code 'quote' we use Courier New (a monospaced serif font). Don't use a serif font on-screen except for an unusual purpose as it is harder to read (at the same size), and stands out as an exception.

Although the rest of the page is displayed in Verdana 10-point; this sentence is in Times New Roman. You can see how old-fashioned it looks, as it is best used for newsprint.

This sentence, however, is in Courier New. It doesn't look that different at 10-point.

But if we increase the size to 12-point like this, you can see just how different it is. It's clear, but impinges a little too much on the readability as you notice the font and not the content.

And just for comparison, here's Verdana at 12-point. Very clear, but probably a little large for most uses.

The line above doesn't look right because the inter-line spacing is set for 10-point text. The lines are too close together at 12-point.

My personal favourite is 11-point Verdana, which is this font but a fraction larger - however achieving that is easier said than done, 11-point usually isn't an option. You have to specify an exact pixel size in a CSS override and there are disadvantages to this.

Font face

For main text panels it is accepted that the easiest font face to read is Verdana. This is a sans-serif font with a wide spacing. Many websites now use 10-point Verdana as a base font because of this.

For 'sidebars', eg modules or blocks and other separate smaller areas, it is accepted that the best font to use is Arial (or Helvetica and MS Sans Serif, which are all the same thing), because it is a clean sans-serif font but narrower than Verdana, so it fits into smaller areas better.

For main headings and sub-headings you can use what you like to get the effect you want. Normally Arial bold is a good choice.

Tahoma is the 3rd alternative in mainstream sans-serif fonts. Some may prefer it. This para is in 10-point Tahoma, so you can see the difference to Verdana.

Another candidate is Trebuchet, like this - but it is used much less. Basically, Tahoma and Trebuchet are alternatives to Arial, where a slightly 'smaller' font than Verdana is needed.

You can therefore clearly see that Verdana is the most readable font for web page use. Tahoma and Trebuchet, seen above, are 'tighter' and smaller fonts that can pack more words into a smaller space, and like Arial that is their main use. An alternative to Verdana is Calibri, as used in MS Word, but it cannot be used on a website as not all computers support it.

Georgia
For a very few specialist applications it may be appropriate to use Georgia, which is the font used for this paragraph. It is the most 'pleasing' of the serif fonts to modern eyes. It can be used where the intention is to make the text look old-fashioned, or perhaps like a newspaper.

Look at the difference between the lower-case letter 'g' in Verdana and Georgia.

The last two universal fonts are odd ones, Impact and WingDings -

This sentence is in Impact 12-point.

You are limited by browsers

For all text as against graphics you can only use fonts that all browsers have built in. If you use a font that a particular browser does not have, it will default to the font the browser uses as its default font for sans-serif or serif fonts, whichever was used. So you can use whatever fancy font you like - for instance that amazing font you found on the Italian font site you came across last night - but no one will be able to see it. They'll just see Arial.

In contrats, for graphics you can use whatever fancy font you like, as it's a picture, and everyone sees the same picture. However this approach is very poor for search purposes as text has far more weight than graphics - gfx are completely invisible to search engines and unless you fill all the tags correctly, and also pick the best keywords for the tags, the graphic has no value at all. Search engines can only see text.

There is a halfway-house alternative now called sIFR text. This is a text display, with the fancy text in it that you want to use, that defaults to Arial if the browser does not have that font. It works OK, but as it's JavaScript-based I'm not a great fan -- you must eliminate all JS for best search results. But that's another long, long story...

Here is a list of the fonts that are available in all browsers. You cannot use anything  not in this list because it may not be available to all viewers, and may default to the main default sans-serif or serif font, depending on which class you have used:

sans-serif:
Arial
[Helvetica and MS Sans Serif may be available, they are identical to Arial]
Verdana
Trebuchet
Tahoma

serif:
Times new Roman
Georgia

serif, special use:
Courier New

odd:
Impact
Wingdings

Font size

It is accepted that the best font size for readability (in practical terms - otherwise, obviously, larger is better) is in the range of 10, 11, or 12-point. It depends on personal preference, eyesight, page type, background colour, column width and so on.

In other words, the best font size for readability is 12-point but it can be varied downward to fit page size and style. 14-point looks far too large but will suit those with poor eyesight. 8-point is too small for good readability.

Many web developers set the font size to 9-point but there are two major negatives to this: it's best to avoid setting absolute font sizes in this way; and 9-point is a little too small for good readability. They do this because it makes their life easier if fonts are set as small as possible. You've got to watch them in case they try and get away with these stunts :)

There are all sorts of issues here, including accessibility, background colour, eyesight and even sex.

Yes, we managed to get sex in here. Unfortunately it is not very exciting: one in ten men are colour-blind, so 10% cannot see things 'properly'. The figure is much lower for women. Therefore if you have to pick a captain for a plane or a ship in a hurry, choose a woman, because colour-blindness in captains is likely to crash the plane or sink the ship - and men either don't know they are colour-blind or hope it will not affect their ability to do the job. Or read a web page.

In WW2 there were hilarious stories about colour-blind men who wanted to fly for the RAF, and who cheated and learnt how to read the colour-blindness test charts by rote, from friends who could see properly. As long as the examiners kept to the sequence, they passed. There were many such young men who were keen to fly and didn't care about the consequences. At the time of the Battle of Britain (the air war above southern England that determined the outcome of the war as a whole), the life expectancy of a fighter pilot was only 3 weeks, so I guess it didn't matter. Lots of jokes and funny stories come from those hard times - like scientific progress.


Agree? Disagree? Tell us what you think are the best fonts for on-screen use, in the forum.

* A quick note on terminology: the way we use the word 'fonts' with computers is wrong according to correct use / tradition / the printing industry. Strictly speaking the word font means a collection of type in a box - the lead type that was used for printing. The equivalent on a computer would be the collections of fonts in your Windows directory. What we mean by the word now is more correctly the typeface, ie the design of the lettering. However that doesn't really matter to us as non-professional users, since we all know what we mean.

We had a national newspaper compositor in our family and I still have some of the lead slugs, the blocks of type from there - all I remember now is the phenomenal noise from the press and the lead fumes in the air from the big machine he worked at, creating the blocks of print with molten lead. A healthy life, eh...  The word font has the same root as found or fount, as in pouring the molten metal in a foundry.