How to Choose a Typeface for a Website

Readability is perhaps the most important design aspect of any website, and the font you pick for your site plays a major part in this. With thousands of fonts to choose from, choosing the right typeface for a website can seem a daunting task. But following a few basic rules will keep your site stylish and clear.

Instructions

1. Choose an accessible font. When you are designing a website, you may be tempted to use one of the many unusual fonts that are available in design programs and for download on the web. But it is essential to remember that, with HTML web design, users can only view a page in a font they already have installed on their computer. It is best to choose a font that most people will have pre-installed on their machine, because this gives you control over what people are seeing when they view your site.

2. Use font families. A font family offers a browser several options of which font to load a page with. For example, if you use code like this: font-family: verdana, arial, helvetica, sans-serif;on an HTML page or in a CSS document, it will cause a browser to load the first font if possible, followed by the other fonts if the first is unavailable.

3. Choose between serif and sans serif, the two most basic font types. A serif is a small decoration on a letter; for example, at the base of a line. Sans-serif fonts do not have these embellishments, and thus look plainer. As a general rule, serif fonts are more suited to printed text, whereas sans-serif fonts look best on a computer screen. It is best to present the main body of any text on your site in a sans-serif font, because it is the easiest to read. Some common sans-serif fonts are Verdana, Calibri, Futura and Tahoma.

4. Use contrast. Changing the color of your font and its background can be tempting, but you should think carefully before doing this. Most websites use black type on a white background, as this is the easiest to read. So you should seriously consider using this for your text, especially if there are larger blocks of text. If you do change your colors, remember to maintain a contrast between dark and light. Generally, darker text on a lighter background works best, but if you do go the other way, make sure the contrast remains high.

Tips & Warnings

• If you are desperate to use an unusual font for your site, you could display the text as an image, but this is not search-engine-friendly and will make your pages slower to load.

• Using relative fonts sizes rather than specifying a particular size is a good way of keeping the display of your site flexible to users.

• You can use more than one font on a page, but be wary of using too many. It can look confusing and untidy.