People find reading text on screen much more difficult than reading on paper, by following some simple guidelines web designers can help make this as painless as possible.
Due to the nature of how web browsers render textual content on the screen; using the fonts installed on the client machines, it severely limits the font variation web designers have at their disposal.
Most browsers will be able to render the following fonts without reverting to a default alternative:
- Arial Black
- Times New Roman
- Trebuchet MS
- Courier New
- Comic Sans MS
I personally stick to the top 3 fonts in this list as they are very readable on-screen and are the most professional; avoid Comic Sans MS and Courier New.
It is also possible to specify alternative fonts in your CSS style sheets for the browser to use if your font of choice isn't available.
Once you've chosen a font for a website use that font throughout to maintain consistency. Websites that use too many fonts sprinkled through their pages look unprofessional. Verdana is the most readable font even at low point sizes.
To increase a sites' readability you should focus your attention on three things:
- Choose a good font and a decent readable default font size.
- Make sure the text and background contrast in colours is high.
- Avoid using all capitals in blocks of text and headings.
Text in Images
Some web designers get around the font support problems mentioned above by creating a bitmap image of all headings, titles etc. Although this method does allow you to use any font your graphics program supports, including anti-aliased (smooth-edged) fonts, it causes a big accessibility and SEO problems. You should only use this technique for a company logo, all other textual information should be actual text in your HTML.