CSS Units of Measurement

I’ve dabbled in CSS for a while now, but I never bothered to read up on the different units of measurement. I’m only familiar with pixels, ems, and percentages, but it turns out that CSS actually has eight units of measurement. They’re divided into relative and absolute length units.

Relative Length Units

The World Wide Web Consortium considers the relative units to be the following:

• em: the ‘font-size’ of the relevant font
• ex: the ‘x-height’ of the relevant font
• px: pixels, relative to the viewing device

Percentages are also considered relative, of course, but I guess they’re in their own category.

Though pixels are considered relative, they’re pretty absolute when it comes to font sizes. Did you know that Internet Explorer won’t let you resize the font if it’s been set in pixels? That’s why you should always use ems or percentages for font (unless you have a really important reason not to). The ex unit is also relative, but it’s almost never used because it isn’t well-supported.

Absolute Length Units

Here are the absolute length values, none of which I ever saw before:

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS2 are equal to 1/72th of an inch.
• pc: picas — 1 pica is equal to 12 points.

But nothing is truly absolute when it comes to web design. The W3C says that these units “are only useful when the physical properties of the output medium are known”. In other words, they’re never used for websites. As explained in an article about CSS Units, “The absolute unit is a myth…. Any browser that truly attempted to treat pt as 1/72nd of a physical inch would just end up mis-rendering Web sites.”

So, it turns out that the three units I already knew about are the only three you need: pixels, ems, and percentages. Nice and simple.