Web Matters

Why you should avoid the Verdana font

Although the Verdana font is widely used on the web, it is actually a poor choice of font for authors to specify. This page explains why.

Font sizes

Below is a sample text in a number of fonts. All are in your default browser font size.

Technical:	The quick brown fox jumps over the lazy dog.
Times New Roman:	The quick brown fox jumps over the lazy dog.
Garamond:	The quick brown fox jumps over the lazy dog.
Sylfaen:	The quick brown fox jumps over the lazy dog.
Arial:	The quick brown fox jumps over the lazy dog.
Georgia:	The quick brown fox jumps over the lazy dog.
Verdana:	The quick brown fox jumps over the lazy dog.

If any of the above display in a monospaced font, it's because the fonts in question aren't available on your system. Below is how they appear on my screen.

Note how much bigger Verdana is than the others, even though the point size is the same. This is particularly so in comparison to Times New Roman, which is a common browser default font. The reason for this is that Verdana was originally developed to be legible when very small font sizes were imposed.

What effect does using Verdana have on a web page? Well, there are two possibilities.

One is that the author conforms to general best practise, and leaves the font at the default size. That results in text like this (assuming you have Verdana installed), which looks, for most people, unnecessarily large and unattractive.
The other is that the author specifies something like font-size: 85% to bring the font size back down to about the normal size of Arial. The problem here is that if the reader does not have Verdana, he gets text which is smaller and less legible than preferred, as this sentence probably appears to you (though it depends somewhat on browser details). This is of course rather a strange approach: if one wants something that looks like Arial at 100%, then surely it is more sensible to specify Arial at 100%.

I have come across a comment that Verdana was "recommended for legibility". In a situation where one is for some reason stuck with a small font height, this might have some validity. On the web however the reader is free to set a font and size which he/she finds legible, and there is no need whatever for a web author to set a different one on the grounds of greater legibility.

I have also been told that there are sites which recommend the use of Verdana because the digits are the same width, and thus suitable for use in columns of figures. This is just as poor an argument, for two reasons. Firstly, it costs precious little effort to add something like table { font-family: "some other family"; } to your stylesheet. Secondly, this is a property of most fonts anyway! Try them yourself: Times New Roman, Arial, Garamond, Century, Bookman ... In fact the only commonly-used font I know which does not have digits of the same width is Georgia.

In summary then, web-authors are recommended to avoid using Verdana, at least for the main text of the page. If you wish to specify a font-family, then stick to fonts of a moderate size. But unless you particularly wish to achieve a specific effect (such as using a characteristic nineteenth-century font for a nineteenth-century novel) then you would do as well to avoid using font-family at all. Set the font in your own browser to what you find pleasantly readable, and leave your readers to do the same in their browsers.

Incidentally it is sometimes said that using Verdana in a user stylesheet is fine, and this is more or less true. Though even this could give problems: an inoffensive author style specification like font-family: serif; font-size: 100% may leave you with text that is too small.