Note: Assuming your browser supports it, this list will not be printed out. Hide navigation

CSS: Fonts

Sunday 14th May 2006

Note: this article assumes some previous knowledge of how to use CSS and fonts.

Fonts. How marvellous! There is a wide array of CSS you can use with fonts - here are just a few:

So, from that, a few questions pop up. First and foremost...

What font do I use?

There is no easy answer to this question. The old favourites are Arial/Helvetica or Verdana.

Using Arial/Helvetica is usually fine. If you specify both, such as by using the code font-family:arial,helvetica, then you cover most people's computers. This means that if a computer doesn't have Arial, it can fall back to Helvetica. On the other hand, you might want a serif font, such as Times New Roman/Times.

In either case, it is good practice to specify a final, general option - normally either serif or sans-serif. There are also the options of monospace, cursive and fantasy. As an example, Arial and Helvetica are sans-serif, while Times and Times New Roman are serif - they have small extra lines at the end of the strokes of the characters. So, you might use code such as font-family:arial,helvetica,sans-serif or font-family:"times new roman",times,serif. This means that, as a final resort, the text should have the same style, more or less, as what you wanted.

Another font that is commonly used is Verdana, which I'll talk about in a moment. There are various other fonts that you can use, but bear in mind that there aren't all that many fonts that most people will have, besides those already mentioned. If you do decide to use a more exotic font, then it is highly advisable to use some of the fonts above to fall back upon. Even better, in my opinion, to not use those exotic fonts - some fonts reduce readability, such as the fonts designed to appear similar to handwriting, while others are overused and tacky, such as Comic Sans MS.

So, what about Verdana? The problem can be demonstrated quite easily. Note: this will only work if you have both Arial/Helvetica and Verdana installed and working in your browser.

The quick brown fox jumps over the lazy dog. - Arial
The quick brown fox jumps over the lazy dog. - Verdana

If you have the fonts installed, you should have noticed that Verdana appears to be larger, despite the fact that they are both in fact the same point size. The reason is simply because Verdana was designed to easily readable on screen, such that Verdana can be read at sizes that Arial becomes unreadable.

For those interested, this is achieved by a large x-height - this is the height of the all the smaller lowercase letters - a, c, e, m, n, o, etc., as well as x. Normally, they are all the same height, but, in cases where they differ, the x-height can actually be different from the height of the letter x. The point is that Verdana has a large x-height, making it appear bigger than other fonts using the same point size.

Why, you might ask, is this a problem? Well, there are two main reasons:

So, then, what is the solution? That depends. You could use Arial/Helvetica or Times New Roman/Times. The fonts look sensible and professional, and you can always fall back to the default font of the system without a problem - if it is readable when using one of these four fonts, then it should be readable using any other sensible font.

The other main option is to just let the computer decide - simply specify the general style of the font, such as sans-serif or serif. This means that the user can have whichever font they prefer.

Verdana is still useful, but I would advise setting a size readable for all fonts, not just Verdana. This means you accepting the look of Verdana at such a size.

With regards to mixing fonts, I try to avoid having too many fonts it if possible. Having said that, sometimes having two particular fonts can be effective or useful. If you do use more than one fonts, I would advise not going overboard - if you use ten different fonts on the same page, it is likely to create a disjointed feel to your page. Also, be consistent - if you use a serif font for paragraphs, you should probably use it on the lists that follow on from the paragraphs.

What font size do I use?

I tend to find this question easier to answer than the last one. The first point is that it needs to be readable using any sensible font - not just the one you've specified in the stylesheet. If you use Verdana, you still need to make sure that at whatever font size you have chosen, Arial can still be read.

Remember: you should always specify font sizes in relative units i.e. instead of stating that the font should be 12pt, use something more along the lines of 1em. 1em means that the font will be default size. 1.5em means that the font will be 1.5 times as big as default. 2em means that the font will be two times as big as default. 3em means... well, you get the idea. The principle behind this is so that people can resize their fonts with a minimum of fuss - some browsers will allow resizing of fonts when they are specified with relative units, but not when specified with absolute units, such as pt or px.

A size of around 10pt is the minimum you should really use for any main content. For most browsers, 1em means 12pt, so 10pt is about 0.85em - 0.8333...em to be precise.

How else do I style my font?

That wonderfully contrived question is a reference to bold and italics text. Italics text is fine to use, although you are probably better off either using a stylesheet to apply it, or using tags such as <em> (the emphasis tag) rather than <i>. The reason is simple - the separation of presentation from XHTML. Telling the browser to place emphasis on one word tells you about content. Telling the browser to make it italics tells you about presentation, which is less meaningful.

Anyway, back to the point: when should you use italics? The answer is not very often. I would advise against making larger blocks of texts italic, such as a paragraph, since italic font does not always render well on all computers, especially in the absence of anti aliasing. When using it on individual words, it does not often stand out. Therefore, it is best for something that you want to emphasise, but not necessarily want to be noticed immediately at first glance. For example, the cat was very scared.

Bold, on the other hand, is immediately noticeable, and does not suffer from poor rendering. It is useful for highlighting key points, whether this is a sentence or a word. Be careful not to overuse it though, since it can lose its effect and impact. For the same reason it is better to use <em> over <i>, you should use <strong> over <b>. According to the HTML specification, strong is short for stronger emphasis, so you should use it accordingly.

What colour should I use?

One definite colour to avoid using is blue, unless it is actually a link. The reason? If the text is blue, people expect to be able to click it and go somewhere.

Generally colours that are not dark can be expected to be links, so should be avoided. If you stick to dark colours, then you should be fine, although I would advise only using colours for headings.

For the main bulk of text, it is advisable to just use black text on white or other light colour. As you increase the brightness of the font, or decrease the brightness of the background, then the contrast between the two falls, making it more difficult to read. Some people go to the other extreme - white text on black background. I try and avoid this for any great length of text since it can become difficult to read - the dark background will stand out more than the light text, whereas the intention is usually for the focus to be on the text rather than the background.

Final Words

If there is one thing that I'd like to emphasise in this article, it is the important of choosing sensible, legible fonts, generally at a size that makes any sensible font readable. You can make your text more effective, as well as making your pages more readable, especially those that have poorer eyesight