Section 18.3. Font Size


18.3. Font Size

CSS 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.

font-size

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 Sizes

Before 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 Keywords

Absolute 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> 

A Word About Ems

In traditional typography, the em has been a measurement of width approximately equal to the width of the capital letter M for the given typeface. Using that measurement, you arrive at the width of an em-space or an em-dash.

As typography has adapted to digital media, the em has become a measure of width and height, or often height alone. For purposes of CSS, the em is calculated as the distance between the baselines when the font is set without any additional interlinear space , also called leading (extra space added between lines of text for legibility).

This distance forms the basis of an implied em-square measurement based on the design of the typeface (also called the em-box). It is possible that ascenders and descenders of a particular typeface may exceed the boundaries of the em-square, or that no characters of another face fill it completely. The font's em-box measurement can be used as a relative unit of measurement.


Figure 18-3. Text sized with absolute keywords


This figure and other figures in this book use inline styles as a means to save space on the page. In the real world, inline styles should be avoided in favor of external or embedded style sheets.


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.

Internet Explorer 5 and 5.5 for Windows use small as the default, which can seriously throw off an attempt to use absolute size keywords throughout a document.


18.3.3. Relative Size Keywords

There 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 keywords


18.3.4. Percentage Measurements

One 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



Style sheet

     body {font-size: 24px;}     ul {font-size: 80%;} 


Markup

     Lorem ipsum dolor sit amet.     <ul>       <li>Lorem ipsum</li>       <li>Dolor sit amet</li>       <li><ul>            <li>Consectetuer adipiscing</li>            <li>Elit pellentesque</li>              <ul>                 <li>Pharetra urna </li>                 <li>In laoreet tincidunt</li>             </ul>       </ul>   </li> </ul> 

18.3.5. Length Measurements

The 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:

  • pt (points, 1/72 of an inch in CSS 2.1)

  • pc (picas, 1 pica is equal to 12 points)

  • mm (millimeters)

  • cm (centimeters)

  • in (inches)

The relative length units are:

  • em (distance from baseline to baseline with no extra line space),

  • ex (approximately the height of the letter "x" in the font)

  • px (pixels; in CSS, pixels are relative because their actual size can vary by display resolution when the resolution is very different from the typical 75-100 dpi, e.g., on 300 dpi printers)

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 values

Because 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 pixels

You 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 ems

Ems 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.

See all 264 of Owen Briggs' screenshots, as well as solutions for dealing with inconsistent font sizing, at thenoodleincident.com/tutorials/box_lesson/font/index.html.





Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net