18.3. Font SizeCSS provides the font-size property for specifying the size of text. There are many value options for specifying font size , each with its own pros and cons. This section discusses the various keyword and unit options and their impact on usability.
Values:xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit Initial value:medium Applies to:All elements Inherited:Yes These examples demonstrate the font-size property used with several different value types. p.copyright {font-size: x-small;} strong {font-size: larger;} h2 {font-size: 1.2em;} p#intro {font-size: 120%;} 18.3.1. Absolute Versus Relative SizesBefore diving into the details of specifying type size, it is worth pausing to clarify the difference between absolute and relative sizes. Absolute sizes have predefined meanings or an understood real-world equivalent. In CSS, absolute values may be expressed as keywords, such as small or x-large (discussed next) or by using absolute length values, such as cm (centimeter), in (inch), or pt (point, 1/72 of an inch). Relative sizes, on the other hand, are based on the size of something else, like the parent element or the em measurement of the text (see the sidebar "A Word About Ems"). Relative values, such as em and percentages, are generally preferred for web text for reasons that are covered in the upcoming sections. 18.3.2. Absolute Size KeywordsAbsolute sizes are descriptive terms that reference a table of sizes kept by the browser. There are seven absolute size keywords in CSS: xx-small, x-small, small, medium, large, x-large, and xx-large. The keywords do not correspond to a particular measurement, but rather are scaled consistently in relation to one another. The default size is medium in current standards-conformant browsers. Figure 18-3 shows how the following examples of text sized with absolute keywords look in Firefox 1.0. <span style="font-size: xx-small">xx-small</span> <span style="font-size: x-small">x-small</span> <span style="font-size: small">small</span> <span style="font-size: medium">medium</span> <span style="font-size: large">large</span> <span style="font-size: x-large">x-large</span> <span style="font-size: xx-large">xx-large </span>
Figure 18-3. Text sized with absolute keywords
The CSS 2.1 specification leaves the scaling factor (how much each consecutive keyword is enlarged or reduced) up to the user agent. Chances are, it will be somewhere around 1.2 (the most recent recommended scaling factor) or as large as 1.5 (the CSS 1 recommended scaling factor), varying between different browsers. At a scaling factor of 1.2, if medium (default) text is 16 pixels, then large text would be 19 pixels (after some rounding). The upshot of it all is absolute size keywords vary in size from browser to browser, so they are not the best option if you are looking for consistency.
18.3.3. Relative Size KeywordsThere are two relative keywords: larger and smaller. They are used to shift the size of the text relative to the parent object according to the seven-step absolute-size scale (using the same scaling factor). For example, if the text of a paragraph is set to large, applying the keyword smaller to a child em element would cause the emphasized text to display at medium size. Figure 18-4's examples use relative size keywords. There are two relative keywords: <span style="font-size: larger">larger</span> and <span style="font-size: smaller">smaller</span>. They are used... Figure 18-4. Relative size keywords18.3.4. Percentage MeasurementsOne fairly reliable way to specify text size is in percent values. Percent values are calculated relative to the inherited size of the parent text. That "inherited" part is important, because it means that if you nest similar elements with percentage values, the affect is cumulative. It doesn't take many levels of nesting before the text is unreadable. In Figure 18-5, the ul element is set to a relative size of 80%. If the body of the document is 16 pixels, that means the ul text will be 13 pixels (after rounding). The nested ul within that list takes the same size setting (80%), but this time it is applied to its inherited size (13 pixels), resulting in 10 pixel text, and so on for each nested level. Figure 18-5. Nested elements with percentage size values
18.3.5. Length MeasurementsThe final way that type size may be specified is in a specific number of units. Some units are absolute and some are relative. The absolute length units are:
The relative length units are:
Specifying a unit length with the font-size property is simple. Just be sure that the value is immediately followed by the unit abbreviation, with no extra space between, like this: p {font-size: 12px; } h1 {font-size: 1.6em; } The tricky part comes in knowing which units are the most appropriate for the job. Some units are problematic in terms of accessibility while others are victims of browser inconsistencies. 18.3.5.1. The problem with absolute valuesBecause real-world measurements, such as inches and picas, aren't relevant on computer screens (see Chapter 26 for an explanation of why inches are useless), none of the absolute values make sense for web page text. If you are creating a style sheet for print, however, absolute length units may be just the ticket. Recommendation: Avoid pt, pc, mm, cm, and in measurements for web pages. 18.3.5.2. The problem with pixelsYou may be thinking that because elements on web pages are measured in numbers of pixels, and because pixels are considered a relative measurement, that they are the answer to all font size problems. It would be nice if they were. For some designers, control over text at the pixel level is intoxicating. Unfortunately, there are a few reasons why pixels have come to be shunned for text size. We know that all pixels are not created equal, so that means that what is tidy yet readable on your monitor may require a magnifying glass on someone else's screen. On most current browsers, starting with Internet Explorer 5 for Macintosh in March 2000, that is not a problem, because users have a "text zoom" function that allows them to increase the size of text regardless of the style sheet settings. Ironically, Internet Explorer for Windows (Version 6 and earlier) does not allow text zoom on text specified in pixels (it will resize text set in ems and percentages). IE 7 (in beta as of this writing) promises a zoom function on pixels, but for the time being, there is a significant percentage of users who cannot override pixel size settings. This is a big no-no in terms of accessibility. Recommendation: If accessibility is important to you (and it should be), avoid using px measurements for text until IE 5 for Windows and IE 6 for Windows are just a memory. 18.3.5.3. The problem with emsEms turn out to be the best length unit for the Web, but they too have a couple of potential snags. The first is that em measurements are relative to the browser's base size. For most browsers, the default base size is 16 pixels, which is quite large. Designers tend to want to reduce the text size slightly across a whole page or a whole site. But that 16 pixel base size is not a sure thing. Some users may have reset their base text smaller already in the browser preferences, in which case, making text smaller again in the author style sheet may make it unreadable. Fortunately, all current version browsers allow text zoom on text specified in ems, so users can make the text large enough to read easily (that is, if they know about the zoom function). The other issue with ems is that, due to rounding errors, there is a lot of inconsistency among browsers and platforms when text size is set in fractions of an em. One or two pixels can make a big difference when text is displayed at low resolutions. Not only that, some browsers have problems with text set at less than one em. Percentages are a more reliable way to provide relative measurements, but then you may run into problems with cumulative resizing. Recommendation: One popular solution is to use a combination of percentages and ems to avoid the problems associated with both. This method was first introduced by Owen Briggs as a conclusion to his deep exploration of browser font-size differences. The method works by making the text slightly smaller with a percentage at the body level. Then use ems on the individual elements that you'd like to be larger than the surrounding text. Here is an example using his suggested values: body {font-size: 76% } /* results in 12 pixel text when the base size is 16 pixels */ p {font-size: 1em; } h1 {font-size: 1.5em; } The advantage is that the percentage value gives you more fine-tuned control, and the em sizing doesn't compound the way percentages do. The disadvantage is that if the base size is less than 16 pixels, everything may appear too small. However, because the sizes are specified in ems, resizing text in the browser is an option for users.
|