Primary Font Properties

Initially, it might seem that the manipulation of text on the Web is severely limited, but designers are constantly pushing the envelope with new and exciting methods of treating it.
Later we will delve into some more complex CSS properties, but for now it is important to understand the basic font syntax.

Specifying Fonts

First, you will want to override some of the browser’s default CSS properties, specifically the typeface and the font size. This is really straightforward, but there are a few interesting issues to be aware of. The following properties would typically be declared in the body selector, allowing all following elements to inherit the values unless you specify otherwise.

font-family

The font-family property is a list of font family names and/or generic family names for an element, specified in priority order. The browser will use the first available font on the user’s machine. There are two types of font-family values:

Family name:
The name of a font family, like Times, Georgia, or Arial.

Generic family:
The name of a generic family, like serif, sans-serif, cursive, fantasy,
or monospace.

Each value must be separated with a comma, and you should always suggest a genericfamily name as the final option in the list. If a family name contains whitespace, such as the family name Lucida Grande, it should be enclosed in quotes ("Lucida Grande"), although single quotes need to be used if embedding the style in HTML.

In the following example, defining the family names and generic family for the body element will ensure that all child elements will inherit the font-family declaration, unless specifically overridden.

/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
}

Note also that Lucida Grande is specified first, and due to its whitespace character it is contained within quotes. Any machines with Lucida Grande will display text with that font, and if it is not available, the display will default to Arial. If neither Lucida Grande nor Arial are available, the browser knows to use whatever appropriate sans serif font it can find next, as the generic family sans-serif is specified.

To overrule this blanket declaration, just specify a different font family for the appropriate element. For example, many designers like to display headings and block quotes with larger, more classic serif fonts.

font-size

We looked briefly at sizing text with ems, and the general consensus is that this is by far the best approach. However, when it comes to discussing CSS and learning its ways stage by stage, we prefer to use the pixel measurement, as it is the most easily understood and ensures those who simply cannot get their head around the concept of ems can still sit at the table with everyone else. Just to recap, using ems to resize text ensures compatibility with IE6, which cannot resize text defined with pixels.

In the following example, a new declaration is added to the body to define the size of the text in that and all child elements:

/* Specify blanket rules for all elements */
body {
font-family: "Lucida Grande", Arial, Sans-serif;
font-size: 12px;
}

By declaring font-size:12px in combination with the font-family declaration, you will ensure that all elements will be sized to 12px regardless of any inheritance (unlike ems, which can be influenced heavily through cascading rules), and will of course be rendered in the fonts you specified earlier.

There are exceptions to this blanket font-size declaration, however. Note that all headings (<h1>, <h2>, <h3>, and so on) will retain their default font sizes as declared by the browser style sheet unless you redefine them. In other words, just because you specify a size of 12px in the body does not mean that level 2 headings will also be 12px, as the browser style sheet has its own correctly formatted CSS rules such as h1 {font-size:2em}. In any case, why on earth would anyone want headings to be of equal size to their body text? This is another great example of the creators of CSS ensuring common sense is not compromised.

Font Shorthand

You probably won’t be surprised to discover that there are some useful methods of shortening font declarations, pulling several into one simple statement. Later you will combine four or five declarations into one, but for now, let's collate font-family and font-size.

The most important thing with shorthand is the order in which declarations are stated. In this case, font-size precedes font-family.

/* Specify blanket rules for all elements */
body {
font: 12px "Lucida Grande", Arial, Sans-serif;
}

With this basic knowledge of the two most important CSS font properties in your arsenal, you can now begin to experiment with new and interesting font choices. To get you started, in the following section we will plough into the vast array of available web fonts of which there is an exhaustive and unlimited choice.

[Back] [Contents] [Next]