Beyond the FONT tag:
Practical HTML text styling

Author: Todd Fahrner, Verso
  1. Introduction
  2. Font face classes
  3. Size tags
  4. Face classes and size tags: synthesis
  5. Color
  6. References

Introduction

Since its introduction, HTML's FONT tag has been the predominant means of specifying font size, face, and color on the Web. Use of FONT is unfortunate on many counts, not least of which for Web developers is the tedium and bloat of adding, e.g., "<font size="-1" face="Verdana, Arial, Helvetica" color="#FFFFFF">...</font>" dozens or even hundreds of times to complex table-based pages. Modem users suffer too: often more than 20% of a typical commerce/portal site's weighty HTML code consists of FONT and its attributes. FONT is slow.

The proposed alternative to FONT (and to tables for layout, for that matter) is Cascading Style Sheets (CSS). Unfortunately CSS has been so grossly misimplemented in past and current (1999) browsers that many developers have remained on FONT's dubiously safer ground. While ambitious CSS-based formatting approaches remain impractical, conservative use of CSS is both safe and smart. Verso has used CSS in a modest capacity for all of its client projects since early 1997, mostly as an alternative to FONT. Now that the share of non-CSS browsers such as Netscape 3 has dropped into single-digit percentages, and HTML 4.0 has deprecated the FONT element, FONT oughttabe history.

This article documents a robust, cross-browser, cross-platform HTML text formatting scheme that makes no use of the FONT element, and that offers superior usability, maintainability, aesthetic, and performance characteristics.

Font face classes

Font face specification through CSS is simple and robust in all CSS implementations. Users of non-CSS browsers such as Netscape 3 and earlier, or users who have expressly disabled CSS in their browsers will see the typeface of their choosing instead - rarely a bad thing. For ease of reference, I call these schemes "face classes":

  1. This paragraph is of face class "sansa". Sansa is a "Swiss" sans-serif face like Arial or Helvetica. It has a neutral, cool feel.

  2. This paragraph is of face class "sansb". Sansb is a "humanist" sans-serif face like Myriad Web or Verdana. It has a friendly, modern feel. If neither Myriad nor Verdana are available, it looks like "sansa".

  3. This paragraph is of face class "serifa". Serifa is a "classic" serif face like Minion Web, Georgia, Palatino, or (lastly) Times New Roman. It has a "traditional" feel.

How it's done

This document's HEAD element contains a STYLE element. It looks like this:

<style type="text/css">
.sansa {
 font-family: Arial, Helvetica, sans-serif
 }
.sansb, .sansa small b, .sansa b small, small.sansa b, small b.sansa {
 font-family: "Myriad Web", Verdana, Helvetica, Arial, sans-serif
 }
.serifa {
 font-family: "Minion Web", Georgia, Palatino, "Times New Roman", serif
 }
 small.sansa,.sansa small {
 font-family: Helvetica, sans-serif
 }	
 big.sansb,.sansb big {
 font-family: "Myriad Web", Tahoma, Verdana, Helvetica, Arial, sans-serif
 }	
.min {
 font-size: 10px
 }
 </style>

The parts with the dots in front (e.g, .sansa), are "class selectors". Most any markup element can take class attributes to bind it to the corresponding CSS formatting rules. For example, this sentence has been wrapped in a SPAN element with the class "sansa": <span class="sansa">...</span>. Because the CSS in the HEAD associates the Arial typeface with the sansa face class, the sentence displays in Arial (or similar). The stylesheet also contains a number of tweaks for various obscure issues with one platform, browser, font, or another. These tweaks are not discussed here, but feel free to copy and trust me.

It is not necessary to use class markup. If you wish to format an entire document with, say, the "sansa" face class, you can simply select a bunch of elements and have done with it, like this:

body, td, p, div, small, big	{
	font-family: Arial, Helvetica, sans-serif
	}

Ideally, it should suffice to select the HTML element and rely on inheritance to handle all of HTML's children. But today's browsers (especially Netscape 4.x) are pretty stupid, so need special assistance in the form of redundant selectors. You can, of course, use classes in addition to element selectors, to make exceptions.

Size tags

While CSS can replace the font face="..." construct very effectively, it is considerably more dicey when used as an alternative to the font size="..." construct. Terrible browser bugs and widespread confusion regarding CSS's unit systems make font size control through CSS an "experts only" affair, usually with the support of "browser sniffing" to sidestep the worst of the bugs.

