Best fonts for on-screen useHere are some notes on fonts. 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 familyThe 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.
The page is displayed in Verdana 10-point; but this sentence is in Times New Roman.
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.
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 - but achieving that is easier said than done, 11-point usually isn't an option. You have to specify an exact pixel size and there are disadvantages to this.
Font faceFor 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.
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.
You are limited by browsersFor 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 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 unless you fill all the tags correctly, and also pick the best keywords for the tags. SEs 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...
Font sizeIt 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.
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.
|
Best Fonts On-Screen
