Styling Fonts With CSS

This tutorial focuses on fonts and the properties associated with them. Fonts are categorized into two groups generic family and font family.

The generic family can be best described as the group name of a particular font. This is a collection of fonts which have an identical appearance.

Example: serif fonts and sans serif fonts.

The font-family property is used to specific a font type.

Examples are Arial ( which belong to the generic family sans serif ) and Times New Roman ( which belong to the generic family serif ).

Font-Family Property

The font-family property is used to specify a list of fonts to be used when displaying a web page. When doing this, the preferred font should be written first followed by backup or substitute fonts.

These backup fonts are used in the event that the primary font is not available for use.

It is recommended that when specifying values for the font-family property you end with the generic family name which the list of fonts written belong to.

In the table below there are two generic family names and some fonts associated with them:

Generic Family Example of Font Family
Serif Times New Roman, Book Antiqua, Georgia
Sans-Serif Tahoma, Arial, Trebuchet MS

A possible layout in a style sheet could look something like this:

   font-family: "Times New Roman", Georgia, "Book Antiqua", serif;

In the above code snippet if Times New Roman is not available, then Georgia will be used and if Georgia is not available Book Antiqua will be used. If none of these fonts are available, then another font belonging to the serif generic family will be used.

Font names that consist of more than one word has to be placed in quotation marks. In the example above, Times New Roman and Book Antiqua are such examples.

Font-Style Property

The CSS font-style property is used to format text to be displayed as italic, normal or oblique ( these are the three values of the font style property ).

    font-style: italic;
    font-style: oblique;

Note: Oblique is closely related to italic text but is not very well supported by browsers. The value normal displays text normally.

Font-Weight Property

The font-weight property is used to display text in bold. The values are bold and normal . Numbers may also be used as a value. The numbers fall between 100 and 900.

   font-weight: bold;

Font-Size Property

The font-size property allows the text size to be defined. The value of the font size property can be specified in percentage, pixels or em.

    font-size: 18px;

Note: 16 pixels is equivalent to 1 em. Therefore 48 pixels would be equivalent to 3 em ( 49/16 = 3 ).

Font-Variant Property

The font-variant property has the values of normal and small-caps. The value small-caps is applied to capitalize text. Common letters appear in smaller caps when compared to letters that have already been capitalized.

The statement, “Kingston is the capital of Jamaica” with the small caps value would show every single letter in capital letters. However, the ” ingston ” in Kingston would appear smaller when compared to the K. The same format would apply for all other letters.

   font-variant: small-caps;