[Skip to Contents]

Use relative rather than absolute units

When specifying sizes (font size, text margins etc) in style sheets, use relative rather than absolute units. This way the content of a page will adjust better to the browser window and fonts will be displayed relative to the users specifications or relative to the default settings of the browser.

This allows users to adjust font sizes according to their needs. People with visual impairment, for example, can easily increase the size of text.

Relative units: em, %
Absolute units: px, pt, cm

1 em is the default size of normal text. A header tag, for example with the value of 2 em, would therefore be twice the size of normal text. The same applies to percentages. 100% is the base size. Specifying the font size as 90% would make text slightly smaller.

Text margins can also be easily specified by using percentages, which are calculated relative to the window size or the text container, which might be a table cell, for example.

Some examples:

h1 {font-size : 1.8em} h1 {font-size : 180%} p.smaller {font-size : .9em} body {margin-left : 10%; margin-right : 10%;}

In the last example the whole content of a page (everything inside the BODY tag) has a margin of 10% on either side, the content will take up 80% of the width of the window.

Links

| Access Guide Home | Table of Contents | Definitions | Glossary |