Release One: Coming to terms with the insanity that is font sizing

Didier Hilhorst, Designer

www.csszengarden.com/035

FUELED BY CAFFEINE, Didier Hilhorst approached Release One primarily as a high-impact branding exercise. He used a process similar to one he'd apply to any creative work, by sifting through considerations such as the Zen Garden's audience (Web designers), requirements (valid code, great design), and competition (other major design sites).

With the intent of creating a new slogan for the Zen Garden, Release One was chosen to distinguish his design. The circular logo he created is meant to represent a daisy, although it remains abstract enough to fit within the surrounding design (FIGURE 1). Bold green and orange colors grab the viewer's attention, while the softer grays and monotones provide resting places for the eye as one scrolls down the page.

Figure 1. A stylized Zen Garden logo.

Font Size

Though these printed pages don't convey the same sense of scale or proportion as viewing the design onscreen, you may have noticed that the fonts are a little bit small. In fact, if you take a look at the style sheet, you'll see precisely why:

 p { font-size: 11px;                            text-align: justify; } #quickSummary p.p1 {  font-size: 9px;                            background: transparent;  color: #999;  text-align: left; } 

That means the largest font (aside from those in the images) is no more than 11 pixels high and sometimes as small as 9 pixels high. Designers tend to prefer smaller fonts because the set of available Web-friendly fonts often look unprofessional at larger sizes (Verdana larger than 12 pixels is especially sloppy), and because smaller type means the designer can fit more information into an equivalent area. We wish everyone had a designer's eyesight, but most don't.

Browser Controls

Fortunately there are options available to the viewer of a site. All major browsers come equipped with font-size adjustment controls that allow users to scale the text of a site larger or smaller to suit their preference. In most browsers, the text-scaling options can be found in the View menu, or by pressing Ctrl-+ or Ctrl--(minus).

If all worked according to plan, we'd end here and fill the next few pages with doodles and amusing anecdotes. But we can't, because there's a problem: Fonts sized with the px unit don't scale in Internet Explorer for Windows.

Relative vs. Absolute

An absolute unit is a length with a predefined meaning; cm, in, and pt stand for centimeter, inch, and point, respectively. Each of those is a measurement with an accepted real-world value, and it is impossible to successfully argue that 2.5 cm is equal to a foot and a half, for example.

Note

If you use a modern OS with some form of font smoothing, like Mac OS X or Windows XP (you have to manually turn on the ClearType font-rendering feature in Windows XP, though), you might be able to distinguish the fonts within Release One without much effort (FIGURES 2 and 3). If you don't have font smoothing, however, you might need some extra help to read the text (FIGURE 4). While some fonts hold up with surprising fidelity at small sizesVerdana is a good examplesome become illegible.

Figure 2. The font smoothing in Mac OS X makes the type in Release One look good, if small.

Figure 3. Windows XP's ClearType also does a good job, although the type renders even smaller.

Figure 4. Windows XP without ClearType enabled makes Release One hard to read.

A relative unitlike %, em, larger, or smalleron the other hand, implies that there is an adjustable relationship between sizes. While 2em and 200% are double the size of 1em and 100%, how large is 1em to start? And 100% of what, exactly? There is an implied starting point with each of those units, and this is where the difference lies: 1em can mean 3 inches, .55 cm, or anything else.

Building a style sheet that uses a relative unit means starting with a base size, 1em or 100%, and adjusting all font sizes proportionately. Headers may be 150% or 2.2em, captions might be 0.8em or 75%. The base size may be specified or left to browser defaults, and in either case users can change their preferred base size and have the fonts on the page scale accordingly. This user-controlled adjustment is the main benefit of a relative unit. Notice the way Release One looks on Windows XP without ClearType turned on, and you'll understand why it's important for a viewer to have this ability.

There's also a third unit type. The font keyword, with values like xx-small, medium, and x-large, is an absolute unit according to the CSS specification. All is not well, however, and no one method works precisely as intended.

Pixels and Problems

According to the CSS spec, the px unit is, in fact, a relative unit. While there's a long and vaguely theoretical reason for this involving arm lengths and visual angles, the short version is that a 15-inch monitor running at a 1280-by-960 resolution will have pixels that are much smaller than those on a 21-inch monitor running at an 800-by-600 resolution. Because 10 pixels might be legible on the second screen, but unreadable at half the size on the first screen, the unit can't be considered absolute according to the earlier definition.

So if px is relative, we should be able to use it for precise control over the starting point of our fonts and allow the viewer to adjust as necessary ... except we can't, because Internet Explorer for Windows's lack of support for scaling the px unit means that it's effectively an absolute unit. Maybe we can just use em or % and be done? Well, not so fast. Relative units are less than ideal, too.

Starting Point

Remember that relative units are relative to a base size. But how do you specify a base size? By relying on a browser's default. Most browsers ship with a 16-pixel default font size, which is rather large for most people.

Inconsistency and Rounding

