Home arrow Best Fonts On-Screen
Best Fonts For On-Screen Use

 

Best fonts for on-screen use

Here are some notes on fonts [1]. My job is always partly involved with usability, and here are the specifications for online 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 (i.e. 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, e.g. for a code 'quote' we use Courier New (a monospaced serif font). Don't use a serif font on a website except for an unusual purpose as it is harder to read (at the same size), and stands out as an exception. The usual goal is to present textin a highly readable format, andin such a way that the 'printing' does not intrude on the content. If it isn't easy to read, or the apearance of the font intrudes on your conscious evaluation of the material, then the text content is improperly presented.


Times New Roman: although the rest of the page is displayed in Verdana 10-point; this sentence in Times New Roman stands out, for the wrong reasons. You can see how old-fashioned it looks, as it is best used for newsprint. [2]

Courier New: this sentence, however, is in Courier New. It doesn't look too intrusive, but note how 'wide' it is. You could describe the overall appearance as a typewriter effect.

Font face

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

Arial: for 'sidebars', e.g. modules or blocks and other separate smaller areas, it is accepted that the best font to use is Arial, like this (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. See how compact it is compared to Verdana - although this does impact readability.

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: this is the 3rd alternative in mainstream sans-serif fonts. Some may prefer it. This paragraph is in 10-point Tahoma, so you can see the difference to Verdana. It is a whisker more compact than Verdana, and therefore less readable.

Trebuchet is another candidate, like this - but it is used much less. Basically, Tahoma and Trebuchet are alternatives to Arial, where a slightly smaller or compact font than Verdana is needed. Readability is reduced as a result.

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 should not  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.

Just for comparison, here is a paragraph in Times New Roman; Georgia seems a little more modern and slightly more pleasing. However, it may not be possible to compare the two reliably on a screen because sans-serif fonts look so much better on-screen.

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 .

You are limited by browsers

For all text, as against within graphics, you can only use fonts that all browsers have built in (unless using Web Fonts - see below). 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, most likely.

In contrast, 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 - we work on the principle that you should eliminate as much JS as possible 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 should not use anything omitted from this list because it may not be available to all viewers, and may default to their browser's main default sans-serif or serif font, depending on which class you have used:

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

serif fonts:
Times New Roman
Georgia

serif fonts, special use:
Courier New

odd fonts:
Impact
Wingdings

Google Web Fonts

There is now a way around browser font restrictions. You can use the google web font service to embed fonts in your website that are not available to browsers, and they will display correctly:
www.google.com/webfonts
 
It works like this:
- Grab the font and its associated code from the Google service linked above
- Use the font on your website
- Place the code on your site (it's hidden within the source code)
- A browser viewing your site goes to the web font service and downloads the font
- It installs on your computer and you see the correct font face
- It is entirely transparent (invisible to the user) and happens in a fraction of a second
 
This means you can now use any font desired, as long as it is supplied by the service.

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 or 11-point. It depends on personal preference, eyesight, page type, background colour, column width and so on. This selection is always a compromise between various factors such as readability (obviously, larger is better), style (generally, smaller = better), easy page design (smaller fonts definitely make the designer's job far easier), and functionality (what exactly is the purpose of the page in the first place?).

In other words, the best font size for readability is a large size, but it can be varied downward to fit page size and style. 12-point looks 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 :)

If a font size is not specified then the web browser generally presents the text at Size 3, which is usually equivalent to 10-point. CSS size adjustments to the website code often take a pixel off the size though, as this makes things easier for the web designer.

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 - therefore 10% of men cannot see things 'properly'. The figure is much lower for women. So, 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 as fighter pilots, 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 future course of the war), 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 - just like scientific progress.


Did you find this page useful?
If so, please consider linking to it. Thank you.


[1] 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, i.e. 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 from visits to his workplace as a child 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.

[2] If the various fonts on this page do not display correctly, it may be that your browser settings override the website's display settings.

 

 

 
Web Business Managers