Typefaces (Fonts) on the Web

This page has now been moved to some thoughts on which font is BEST.

This is part of my pages on Typeface or Font Readability.

You can be as ‘easy-to-read’ as you like, but if no one is going to read it . . .

On the BBC’s flagship morning news programme Today on 6 March 2010, John Humphrys interviewed some teenage students at a school in Birmingham about what they did and did not watch on television and internet.

One boy talked about the BBC news website. ‘It’s too boring’, he said, it’s in a ‘standard font’ (the BBC news website is in Verdana) and you immediately want, he said, to switch to a website that gives you the news in a more exciting format. Unfortunately he did not say which sites he preferred.

Beginning of the end for the ‘easy-to-read’ font, perhaps?

One of the fun things about creating a web page is that you cannot be sure exactly what typeface the viewer will see. For while the design may specify, say, Arial 10pt for the font, this will be rendered by the browser of the person who’s looking at the page in whatever way it does. Chances are they’ll have Arial on their machine, but they might not, and the 10pt will almost certainly be rendered at different sizes on different monitors.

This, of course, gives something of a problem to those who want to know, ‘What is the best font for readability?’ for if you cannot predict the font that someone is going to see, the question becomes a bit redundant. Well, sort-of.

The fi glyph that you see in the word ‘specified’ above, is a ligature. A ligature is the running together of two letters to form a single entity, and the reason it was done by the old fashioned typesetters was – aha!, to improve readability. It prevented too wide-looking a gap appearing after a letter f in particular.

These days, no one seems to bother too much about this, nor about laying out the page so there aren’t rivers of white space running down it, nor about finishing a line with the indefinite article a, nor about beginning a line with a numeric so it looks like part of a list. Nor even in some cases I’ve seen, running the final line of a paragraph onto the next page. Readability now, for some people, is all about finding the perfect font. Barking up the wrong tree, or what?

Actually, most fonts including Arial and Verdana and, yes, even Comic Sans, do have ligatures for fi and fl, but these don’t work very easily on a web page, you have to use Unicode characters FB01 and FB02 respectively and then only with certain fonts, see http://en.wikipedia.org/wiki/Template:Unicode, and for an example of it happening http://en.wikipedia.org/wiki/Typographical_ligature.

You will notice that I have used drop caps on some of the paragraphs on this page. Drop caps have the effect of breaking up the monotony of the text and in that way add to readability. This applies less to Microsoft’s Internet Explorer than to the better browsers (Firefox, Google Chrome, Safari, etc) where the drop caps format correctly. On IE they don’t; IE is not kind to those who want to lay out their page for readability (it’s considered by designers and programmers to be rubbish in other ways too, of course, drop caps is just one of them).

On the issue of whether text as graphics will be found by search engines (see comments relating to text as graphics above), of course it won’t as such, but it could be by naming the images as something you want to be found, and by use of the alt tags. For example, you may be able to find this page by typing ‘’ into a search engine’s (for example Google’s) search box. That text doesn’t appear on this page except within a graphic, and within that graphic’s name and its alt tags, yet it seems to be found OK, certainly by Google.

Next page in this set: Readability and Legibility .