“Legibility is concerned with the very fine details of typeface design, and in an operational context this usually means the ability to recognise individual letters or words. Readability however concerns the optimum arrangement and layout of whole bodies of text” (alexpoole.info)
There are thousands of fonts and font variations that could potentially be used on a web site. However, the vast majority of these fonts will not display correctly for most web users because computers will only display fonts installed on that computer, and not all computers have the same fonts installed. Furthermore, different software often render the same font differently (see Why do html/css texts appear so “pixelated” compared to texts from photoshop or gimp? on stackexchange.com)
Websafe fonts is a term used to describe those fonts that are most likely to be rendered correctly on a wide range of systems. There is no “definitive” list of websafe fonts only degrees of web-safety. The most safest fonts are considered to be:
- Arial / Helvetica
- Times New Roman / Times
- Courier New / Courier
For a larger selection of websafe fonts see cssfontstack.com, which provides a list and css fonts and their level of support across windows and mac.
An example of the use of non-websafe fonts is the Water Corporation of Western Australia’s website (as of May 2013). The use of “Futura W01 Medium” and “DIN Next W01 Regular” fonts has resulted in a website suffering, at least on my systems from badly reduced legibility. A problem that is easily rectified by either:
- changing “Futura W01 Medium” to “Futura Medium” and “DIN Next W01 Regular” to “DIN Next Regular”; or
- (even better) sticking to websafe fonts.
Above: Good legibility vs bad legibility
Above: Use of non-websafe fonts in CSS
But why do we end up with such bad web design outcomes? I suspect that reason is due to one or more of the following:
- websites being designed in packages that do not reflect that limitations of web browsers;
- insufficient co-operation between designers and programers;
- insufficient or in-experience system testing and review