B.39. font-size

This property lets you set the size of the font displayed in an element.

You have several different methods to choose from. You can select an absolute font size, or specify the size relative to the font size of the parent element. If you choose an absolute size, you can specify an exact CSS length (e.g. in pixels or points), or a font size constant (e.g. small), which yields a fixed, browser-specific size. If you choose a relative size, again you have the choice between a CSS relative length (e.g. in ems or a percentage), or a relative size constant (larger or smaller).

Inherited: Yes, but in the case of relative measurements, the computed value is inherited.

See also: Section B.37font

B.39.1. Value

As outlined above, this property supports a range of different value formats:

Absolute CSS measurements

A CSS length measurement in pixels (px), points (pt), picas pi, centimeters cm, millimeters (mm), or inches (in).

Absolute size constants

Any of the following absolute size constants:

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

The actual sizes of these constants are up to the browser to determine, and are generally smaller in Mac OS than in Windows browsers. The differences between font sizes are also browser-specific, but the standard suggests a factor of 20% between adjacent values (i.e. large is 20% bigger than medium).

Relative CSS measurements

A relative CSS measurement, in ems (em), exes (ex), or percentages (%). This will set the font size of an element relative to that of its parent element.

Relative size constants

Either of the following size constants:

• smaller

• larger

The amount by which to adjust the parent's font size for the element is left up to the browser, but the spec suggests a factor of 20%. According to this suggestion, smaller is roughly equivalent to 80% or 0.8em, and larger is roughly equivalent to 120% or 1.2em.

Initial value: medium (see compatibility note for Internet Explorer for Windows).

B.39.2. Compatibility

CSS Version: 1

All CSS-compatible browsers support this property.

In Internet Explorer for Windows (up to and including version 6.0), the initial (default) font size is small instead of medium. In other words, Internet Explorer takes a font-size setting of small to mean the user's selected default font size. medium, therefore, becomes one step larger than the default font size. IE 6.0 corrects this in standards-compliant mode, but for all previous versions you'll need to use a separate, browser-specific style sheet if you intend to design for them with absolute font size constants.

B.39.3. Examples

This style rule sets the default font size for all elements in the document to 11 points. Because font-size is inherited, all elements that don't define their own font-size should inherit this value:

body {
  font-size: 11pt;
}

In practice, many older browsers do not allow font properties to be inherited by certain elements (tables, for example), so a more aggressive rule is needed:

body, p, blockquote, li, td, th, pre {
  font-size: 11pt;
}

This style rule illustrates a common faux pas among inexperienced developers:

ul, ol {
  font-size: 80%;
}

Because the computed value of the font-size property is inherited, not only will lists have a font 20% smaller than the body text, but lists nested within other lists will have a font size 20% smaller than that! Similarly, lists nested two levels deep will be 20% smaller again (just over half the size of the body text). To avoid this unwanted domino effect, you must add a second style rule so that they inherit their parent's font-size:

ul ul, ul ol, ol ul, ol ol {
  font-size: inherit;
}