[an error occurred while processing this directive]

fun with fonts [2]

jessey.net | Simon | articles | previous article | next article


Lose the friggin' <font> tag

Cascading Style Sheets (CSS) make it possible to style almost any HTML or XHTML element. Perhaps the most important of these is text. In web design, the <font> tag is king. Whenever you want to change the size or face of the font you are forced to do something like this:

<font face="Verdana"
size="4">some text</font>

On a page (or document, as the World Wide Web Consortium prefers to call it) with many changes of font size or face, these tags are everywhere. When using an HTML editor, such as Microsoft FrontPage, you can find that code may be as much as 100% longer because of repeated and often pointless use of the <font> tag and its attributes.

Using CSS to control the font

CSS can replicate the previous example thus:

<span style="font-family: Verdana, sans-serif;
font-size: 14pt;">some text</span>

Clearly, inline styling such as this is not the way to go because the example shows that the code is even longer than the original. The best solution is to use either an external style sheet or an embedded style sheet. I use embedded style sheets for these articles so that you can simply view the source code and see what is happening. Normally, I would use an external style sheet on all things except those rules that are specific to a certain page. Using an external style sheet allows a designer to alter the look of an entire site by just adjusting a few lines of code. The main jessey.net website uses Verdana everywhere. By changing one style rule I can have the whole site render in Arial if I so wished.

(X)HTML provides mechanisms for marking up documents so that they make sense when read. <h1> through <h6> are used to make headings and <p> tags are used to define paragraphs. These alter the text size accordingly. Using these tags properly will make a site more accessible. But sometimes you will wish to add visual flair.

To set the size of the font for the whole page, you can specify it in a style rule for the <body> tag. You might also wish to decide its face, color and weight at the same time. Here is an example:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;
    font-weight: bold;
    color: black;
    background-color: white;

The first style rule specifies that the font of Verdana should be used. If the browser cannot find it, Arial is used. Some Apple computers may not have these fonts, so you may wish to include a font that the Apple will recognize, in this case Helvetica. Finally, I have specified a generic font family of sans-serif to act as a backup. Generic fonts are chosen by the browser. Other generics are serif, monospace, cursive and fantasy.

The second style rule specifies a size of medium. This is a predefined keyword. Other valid values could have been set with em, px, pt, %, in, cm, mm, pc and ex. Let me briefly explain what each of those means:

The third style rule will make everything bold. This is not a good idea, but I wanted to show you it was possible. The fourth rule specifies the text should be rendered in black. Whenever you specify a foreground color, it is a good idea to specify a background color at the same time. A user may have specified a background color of black in a user style sheet. Black text on a black background is hard to read, isn't it?

Giving tags their own rules

A far better way to control the font parameters is to assign rules to specific elements other than the body. Here is an example:

p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: black;
    background-color: white;

h1, h2, h3 {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    color: red;
    background-color: transparent;

div.blackboard {
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
    color: white;
    background-color: black;
    border: 5px solid #960;
    padding: 0.5em;

In the example, only styles for the <p>, <h1> to <h3> and a specific <div> tag with an attribute of class="blackboard" are specified. The remainder of the document is left unchanged. Here is some example text created with the div styles above:

Today's lesson

You can add a class attribute to any element - even to inline elements such as <em>, so you could change the default style (usually italics) to red text in a different font if you wanted. This gives you tremendous flexibility. You will notice, for example, that I show examples of code on this page in a red, monospaced font. I use both the <code> tag and the <pre> tag to present code, depending on whether or not it is inline with other text. Since the style rules for both are the same, I have grouped them together like this:

code, pre {
    font-family: monospace;
    font-size: 1.0em;
    font-weight: bold;
    background: transparent none;
    color: red;

information resource

Refer to the Fonts section of the World Wide Web Consortium's CSS Level 2 specifications for more details about what can be done with fonts. For fancy effects, look at my previous article. Thank you for reading.

*Thanks to Kent Davidson for spotting a horrendous typographical error.

XHTML 1.1 icon, indicating validated XHTML 1.1 CSS icon, indicating validated CSS

© Simon Jessey, 2002