Font Properties

Now that you understand how to use CSS, you just need to learn about the various properties and what settings they take. Obviously you won't need to use all of these at once, so just try to remember the common ones.

FONT-FAMILY

The FONT-FAMILY property specifies the font which text should appear in, like the FACE attribute of the FONT tag. Set this property to the name of a font (in quotation marks), or a list of fonts to be used in order of preference:

ELEMENT { FONT-FAMILY: "Comic Sans MS", "Arial" }

In this example, Comic Sans MS is used unless it is not available on the visitor's system, in which case Arial is used.

FONT-STYLE

The FONT-STYLE property allows you to make text italic or oblique. Its settings are (unimaginatively) NORMAL, ITALIC and OBLIQUE:

ELEMENT { FONT-STYLE: ITALIC }

Note that the oblique setting is not currently supported by Netscape.

FONT-VARIANT

Using FONT-VARIANT, you can make your text appear in small-caps style. The property can be set to either NORMAL or SMALL-CAPS. This will not work in Netscape and can sometimes be problematic in Internet Explorer, so don't rely on it too much.

It is expected that more settings will be added to FONT-VARIANT in future CSS specifications.

FONT-WEIGHT

This property allows you to control the boldness of your text. The settings allowed are NORMAL, BOLD, 100, 200, 300... 900, where 900 is boldest and 100 lightest. For most uses, just BOLD should give the desired effect:

ELEMENT { FONT-WEIGHT: BOLD }

FONT-SIZE

FONT-SIZE can take many types of setting. Firstly let's deal with absolute sizes. You can specify a size in points (pt) or use one of the 7 standard sizes: xx-small, x-small, small, medium, large, x-large or xx-large:

ELEMENT { FONT-SIZE: 24pt }
ELEMENT { FONT-SIZE: XX-LARGE }

Note that these settings are sometimes "quirky" in Internet Explorer, so check to make sure they work as you would expect.

The problem with using absolute sizes is that it prevents visitors being able to resize your text using the browser's built in formatting controls. It is therefore preferable (as when using the FONT tag) to use relative sizes. You can either be very vague and use LARGER or SMALLER, or give a percentage of the default size (of the parent element). So 200% would make text appear twice the size as it would do normally.

ELEMENT { FONT-SIZE: LARGER }
ELEMENT { FONT-SIZE: 150% }

FONT

To save space you can combine all of the above properties into the single FONT property. Include as many as you like, but they must be in the order listed (FONT-FAMILY, FONT-STYLE, FONT-VARIANT, FONT-WEIGHT, FONT-SIZE) and separated with spaces. You can omit any properties that you do not wish to use.

ELEMENT { FONT: "Arial" BOLD LARGER }

Support for this property varies wildly between browsers, so it may be easier to stick to separate property settings.