a style guide

Keywords

Like text sized with relative units, text sized with absolute and relative keywords is resizable by the user.

Absolute keywords

In CSS, there are seven absolute keywords:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Absolute keyword values are defined relative to each other. Most browsers assign the default type size to medium. A major problem with using absolute keywords is that text whose size is set to x-small may be too small to be readable in some browsers.

Relative keywords

There are two relative keywords:

• larger
• smaller

Like ems, relative keywords inherit their values from the parent element. For example, consider the style sheet and the markup below:

p {
 font-size: medium;
}

em {
 font-size: larger;
}

<p>This sentence has an <em>emphasized</em> word.</p>

Based on the style sheet, the markup will display thus:

Although relative keywords are a good choice for sizing text, percentages and ems allow you to size text more precisely.