What font units are available in CSS?

Question: What font units are available in CSS?

Answer:

When using CSS to define font sizes with the font-size or font style properties you have several options when it comes to font size units:

em
This is the default font size set in the users' browser preferences. It refers to the width of the letter m in the font used. Font sizes are determined relative to this initial measure.
ex
This refers to the x-height of a font, or the size of the lowercase x in the font. Font sizes are determined relative to this initial measure.
pixels (px)
This refers to the number of pixels in the viewing device. Font sizes are determined relative to the viewing device resolution.

absolute sizes
These are:
xx-small
x-small
small
medium
large
x-large
xx-large
These are font sizes defined and computed by the user agent, there is a recommended scaling of 1.2 between the different sizes. For example, if the medium font is 12pt, then the large font would be 1.2 times larger or 14.4pt. These sizes are completely up to the browser viewing the document and provide very little control to the Web designer.
relative sizes
These are:
larger
smaller

These are interpreted relative to the parent element's font size. As with absolute sizes, the user agent controls the actual size of the fonts used.
percentage (%)
A percentage font size specifies a value in direct relation to the size of the parent element.

For Web pages, the W3C recommends using percentages or ems:

Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets.

Source: Fonts

Using ems or percentages makes your pages more accessible as well.

For print, you should use points or another absolute font size (like millimeters or picas).

There is more information in the article What Font Size Measure to Use.

Jennifer Kyrnin
Web Design / HTML Guide

Explore Web Design / HTML

Must Reads