CSS Font Properties

The CSS font properties are great for changing basic font settings such as the font face, the font size, and the font weight. There are also a few lesser known properties which can be invaluable in certain circumstances.

font-family

You can use the CSS font-family property to choose which font text should be displayed in. You can list as many fonts as you like, in order of priority, and the visitor's web browser will work through the list until it finds one that is installed on the user's computer, and use that.

You can specify either specific fonts (e.g. Arial, Times New Roman etc), or a generic font family, such as serif, sans-serif or cursive. It is always a good idea to specify a generic family as a last alternative incase the user doesn't have any of your specific fonts installed.

Usage is as follows:

p {
font-family: arial, "trebuchet ms", verdana, sans-serif
}

Note that when a font name is made up of more than one word, as in the case of Trebuchet MS, you must surround it with double quote marks. If the style is inline then you should use single quotes marks instead.

font-size

font-size can be specified in a number of ways. Firstly you can use a descriptive name (xx-small, x-small, small, medium, large, x-large, xx-large). Secondly you can choose a size relative to the parent element (smaller, larger). Finally you can specify a size in either pixels or ems. For example:

p {
font-size: 0.8em
}

or

p {
font-size: large
}

I prefer to specify font sizes in ems, because that way they resize according to the user's browser preferences. If you choose to define your font sizes in pixels, be aware that different font sizes can appear very different on different monitor sizes and resolutions.

font-style

Choose between normal (default), italic and oblique. In most cases italic and oblique look almost identical, so it doesn't really matter which you choose.

p {
font-style: italic
}

font-variant

CSS font-variant gives us the choice of displaying our text in small capital letters if we want. This is slightly different to normal capital letters because the relative sizes of capital and non-capital letters is maintained. In other words, small letters are upgraded to small capital letters and capital letters stay capital but larger.

p {
font-variant: small-caps
}

font-weight

font-weight gives us a number of choices for displaying our text in a way that emphasizes it. In theory there are several choices here - normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900. In reality however, not many web browsers support this full range, and most only offer true support for normal and bold, so it's best to stick with those if you can.

p {
font-weight: bold
}

font

The CSS font property allows us to set all of the previous properties in one line. We also have the option to specify the line height. The properties should be declared like so:

p {
font: font-style, font-variant, font-weight, font-size/line-height, font-family
}

The properties should be listed in this order and with a space but no comma in between each. For example:

p {
font: italic small-caps bold 1.2em/1.4em arial
}

Note the size/line-height properties. Here we have set the font size to 1.2em and the line height to 1.4em.

Personally I prefer not to use this method; I find that specifying each property individually is easier to read and edit, but feel free to use whichever method you prefer.