Fonts and Font Sizes | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

The  tag, part of HTML 3.2 but deprecated in HTML 4.01 (again, in favor of style sheets), is used to control the characteristics of a given set of characters not covered by the character styles. Originally,  was used only to control the font size of the characters it surrounds, but it was then extended to enable you to change the font itself and the color of those characters.

In this section, I discuss fonts and font sizes. You'll learn about changing the font color in Lesson 7.

Changing the Font Size

The most common use of the  tag is to change the font size of a character, word, phrase, or any range of text. The ... tags enclose the text, and the size attribute indicates the desired font size. The values of size are 1 to 7, with 3 being the default size. Consider the following example:

<p>Bored with your plain old font? <font size="5">Change it.</font></p>

Figure 6.15 shows the typical font sizes for each value of size.

Figure 6.15. Font sizes.

You can also specify the size in the  tag as a relative value by using the + or - characters in the value for size. Because the default size is 3, you can change relative font sizes in the range from -3 to +4, as in the following:

<p>Change the <font size="+2">Font</font> size again.</p>

Here, the word Font (inside the  tags) will be two size levels larger than the default font when you view the example in a browser that supports this feature.

Relative font sizes are actually based on a value that you can define by using the <basefont> tag, another tag that's deprecated in the HTML 4.01 specification. The <basefont> tag also has the required attribute size, which can have a value of 1 to 7. All relative font changes in the document after the <basefont> tag are relative to that value.

It's also important to note that the available font sizes1 through 7are completely arbitrary. They're not tied in any meaningful way to real point sizes or any other standard metric for font size. Users can choose any font size they like, and all the sizes available to  are applied relative to that size. Various operating systems also display fonts in different sizes on the screen, so there's little consistency from one platform to the other. You can't really count on much consistency when it comes to fonts.

Changing the Font Face

Netscape introduced the  tag to HTML with its 1.0 browser. Microsoft's Internet Explorer, playing the same game, extended the  tag to include the face attribute. The tag was made a part of HTML 3.2, but with HTML 4.01, the preferred method is to use style sheets to specify the fonts you use.

The face attribute takes as its value a set of font names, surrounded by quotation marks and separated by commas. When a browser that supports face interprets a page with face in it, it searches the system for the given font names one at a time. If it can't find the first one, it tries the second, and then the third, and so on, until it finds a font that's installed on the system. If the browser can't find any of the listed fonts, the default font is used instead. So, for example, the following text would be rendered in Futura. If Futura isn't available, the browser will try Helvetica; it will then fall back on the default if Helvetica isn't available:

<p><font face="Futura,Helvetica">Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters. </font></p>

Many fonts have different names on different systems; for example, plain old Times is Times on some systems, Times Roman on others, and Times New Roman elsewhere.

Because the names of fonts vary from system to system and because the list of installed fonts varies on a per-user basis, most browsers enable you to specify font families as well as specific font faces in your lists of fonts. The two families that are usually supported are serif and sans-serif. Usually you tack one of these two families onto your font list in case none of the other fonts you specified were there. For example, if you want to present a headline in a sans serif font, you might specify a font that's available under the Mac OS, one that's available under the X Window System, and one that's available under Microsoft Windows, and follow that up with sans-serif in case the others aren't available:

<font face="Geneva,Helvetica,Arial,sans-serif"><h1>Today's news</h1></font>

Modifying Fonts Using CSS

Earlier in this lesson, I described a few font-related properties that you can manipulate using CSS. In fact, you can use CSS as a replacement for all the features offered by the  tag. Earlier today, I described how the font-family property can be used to specify that text should be rendered in a font belonging to a particular general category, such as monospace or serif. You can also use the font-family property to specify a specific font, just as you can with the  tag.

Fonts are specified in CSS exactly the way they are in the  tag. You can provide a single font or a list of fonts, and the browser will search for each of the fonts until it finds one on your system that appears in the list. You can also include a generic font family in the list of fonts if you like, just as you can with the  tag. Here are some examples:

<p style="font-family: Verdana, Trebuchet, Arial, sans-serif"> This is sans-serif text.</p> <p style="font-family: Courier New, monospace">This is monospace text.</p> <p style="font-family: Georgia">This text will appear in the Georgia font, or, if that font is not installed, the browser's default font.</p>

You can also use CSS to specify font size. Unfortunately, although the approach for specifying the font face itself is the same whether you're using the  tag or CSS, specifying font sizes under CSS is much more complicated than it is with the  tag. The tradeoff is that with this complexity comes a great degree more flexibility in how font sizes can be specified. Let's start with the basics. To change the font size for some text, the font-size property is used. The value is a size (relative or absolute) in any of the units of measure supported by CSS.

The catch here is that several units of measure are available. Perhaps the simplest is the percentage size, relative to the current font size being used. So, to make the font twice as large as it is currently, just use

<p>This text is normal sized, and this text is <span style="font-size: 200%">twice that size</span>.</p>

There are also a number of length units available that you can use to specify the font size absolutely. I'll discuss the popular ones in Lesson 9. In the meantime, just know that there are two kinds of length units: relative units and absolute units. Relative units are sized based on the size of other elements on the page and based on the dots per inch setting of the user's display. Absolute units are sized based on some absolute reference. For example, the pt (point) unit is measured in absolute pixels. To set your text to be exactly 12 pixels high, the following specification is used:

<p style="font-size: 12px">This text is 12 pixels tall.</p>

Caution

One thing to watch out for: When you specify units in CSS, you must leave no spaces between the number of units and unit specification. In other words, 12pt and 100% are valid, and 12 pt and 100 % aren't.

There's another thing that you can do with the font-size property that's not possible with the  tag: specify line height. Let's say you want to use double-spaced text on your page. Before CSS, the only way to achieve the effect was to use the   tag inside paragraphs to skip lines, but this approach is fraught with peril. Depending on how the user has sized her browser window, pages formatted using   in this manner can look truly awful. To set the line height using CSS, you can include it in your font size specification, like this: font-size: 100%/200%. In this case, the size of the font is 100%the defaultand the line height is 200%, twice the standard line height.

DO	DON'T
DO specify fonts using CSS rather than the `<font>` tag.	DON'T use too many different fonts on the same page.
DO list backup fonts when specifying a font family in order to make it more likely that your users will have one of the fonts you specify.	DON'T use absolute font sizes with CSS if you can help it, because some browsers won't let users alter the text size if you do so.