So while CSS theoretically provides a much richer set of tools to influence font size, it's all too easy to hang oneself with it. For now at least (1999), there is an easier, much more foolproof way than CSS: HTML's BIG and SMALL tags. Unlike FONT, BIG and SMALL have not been deprecated in HTML 4.0, nor are they as verbose as font size="whatever". Below are six example uses of BIG and SMALL tags. I've given them mnemonically appropriate names:

Big big
This is the size two steps larger than that chosen by the user as the most comfortable. It remains user-scalable, but defaults typically to 16-point, which looks considerably larger under Windows than on Macintosh (in pre-5.0 browsers). The markup required to produce this effect is as follows: <big><big>text</big></big>.
Big
This is the size one step larger than that chosen by the user as the most comfortable. It remains user-scalable, but defaults typically to 14-point, which looks considerably larger under Windows than on Macintosh (in pre-5.0 browsers). The markup required to produce this effect is as follows: <big>text</big>.
Normal
This is the size chosen by the user as the most comfortable. Use for full-measure body copy. It remains user-scalable, but defaults typically to 12-point, which looks considerably larger under Windows than on Macintosh (in pre-5.0 browsers). This effect requires no markup: it's the default.
Small
This is the size one step smaller than that chosen by the user as the most comfortable. Use for deemphasis or narrow-column work, not body copy. It remains user-scalable, but defaults typically to 10-point, which looks considerably larger under Windows than on Macintosh (in pre-5.0 browsers). Usually works better with sans-serif faces, but beware of mixing: a "small" sans-serif like Verdana can look as large as a "normal" serif face like Times. The markup required to produce this effect is as follows: <small>text</small>.
Small small
This is the size two steps smaller than that chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. It remains user-scalable, but defaults typically to 9-point, which looks considerably larger under Windows than on Macintosh (in pre-5.0 browsers). Works best with sans-serif faces. The markup required to produce this effect is as follows: <small><small>text</small></small>.
Small min
This size is fixed at 10 pixels across platforms (cf. Mac 10 pt.) in CSS browsers. Due to a bug in Netscape 4.x, it appears to be 9px in Netscape - the minimum legible size. Use for space-critical small labeling. It is not user-scalable in CSS browsers, so may present legibility problems. It does not print legibly in IE3. Use with careful discretion. A sans-serif face strongly advised. The markup required to produce this effect is as follows: <small class="min">text</small>.

Face classes and size tags: synthesis

The table below shows text samples using the size and face specification schemes described above, complete with bold, italic, and bold italic variants. The right column shows how things look without CSS, as a "worst case" reference for the degradation-conscious.

In this case, the face classes are attached to the TD tags (i.e., <td class="sansa">), though they might just as easily be attached to the size tags (e.g., <small class="sansb">) or other parent element.

View these samples on as many browsers/platforms as you care to, and with different fonts installed to see how results vary. The idea is that they look as good as they reasonably can in each unique environment, not that they look the same. Note also how they behave as you change the default font size in your browser.

What CSS browsers (IE3+, NS4+, Opera) see What non-CSS browsers (NS2-3 or CSS off) see (users' default typeface)
face class "sansa"
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.
face class "sansb"
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.
face class "serifa"
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.
This is some "big big" text in this face class. "Big big" means two sizes up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "big" text in this face class. "Big" means one size up from the size chosen by the user as the most comfortable. Use for emphasis, pseudo-headers, etc. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "normal" text in this face class. "Normal" means the size chosen by the user as the most comfortable. Use for body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers - use in conjuction with "big" and "small" tags for adjacent sizes.

This is some "small" text in this face class. "Small" means one size down from the size chosen by the user as the most comfortable. Use for deemphasis or narrow column work, not body copy. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is some "small small" text in this face class. "Small small" means two sizes down from the size chosen by the user as the most comfortable. Use very sparingly for labeling, never extended setting. This is bold, this is italic, and this is bold italic. This text remains user-scalable, with different default rasterizations across platforms in pre-5.0 browsers.

This is "small min" text in this face class. It is nonscalable - use only in space-critical applications. This text will not print legibly in IE3! This is bold, this is italic, and this is bold italic.

Color

[forthcoming - but the gist is that while CSS can do the job, there are a number of things to watch out for (e.g. inconsistent cross-browser handling of background colors on block and table elements). Also, in "brand sensitive" commercial Web design, the possibility that colors might degrade to browser defaults for a statistically significant part of the viewership can be a hard sell - much harder than typeface variance. For these reasons, use of HTML's color attributes instead of CSS is the conservative choice. Of course, for many simple, less sensitive applications, CSS for color is a perfectly reasonable choice.]

References

What others have to say about FONT:


Last modified: Tuesday, 5 December 2000 at 9:38 <acronym>PM PST</acronym>.

Home