Units of Measure Guidelines

By Magaly Rivera

This is a quick point of reference to apply the Checkpoint 3.4 of W3C's Techniques for Web Content Accessibility Guidelines 1.0 which states: "use relative rather than absolute units in markup language attribute values and style sheet property values".

Techniques:

Use the "em" unit to set font sizes.
Use relative length units and percentages. CSS allows you to use relative units even in absolute positioning. Thus, you may position an image to be offset by "3em" from the top of its containing element. This is a fixed distance, but is relative to the current font size, so it scales nicely.
Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images.

Use "Em" to Set Font Sizes

When specifying font sizes, use relative units rather than absolute units. Relative units define size in measurements like "ems" (em) or percentages (%). Using relative units will allow visually-impaired (unimpaired?) users to adjust the text size to suit their needs and preferences, and will more easily scale text and other elements to one medium or device to another.

Most browsers offer a range of accessibility options that includes allowing users to adjust the font size.

Browsers default font size for rendering text when no CSS is specified corresponds to a font-size value of 100%, 1em or medium.

The following are examples of how to apply these techniques:

Example 1: Set the body (or html) font size. This will make calculating child lengths easier.

	body {font-size:0.75em;}

The browser default in pixels is 16. The formula to change the base text size for the HTML document is:

	text size in pixels / body text size in pixels = size in EMs

An in,

	12px / 16px = .75em

Example 2: Set an equivalent of at least 18px font size for the <h1> (1 / 12 x 18 = 1.5em).

	h1 {font-size: 1.5em}

Apply text-sizes to all headings to ensure consistency across browsers, for example:

   h1 {font-size:1.5em;}
   h2 {font-size:1.333em;}   
   h3 {font-size:1.167em;}
   h4 {font-size:1.083em;}
   h5 {font-size:1em;}
   h6 {font-size:0.917em;}

Example 3: em values are relative to the parent element.

	#footer {font-size: 0.833em;}

The text within footer element would inherit its size from the body element - its parent. This implies that size text always is relative to the parent element when using ems.

	child pixels / parent pixels = child ems

An in,

	10 / 12 = 0.8333

Use Relative Length Units and Percentages

Relative length units and percentages are "relative" to another length property, such as the screen resolution, the dimensions of the viewing area and the user's preferences. Using relative length units will ensure that documents are consistent across browsers and devices, as well to transform gracefully regardless the user's screen viewing area, resolution or magnification.

Example 4: Set elements like margin and padding using em or percentages.

	body {margin-left: 15%; margin-right: 10%;}

Use absolute length units sparingly.

Additional Notes

Use em and percentages to specify interlinear space (the space between lines of text).
Use operating systems and readable fonts. Preferably Sans-serif fonts such as Arial, Tahoma, Trebuchet MS, and Verdana.
Use a limited number of fonts.
Avoid small font sizes.
Do not relay on the font variation, placement or size to convey meaning.

References

Schaeffer, Kyle. "CSS Font-Size: em vs. px vs. pt vs. percent". kyleschaeffer.com, 14 Oct 2009. 20 April 2010. <http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/>.
W3C. "Care With Font Size." 9 April 2010. 20 Apr 2010. <http://www.w3.org/QA/Tips/font-size>.
Jon Tan. "The Incredible Em & Elastic Layouts with CSS." 25 Sep 2007. 20 April 2010. <http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css>.

Get in Touch

Send me a note and say hello.