Recipe 2.3. Gaining More Control over Font Sizes

Problem

You want the size of type to be consistent across different browsers and operating systems.

Solution

Set the font-size in the body element to 62.5%:

body {  font-size: 62.5%; }

Then set the font-size in the inherited form and table elements to 1em For Internet Explorer for Windows:

input, select, th, td {  font-size: 1em; }

Now your font sizes in your document will be equivalent to 10 pixels for each 1 em unit. For example, if you add the body declaration in the first part of the solution, then the following rule sets the font size for a paragraph to 19 pixels:

p {  font-size: 1.9em // displays text as 19 pixels }

Discussion

Because browser displays vary due to different operating systems and video settings, setting type in a fixed (or absolute) value doesn't make much sense. In fact, it's best to avoid absolute measurements for web documents, unless you're styling documents for fixed output. For example, when you create a style sheet to print a web document, absolute length units are preferred. For more on creating style sheets for printing, see Chapter 10.

Using pixels

Although pixels appear to consistently control the size of typography in a web document across most platforms and browsers, it's not a good idea to use pixels when designing for the following browsers:

Netscape Navigator 4.x, which doesn't display pixel size values correctly
Opera 5 for the Macintosh, which displays pixel lengths smaller than the size set in the style sheet

If most visitors to your site use browsers other than Netscape Navigator 4.7x and Opera 5 for the Mac, you can safely use pixels to set the size of your type.

Accessibility and web typography

The main issue in regard to setting type size in pixels isn't one of accurate sizing, but of accessibility. People with poor vision may want to resize the type to better read the document. However, if you use pixels to set the type on your web page, people who are using Internet Explorer for Windows will be unable to resize the type. Because Internet Explorer for Windows is the most commonly used browser on the planet, the use of pixels to set type size becomes a problem for most users who need to resize the type in their browsers.

If you do require an absolute size measurement, pixels should be used rather than points, even though print designers are more accustomed to point measurements. The reason is that Macintosh and Windows operating systems render point sizes differently, but pixel size typically stays the same.

Even though pixels are technically a relative, unit, designers refer to pixels as absolute units. A pixel is relative in terms of its actual physical size but it is absolute in terms of its size ratio on a web page, which is what is important to a designer.

If accessibility is a concern, switch to em units. In the solution, we set the text in a paragraph to 1.9em units. This value is equivalent to setting the font size to 90% of the default font size set in the browser's preference.

However, the use of em units raises another concern. This time the problem pertains to usability. Although you may be able to resize the type in a web page, if you set a font to a size that is smaller than the default text size of the browser (for example, to 0.7em), Internet Explorer for Windows will display small, almost illegible lines of text, (see Figure 2-5). So, the lesson here is: be careful with relative sizes, as it is easy to make text illegible.

Figure 2-5. Almost illegible type set with em units

Using font keywords

This brings up the possibility of another solution: the use of font-size keywords. The CSS 2.1 specification has seven font keywords for absolute sizes that you can use to set type size (see Figure 2-6): xx-small, x-small, small, medium, large, x-large, xx-large.

Figure 2-6. The font-size keywords on display

There are two other font-size keywords for relative measurements: larger and smaller. If a child element is set to larger, the browser can interpret the value of the parent's font-size value of small and increase the text inside the child element to medium.

Font-size keywords provide two benefits: they make it easy to enlarge or reduce the size of the text in most browsers, and the font sizes in browsers never go smaller than 9 pixels, ensuring that the text is legible. If you do set text to a small size, use a sans-serif font such as Verdana to increase the chances for legibility.

The main drawback with font-size keywords is that Internet Explorer 45.5 sets the small value as the default setting instead of the recommended medium setting. Because of this decision, Internet Explorer actually maps all the font-size keywords to one level lower than other browsers. In other words, the value for xx-large in IE 45.5 is every other browser's x-large, x-large in IE is large in another browser, and so on. Another drawback is that in Netscape 4, the smaller sizes are sometimes illegible because they aren't rendered well by the browser.

The workaround for these drawbacks is to first create a separate style sheet that contains the font-size keywords for the web document. Then use the @import method for associating a style sheet, as explained in Recipe 10.1 and as you see here (this step keeps Navigator 4 from rendering illegible type):

<link href="/_assets/basic.css" media="all"  rel="stylesheet" /> <style type="text/css" media="screen">  @import url(/_assets/fontsize.css); </style>

To keep Internet Explorer 5 and 5.5 for Windows from displaying the wrong sizes for the font-size keywords, use the voice-family workaround for delivering alternative values in Internet Explorer, as explained in Recipe 11.2 and as you see here:

#content {  /*    font-size workaround for WinIE 5:   1) WinIE 5/5.5 value first:   */  font-size: x-small;  voice-family: "\"}\"";     voice-family: inherit;    /*    2) Then the correct value next 2 times:   */  font-size: small;  } html>#content  font-size: small; }

Using em units to control type

Although using font keywords allows general control over the size of the typography, designers typically want more choices than the several that keywords provide. The solution offered in this recipe, developed by Richard Rutter (http://www.clagnut.com/), delivers this kind of control.

Browsers set the default value of 16 pixels for web typography, which is equal to the medium keyword. By setting the font-size in the body element to 62.5%, the default value of 16 pixels reduces to 10 pixels:

(16 pixels)62.5% = 10 pixels

As discussed earlier, an em unit is the default font size of the user's browser. With the manipulation of the default font size on the body element, one em unit is now set to 10 pixels.

1em = 10px

This solution then allows the web developer that desires pixel-sized control over their fonts to have that control, without the browser limitations manifested in the use of pixels as a value.

For example, if a web developer wants to set the size of heading to 24 pixels while the text in a paragraph is 15 pixels, the rule sets based on this solution would look like the following:

body {  font-size: 62.5%; } input, select, th, td {  font-size: 1em; } h2 {  font-size: 2.4em; } p {  font-size: 1.5em;  }

Another of benefit of this solution is the inherit nature of the solution. The use of relative units does not hinder the usability and accessibility issues that other solutions do.