Use relative rather than absolute units in mark-up language attribute values and style sheet property values.

(see guidelines for overcoming access barriers)

For example, in CSS, use

font-size : small;

font-size : 100%

rather than absolute pixels or 'pt' or 'cm', which are absolute units. If absolute units are used, ensure that the rendered content is usable.

By using relative units of measurement the web developer hands absolute control of the appearance of the web page to the user. This allows the user to increase (or decrease) the font sizes on a page through their browsers control bar, for easier reading.

This site uses relative units for text. Try increasing or decreasing the text size in your browser (instructions for changing text size)

Example:

Using relative & absolute units in the paragraph:

This is a paragraph where the text size is set to 100%.

This is a paragraph where the text size is set to 75%.

Code for a simple style sheet


p.normal { 
   font-size : 100%;
}

p.small {
   font-size : 75%;
}

Save this code in a separate .css file and link to it from within the html. The html page should look like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
			"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>CSS example</title>
   <link href="example.css" rel="stylesheet" type="text/css">
</head>
<body>
   <p class="normal">This is a paragraph where the text size is set to 100%.</p>
   <p class="small">This is a paragraph where the text size is set to 75%. </p>
</body>
</html>