Changing Font Sizes

The FONT element enables you to specify the size of a section of text. The FONT element uses the SIZE attribute to change the size of a font. There are two different kinds of font size changes you can make with the FONT element: absolute and relative. The following sections cover these two different ways of changing font sizes.

The FONT element is deprecated in HTML 4 in favor of using styles to achieve similar or superior results. Deprecated elements and attributes are perfectly legal in HTML 4, as long as you do not declare your page to be in conformance with its strict definition. There are good reasons, primarily to do with accessibility issues, why you might consider using styles instead of deprecated elements and attributes in Web pages, but using styles can raise compatibility issues relative to earlier browsers that either do not support styles or do so poorly. A fuller discussion of using styles in place of deprecated elements (and the FONT element, in particular) can be found in the Sunday Afternoon session, "Working with Styles."

Setting Absolute Font Sizes

Seven absolute (or fixed) font sizes, numbered 1 to 7, can be applied using the FONT element's SIZE attribute. An absolute font size is set in the following manner:

<font size="n">nested text</font>

where n is an integer from 1 to 7, with a Size 1 font being the smallest and a Size 7 font being the largest. Font Sizes 1 through 6 correspond to the six heading elements (H6 through H1), whereas a Size 7 font corresponds to a size that is larger than the largest heading element (H1). The default font size corresponds to a Size 3 font (the same size as the H4 heading). There are, thus, four font sizes (4, 5, 6, and 7) that are larger than the default font size and two (2 and 1) that are smaller. To see all seven absolute font sizes, just open fontsizes.html in your browser from the resources folder within your MyHTML folder (see Figure 4.14; click the Back button after viewing the example):

Figure 4.14: Seven absolute font sizes can be set in HTML.

Caution

Specifying a Size 1 font can result in an illegible font being displayed on the Macintosh system, due to different default dot-pitches at which fonts are displayed on the Macintosh and in Windows. Because the Macintosh defaults to a dot-pitch of 72 dpi, while Windows defaults to 96 dpi, this causes a font on a Macintosh system to be composed of fewer pixels than the same sized font on a Windows system.

To try out setting an absolute font size, use the FONT element to apply a relative font size of 7 to the initial letters in the H1 element (see Figure 4.15):

<h1 align="center"><img src="goodegg.gif" width="400"
height="267" alt="The Good Egg Company banner image"
align="middle"><br><font size="7">E</font>gg <font
size="7">F</font>acts and <font size="7">F</font>igures</h1>

Figure 4.15: The initial letters of the H1 element are increased to an absolute font size of 7 (one size larger than the H1 element's default size).

The FONT element is an inline element and, thus, should always be nested inside of a block element. Nesting the FONT element directly inside of the BODY element, while browsers won't care, is not valid in HTML 4. It is also not valid to nest a block element inside of the FONT element.

Setting Relative Font Sizes

Alternatively, you can set relative font sizes. A relative font size is set in the following manner:

<font size="+n or -n">nested text</font>

A relative font size is sized relative to the base font size, which corresponds to an absolute font size of 3. Thus, as long as the base font size remains at 3, a relative font size of +1 corresponds to an absolute font size of 4, a relative font size of +2 corresponds to an absolute font size of 5, and so on. Similarly, a relative font size of -1 corresponds to an absolute font size of 2, and a relative font size of -2 corresponds to an absolute font size of 1. To see this in your browser, reopen fontsizes.html from the resources folder in your MyHTML folder. Examples of all of the relative font sizes are shown at the bottom of the page (see Figure 4.16).

Figure 4.16: Relative font sizes increase or decrease the font size relative to the default font size.

Don't use the FONT element as a substitute for the heading fonts (H1, H2, and so on). That is because users of Braille browsers or screen readers will not be able to distinguish headings from normal text. Search engines also give extra weight to words and phrases included in heading-level elements when indexing your site.

Using the BASEFONT Element

Theoretically, you should be able to use the BASEFONT element to change the size of the base font (or default "paragraph" font) at any point in a document. The BASEFONT element is an empty element that is inserted in the following manner:

<basefont size="n">

Thus, if you set a size="4" attribute in the BASEFONT element, the base font size is increased from the default font size of 3 to a new font size of 4 for any following text. This does not affect any absolute font size changes you set, but any following relative font size changes will be relative to the new base font size, with a relative font size of +1 then being equal to an absolute font size of 5 (4 + 1).

The problem with the BASEFONT element, however, is that the Mozilla and Opera browsers do not support it. Netscape 6 or 7, which is based on the Mozilla browser, also does not support the BASEFONT element. Internet Explorer does support the BASEFONT element, as do earlier Netscape browsers (version 4 and earlier). Because the BASEFONT element is not supported in most current browsers, you should probably avoid using it. The BASEFONT element is also deprecated in HTML 4.

Using the BIG and SMALL Elements

There are two additional elements you can use to increase or decrease the font size: the BIG and SMALL elements. These elements bump the current font size of text up or down one step. This differs from a relative font size change, which resizes the font size relative to the base font size, instead of the current font size. Use the BIG element to increase the size of the text, "Salmonella enteritidis," one size (see Figure 4.17):

<h3><a name="salmonella"></a>Salmonella</h3>
<p>A small percentage of eggs (about 1 in 20,000) can harbor
the <i><big>Salmonella enteritidis</big></i> bacterium inside
their shells.

Figure 4.17: The BIG element increases the size of nested text by one font size.

You can further increase the size of nested text by nesting BIG elements inside of each other. For instance, <big><big>nested text</big></big> will increase the size of nested text two steps, instead of just one.

Use the SMALL element to decrease the size of the copyright statement at the bottom of the document (see Figure 4.18):

<p><small>&copy; Copyright 2004 The Good Egg Company. All
rights reserved.</small></p>

Figure 4.18: The SMALL element is used to decrease the font size of the copyright statement by one font size.

Caution

You should avoid nesting one SMALL element inside of paragraphs or other body text elements, since it can result in a font size (a Size 1 font) that may be unreadable for some users on the Macintosh platform.

The BIG and SMALL elements are not deprecated in HTML 4 and thus can be used even in pages declared to be in conformance with the strict definition of HTML 4. The reason for this is likely that these elements were originally introduced in the earlier HTML 3.0 proposal.

Most of the elements and attributes that are deprecated in HTML 4 were originally introduced as proprietary extensions to HTML by either Netscape or Microsoft.