fun with fonts [2]
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:
- em - 1em is equal to the height of the character box* for a given font. 1.5em is the same as 150%. Because the value is relative, it works very well when specifying the size of a font and is very user friendly.
- px - The number of pixels available to a designer depends on the screen resolution of the user viewing a web page. This is a good unit to use if you are trying to create a pixel perfect design, but not much good if you are trying to create something more accessible and user-friendly.
- pt - Points are well understood by everyone but different browsers and operating systems calculate them in different ways. They are therefore unsuitable for visual display.
- pc - A pica is equal to 12 points. Like pt, in, cm and mm, it is best used for printed media and not visual displays.
- in, cm, mm - These absolute measurements are also unsuitable for visual display, since they depend on monitor resolution and monitor size.
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.
|
© Simon Jessey, 2002