Font specification

Font support in HTML was a bit limited. You could specify a font name, a font size and a colour but not a lot else. CSS tries to improve things by providing properties that give you more control over fonts. The W3C calls this font specification. It isn't radical. In fact, it is quite similar to standard HTML, but you do get some useful extra options.

So, from the top.

You use the font-family property to give the font you want to use. You can give the name of a font, such as Arial, or a list of font names. It is a bit like font face= in HTML. You do have an extra option; you can use a generic font, such as san serif, that the browser uses if it can’t find the font that you want to use.

The font-size property lets set the size of the text. It is not unlike (font size=) but you have a lot more options. In standard HTML, you only have seven absolute sizes to choose from and you can increase or decrease the font size relative to the basefont. CSS allows you set the size in lots of ways. You can use:

Points, picas, pixels, the height of the font (em), the height of the letter x (ex), millimetres, centimetres, and inches
Percentages
Keywords for an absolute size, for example, small, medium, or large, or for a relative size such larger or smaller

There is a lot of chat about which measurements to use and problems with all of them. Still, never mind.

You also set some or all of the following:
The thickness of type. Use the font-weight property. Basically, this is normal or bold despite the number of options you are supposed to have
Whether the font is normal, italic or oblique text. Use the font-style property
The variant. Use the font-variant property. At the moment there are two values: small-caps and normal

You can also use font-size-adjust to adjust the size so that text looks the right size even if the font is missing or font-stretch to shrink or stretch the characters in the font.

Alternatively, you can use the new @font-face property. The W3C call this font selection. You can tell the browser to download the font, let the browser find a font on the user's machine that most closely matches the font properties you enter, or let the browser create a font based on the properties you enter.

I’m not sure there is a “right way” to use fonts but the sections that follow describe how to use the various font properties and also try to point out some of the pitfalls and how to avoid them.