Relying on a browser's starting point might work fine, if you don't need precise size-matching across browsers. Though most browsers use a 16-pixel default, the size difference between various operating systems and older browsers is astounding. Web designer Owen Briggs ran a series of tests some years back, and by creating hundreds of screen shots he determined that consistency between relative units was merely a pipe dream (FIGURE 5). CSS keywords suffered much the same problem. For a long time, relative sizing was considered unusable due to the wild variance; 1em meant anything between 12 pixels and 16 pixels.

Figure 5. Some of Owen Briggs's many test screen shots, demonstrating the size differences between browsers.

Not only were the starting points different, but the results after scaling also differed across browsers. If 1em is 16 pixels, how big is 0.9em? One browser might round 14.4 pixels to 14, but another might round the value to 15.

Compounding

It's easy to paint yourself into a corner when using relative sizing. Consider the following code:

 <div >  <h3>Benefits</h3>  <p>Why participate? For recognition, inspiration, and a resource we  can all refer to when making the case for CSS-based design. This is  sorely needed, even today.</p> </div> 

If the following CSS is applied, how large is the text within the paragraph, assuming 100% is 16 pixels high?

 #benefits {  font-size: 75%; } p {  font-size: 75%; } 

Tip

For more on Owen Briggs's tests see "Text Sizing" at http://thenoodleincident.com/tutorials/box_lesson/font/index.html.

Did you guess 12 pixels or 9 pixels? The correct answer is 9. The first style rule sizes all text within #benefits down to 75%, or 12 pixels high. The second rule inherits that new value and sizes it to 75% of the first, resulting in 9-pixel text.

This compounding becomes a problem when it happens unintentionally and remains unchecked; too many iterations and your text will become unreadable. Older browsers, such as Internet Explorer for Macintosh, suffer especially when relative units are applied to units that nest; the text in each becomes progressively smaller and smaller (FIGURES 6 and 7).

Figure 6. Text that seems properly sized in a modern browser ...

Figure 7. ... might be unreadable in an older browser, due to compounding.

Sane Font Sizing

So with every method of specifying font sizes introducing slightly different problems, what is a poor Web designer to do? It seems that using pixel values is the least amount of trouble for the designer, but the most amount of trouble for the user. There are three reliable methods, each with pros and cons.

The Em Method

After Owen Briggs conducted his screen-shot frenzy, he discovered that fonts sized with a percentage value somehow avoided most of the more obvious rounding errors. When a percentage value was assigned to the body element and an em unit was assigned to everything else, relative font sizing could be used with a strong degree of consistency:

 body {  font-size: 76%; } p {  font-size: 1em; } 

Briggs suggests these values and advises not sizing any text on the page below 1em. The resulting text size for the p element is roughly 12 pixels, if the browser default is 16 pixels. This is comfortable for most viewers, and the relative nature allows the viewer to adjust it if it is not. This method is described in detail on Briggs's personal site, in "Sane CSS Sizes" (www.thenoodleincident.com/tutorials/typography/index.html). The Achilles Heel of this technique is that it assumes a browser default of 16px text. Most browsers use this default, but if the user has modified their default setting, the results will scale accordingly.

Tip

Plenty of common-sense advice exists online, available at MaxDesign (www.maxdesign.com.au/presentation/relative), css-discuss (http://css-discuss.incutio.com/?page=FontSize), and Dive Into Accessibility (http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html).

The Keyword Method

It turns out the browser that causes the most problems when specifying fonts with keywords is Internet Explorer 5 for Windows. Aside from it, this method proves fairly consistent and reliable across most other browsers. So with some browser-specific filtering using the Box Model Hack to give Internet Explorer 5 for Windows different values, it's possible to actually use CSS keywords:

 body {  font-size: x-small;  voice-family: "\"}\"";  voice-family: inherit;  font-size: small; } html>body {  font-size: small; } 

The scaling factor between each keyword is supposed to be 1.2, so assuming that a medium value is 16 pixels, this declaration results in roughly 13-pixel text.

Note

The Box Model Hack is a CSS hack that allows specific targeting of style for Internet Explorer 5 for Windows. Developed to overcome the broken box model of that browser, its use has been extended to other methods like this font sizing technique. See Box Model Hack at http://tantek.com/CSS/Examples/boxmodelhack.html.

Note

A more detailed description of what precisely the code at left is doing is available at Dive Into Accessibility (http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html).

The Style-Switching Method

For exact control of onscreen type, px makes the most sense. Relying on it is a bad idea, but there is a way to responsibly use it by working around Internet Explorer's deficienciesby creating a second, larger-font style sheet.

Note

Paul Sowden's method can be found in "Alternative Style: Working with Alternate Style Sheets" (www.alistapart.com/articles/alternate).

Methods of switching between style sheets are built into some browsers, but not Internet Explorer for Windows. So code-based methods have been built that replace this functionality and provide something within a page that viewers can control themselves, most notably Paul Sowden's original method publicized on A List Apart. Obviously, more than just fonts can be customized using this method, but it has proved effective at allowing user customization of a site through on-screen controls built by the Web designer.

Which Method?

So which of the three methods should you choose for your own work? It's a matter of preference. A site's viewers may not have the sharp eyesight of a visual designer like Didier Hilhorst, but if you select your font-sizing method with care, they don't have to.