The examples and code snippets shown so far, have used pixels as the measurement unit. CSS includes many other possibilities that you
need to be aware of. The following table lists the various units:
| Unit name |
Description |
Type |
| cm |
Centimeters |
Absolute |
| mm |
Millimeters |
Absolute |
| in |
Inches |
Absolute |
| pt |
Points |
Absolute |
| pc |
Picas |
Absolute |
| em |
EMs |
Relative |
| ex |
x-height |
Relative |
| px |
Pixels |
Relative |
Centimeters (cm)
This is an absolute measurement given in centimeters. Approximation only.
Millimeters (mm)
This is an absolute measurement given in millimeters. Approximation only.
Inches (in)
This is an absolute measurement given in inches. Approximation only.
Points (pt)
This is a traditional typographical measurement and is absolute. It was created in the USA years ago, and therefore
is based on inches. There are 72 points/inch. Approximation only.
Picas (pc)
This is also a traditional typographical measurement and is absolute. One pica is equal to 12 points.
EMs (em)
This is a relative measurement. An em's size is based on the font-family in use. A value of 1em means "use the same font size as my
parent element". So if the parent is using the browser's default font, so will this element. If this element uses 2em, the font will
be twice the size as that of its parent. In any case, using em as the size unit for your fonts is the prefered method. This is due to the
fact that modern browsers allow users to increase or descrease the size of the "default base font". So, if you base your font sizes on the base
font, all the fonts will scale up or down according to the user's desire. This is an important aspect of "accessability", which means making the
web accessable to people with visual (and other) impairments.
X-height (ex)
This is (in our opinion, at least) a somewhat strange unit. It based on the height of the lower-case letter "x" for the default font.
Pixels (px)
This is the most widely used unit. It is the prefered unit for images (photos, logos, etc;) because they typically have a resolution measured in
pixels. However it is not the preferred unit for fonts. See the EM description above for the reason.
