WCAG 1.0 Double A Checkpoint 3.4

Skip Quick Links

“Use relative rather than absolute units in markup language attribute values and style sheet property values.”

To allow content to scale properly when the visitor "zooms in," sizes should be specified in relative, rather than absolute, units. This is not just a good practice; it is also required for WCAG 1.0 Double A conformance! Sizing and scaling is a surprisingly complex subject – one that is often subject to heated debate in the CSS online community. This is partially because of the web designer community's desire to have greater control over font display, and partially because the existing solutions are imperfect.

Font Sizing

The W3C recommends using "em" as the relative unit for sizing. The “em” unit is defined as “the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.”

In English, that means that 1em is equal to 100 percent of the default font for the browser. For most browsers, that's 16px, which is too large for most designer's taste. We do love our tiny fonts don't we? To get around this, we generally set the initial font value to something smaller than 1em.

Example

Wrong Approach

The problem with this approach is that if the visitor sets the "text-size" setting in Internet Explorer to "smaller" or "smallest," the text becomes so small it is unreadable. As Internet Explorer is so popular and the "smaller" text-size setting is a popular one, this is a real problem.

body {
   font-size: 0.8em;
}
h1 {
   font-size: 2em;
}
p {
   font-size: 1em;
}
			

Correct Approach

The tiny text problem can be overcome by setting the initial font size to a percentage. When this solution is implemented, the font-size changes between the IE text-size settings do not appear to be as drastic, and we can set a sensible initial text size that will resize to a readable size at "smaller" and "smallest" settings.

body {
   font-size: 100%; 
   /* initial font size specified 
   		as a percentage */
}
h1 {
   font-size: 2em;
}
p {
   font-size: 1em;
}
			

Checkmark icon Note: In the above example I have included a comment in the style sheet. CSS comments start with "/*" and terminate with "*/". Everything in between the two is ignored. As style sheets can often be quite long, it is recommended that you comment your styles.

Elastic Design

Another benefit of using ems rather than keywords is that you can use ems to define the dimensions of your entire layout, which will then scale in proportion to the text. You can even use ems to specify the sizes of images to have the entire design scale! However, this approach is somewhat controversial.

Reference

Sizing with Relative Units

Refer to the Matters of Size discussion in the CSS section of this site for additional information on sizing with relative units.