Web Design
Table of Contents
by Arnold Kling
Tricks with Fonts

Font controls let you vary the shape, size, and style of the characters of text.

If you do not specify values for font characteristics, the user will see a default font, selected by the browser software and operating system. If you change one characteristic, such as font size, the other characteristics remain at their default values.

Here is the style sheet code for a class that will change the style to italics:

.italicize{
font-style: italic;
}

On an HTML page, you could invoke this style in a block of text, using <div class = "italicize"></div>. You could invoke this style any time in the middle of a block by using <span class = "italicize"></span>. You could invoke this style inside a table element by using <td class = "italicize">.

Next, you could create a class to change the default font to cursive with a bold weight. The style sheet code might be:

.cursivebold{
font-weight: bold;
font-family: cursive;
}

Suppose that we want the font to be cursive, bold, and italics. (Note: you cannot necessarily do this with all fonts. See the handout on browser-safe fonts.) One approach would be to create a new style:

.italic_bold{
font-weight: bold;
font-style: italic;
font-family: cursive;
}

Instead of creating a new class, we could simply modify either the italicize class or the cursivebold class to add the other property. Question: Why might this not be a good idea?

Another way to have text be bold and italic would be to use "nesting" on the HTML page. "Nesting" means invoking two classes on the same text element. Here is some HTML code that uses nesting:

We can do <span class = "italicize"><span class = "cursivebold">full nesting</span></span>, where we modify the font the same way for both words, or we can do <span class = "italicize">partial <span class = "cursivebold">nesting</span>, where only the innermost word</span> uses both classes.

The results of this HTML code would look like this on a web page:

We can do full nesting, where we modify the font the same way for both words, or we can do partial nesting, where only the innermost word uses both classes.

Overall, I think that the best strategy for combining different font characteristics is to create a style class that does exactly what you want. Nesting tends to be confusing, and it should be avoided unless it is absolutely necessary.

Page created by Arnold Kling. Last Modified July 18, 2001.