CSS Text Sizing

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it�s different in another browser

Pixels: IE PC does not resize text. Example: body {font-size:12px;}

EM: IE PC displays unreadable small text when the users browseris set to smaller and em is less than 1. Example: body {font-size: 0.8em;}

Percentage usually works. Example: body {font-size: 80%;}

Keywords usually works. Example: body {font-size: smaller;}

Table of Font Sizes

100% = 1.0em = 16px = 15pt
95% = 0.95em = 15px = 14pt
90% = 0.9em = 14px = 13pt
85% = 0.85em = 13px = 12pt
80% = 0.8em = 12px = 11pt
75% = 0.75em = 11px = 10pt
70% = 0.7em = 10px = 9pt
65% = 0.65em = 9px = 8pt

Absolute Font Sizing Keywords

Several absolute font-sizing keywords are available. The font size is determined from a browser preset and the element will not inherit its parent’s size.

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

Although most browsers support these keywords, the exact sizes will differ. They are a fairly crude method of font sizing and are generally avoided by most developers.

Relative Font Sizing Keywords

Two relative font-sizing keywords are available. The font is sized according to its parent element:

font-size: smaller;
font-size: larger;

For example, if the parent has a font size of ‘medium’, a value of ‘larger’ will set the element to ‘large’. Other font units are normally altered by a factor of around 1.2 but, again, there is no standard and browser results will differ.

Absolute Lengths

The font-size property can be assigned an absolute length:

mm: millimeters, e.g. 10mm.
cm: centimeters, e.g. 1cm ( = 10mm).
in: inches, e.g. 0.39in ( ~= 10mm).
pt: point, where 1pt is generally assumed to be 1/72 inch e.g. 12pt.
pc: pica, where 1pc is 12pt
px: pixel, e.g. 14px.

In general, there are issues with all these measurement units. Millimeters, centimeters and inches are inaccurate for a screen-based medium. Points and picas are unreliable since systems can use different dpi settings. Pixel appears to be the most suitable, but it can lead to accessibility issues because the text cannot be resized in IE.

Relative Lengths

The font-size property can be assigned a unit that it relative to its parent’s font size:

em: 1em is equivalent to the current font size, so 2em is twice as large.
%: 100% is equivalent to the current font size, so 200% is twice as large.
ex: 1ex is equivalent to the height of the letter ‘x’ in the current font.

Few developers use ‘ex’, but it can be useful in some situations where you need fine-grained font sizes, e.g. 1ex rather than 0.525em.

Percentage and ‘em’ sizes are equivalent, e.g. 50% = 0.5em, 100% = 1em, 120% = 1.2em, etc. Some browsers exhibit subtle differences but it’s rarely a major problem. If you want to save every byte, you could choose the shortest definition, i.e. 50% is shorter than 0.5em and 1em is shorter than 100%.

CSS Fonts text size pt em %