Relative units

Relative units—the relative length units (ems, exes, and pixels) and percentages—are so called because the values set by such units are relative to some other value. Compared to absolute length units, any relative unit would be the better choice to style text for display on screen. Also (except in the case of pixels for users of Internet Explorer for Windows) type sizes set by these units are resizable by the user. (See Scalable text.) Nonetheless, you should also exercise judgment in choosing among relative units. In most cases, ems or percentages will probably be the best choice for styling text for display on screen.

ems

One em equals the type size of the element for which the em unit is being used. Thus, in the style sheet below, line-height equals 24 pixels, or twice the value of p's type size:

p {
 font-size: 12px;
}

p {
 line-height: 2em;
}

When used to set the type size of an element, 1 em equals the type size of the parent element. Thus, in styles1.css, the type size of h1 is 24 pixels, or twice the type size of the parent element, body:

sample1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>A Sample Page</title>
  <link rel="style sheet" type="text/css" href="styles1.css" />
 </head>
 <body>
  <h1>Level-1 heading</h1>
  <p>Some text</p>
 </body>
</html>


styles1.css
body {
 font-size: 12px;
 }

h1 {
 font-size: 2em;
 }

If we change the type size of body to 1em, the body's type size in sample1.html will equal the user's default type size, and h1's type size will be twice that of body's:

styles1.css (revised)
body {
 font-size: 1em;
 }

h1 {
 font-size: 2em;
}

exes

Theoretically, 1 ex equals the height of the lowercase x of the typeface being used. As this image shows, x-heights can vary greatly:

x-heights for garamond, myriand, and algerian set at 24-point

In reality, however, browsers cannot accurately compute x-height; therefore, they guess the value of ex. Most set the value of ex to half the value of em. For this reason, exes, at least for now, are not very useful.

Pixels

A pixel is any of the dots that make up a graphic image. Pixels are relative to the resolution (pixels per inch) of the display device.

This image is 100 pixels tall and 100 pixels wide
An image 100 pixels wide and 100 pixels tall

Unfortunately, users of Internet Explorer for Windows cannot resize text set in pixels. Therefore, since most Web users use Internet Explorer, avoid using pixels for sizing text.

Percentages

Depending on the CSS property to which a percentage value is assigned, it may be relative to a value inherited from the parent element, the value of another property of the same element, or a value of an ancestor element. Percentage values for the font-size property refer to the parent element's type size. Thus, in styles2.css, the value of h1's type size is 200% of body's type size:

sample2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>A Sample Page</title>
  <link rel="style sheet" type="text/css" href="styles2.css" />
 </head>
 <body>
  <h1>Level-1 heading</h1>
  <p>Some text</p>
 </body>
</html>


styles2.css (revised)
body {
 font-size: 1em;
}

h1 {
 font-size: 200%;
}

In CSS, when percentages are used to size type, 100% is equivalent to 1em. Thus, in the style sheet below, the type sizes of both paragraphs (assuming they have the same parent element) are identical:

p.first {
 font-size: .8em;
}

p.second {
 font-size: 80%;
}

To find out whether a property accepts percentage values and how it defines them, see the CSS property table on the World Wide Web Consortium Web site.