Units of Measurement

CSS is all about setting the size and dimensions of things. It supports a variety of units of measurement, each with their own quirks, benefits, and drawbacks to their use. Some of these are more ideal than others in certain situations, or for certain uses. Others behave differently depending on where they're used. As a result, it's worth knowing them all, and the how and why of their behavior.

A word on cascading units

An important distinction between different units of measurement is their behavior when it comes to relative sizing, or cascading. Some units are relative, and if you make the parent bigger or smaller, the child elements will grow in size as well. Others don't cascade; if you set them on a child element, they will stay that way unless you explicitly resize that element.

Cascading units are useful for controlling the size of the entire document. Much like how CSS saves you from having to fixing the styling of every page, cascading units saves you from having to fix the size of every element when you want to resize everything, say, for mobile layouts.

Pixels

Pixels are (in theory) the simplest unit of measurement. A pixel is a pixel. If you want your text to be 24 pixels tall, you just set font-size: 24px; in your stylesheet.

This heading has a font size of ten pixels.

Meanwhile, this one has a font size of 24 pixels.

In practice, this is a little messier. Thanks to widely-varying screen DPIs and pixel densities, what might be easily readable on your screen might be much too small on another. (Even if the text is exactly that tall, line height and kerning can vary between devices and browsers.) Pixels in CSS are also not always equivalent to screen pixels, but that's even messier and more technical. They also don't cascade, meaning it's a lot more difficult to adjust sizes in a stylesheet full of them.

Pixels are best used if you're working around assets (like images) with defined dimensions. Otherwise, relative units will be much cleaner and simpler to work with.

Em values

Em values are a bit tricky to understand at first, but very powerful. Ems essentially use the width of the uppercase M in the current font as a unit of measurement, meaning any changes to the font size will resize the rest of the page as well, provided you've used ems for everything. Generally, 1em defaults to sixteen pixels across, but this can vary.

This heading has a font size of `1em`, just like the rest of the body text.

This one's set to `2em`, and is double the size of that one.

Because ems are very relative and cascade, doubling the size of a bit of text is as easy as setting it to 2em. Working in ems makes it easy to build responsive layouts for differently-sized screens.

Percentages

Percentages are simply percents of the parent. To have a <div> that's exactly half the width of its parent, set its width to 50%. (Percentages only work if the parent element has defined dimensions. Otherwise, math can't happen.)

Heading, sized 20%.

50% of the font size of the parent.

And 200% of the font size of the parent.

Percentages have one extremely useful quirk to them, and that's making ems less unwieldy to use. Remember how I said em values are usually equal to sixteen pixels? Sixteen is a weird number to calculate out for sure, but if you set font-size: 62.5%; on the <body> element, one em will now be equal to ten pixels throughout the rest of the stylesheet. Thus, if you wanted a container to have a width of 800 pixels, you'd simply set its width to 80em. This is commonly used and supported.

Point values

Point values are just like the point values you'd use in a word processor. Like pixels, they don't cascade, but their strangest behavior is how wildly point values can vary on the screen between devices, while staying absolutely exact when the page is printed. This has to do, again, with screen DPI. Since a point is a 1/72 of an inch, the actual size will differ depending on the device.

You shouldn't use point values for anything on-screen, but since they're exact on paper, they're useful if you have a separate stylesheet for print, using a media query.

Keywords

Finally, you can set simple keywords for your font sizes. xx-small, x-small, small, medium, large, x-large, and xx-large are all valid values for keywords.

This is an `x-small` heading.

This one's set to `medium`.

And this big boy's set to `xx-large`.

All of these are exact and don't cascade.

There are also two relative keywords, smaller and larger, that do cascade. Naturally, it makes the element's text either smaller or larger than the parent's. These especially come in handy for being able to set a single font size across the entirety of the page, manipulating that value using JavaScript, and having the rest of the page scale with it.

Which units to use, where, and why

If possible, use relative units. Any relative unit will be less clunky and easier to manage than a fixed unit. Sometimes, fixed units serve a valuable purpose (like if you're working around assets with exact pixel dimensions, as stated), but generally, you're better off using a relative unit.

Beyond that, em values are probably your safest bet. Because of their relation to font sizes, you can scale up both the text and the layout for a smaller device and have a page just as usable as if it was being browsed on a desktop.

Summary:

Sizes and lengths in CSS can be described with five main units: pixels, em values, percentages, points, and keywords.
Some units cascade, which means if you set them on a parent element, any child elements will be sized relative to it. Change the parent, change the child. This is useful for building responsive layouts that look nice at any size.
Pixels are exact and don't cascade. A font set to 12px will be twelve pixels in height, at least in theory.
- DPI becomes a concern using pixel values. Different screens have different pixel densities.
- Because they're exact, they require more maintenance than setting a relative value. To scale up a pixel layout requires changing every single value in the stylesheet.
Em values represent the width of the uppercase M using the current font. Traditionally, one em is sixteen pixels.
- Ems cascade and are very relative; setting an em value on the body text will affect the rest of the page.
- 2em is exactly twice the length of 1em, which is the default font size on the body. If you wanted to make all the text bigger for a phone screen, all you'd need to do is change that 1em, and the rest would resize automatically.
- This makes em values very ideal for layout and font sizing.
Percentages are percents of the parent. If the parent is 100 pixels across, a width of 50% on a child element is 50 pixels. Percentages naturally cascade.
- Percents are especially useful for making em values easier to deal with. Setting font-size: 62.5% on the body will make one em equal ten pixels. 800 pixels is 80em, much easier to remember and do mental math with.
Point values are exact...but only when you print the page. Because of DPI and other factors, using points on your site will cause wildly different sizes. If you have a separate stylesheet for printing, only then is using point values a good idea.
Keywords are sometimes relative, sometimes exact. Setting the font size to small means the text will be small, but setting it to smaller means it will be smaller than the parent, though potentially still quite big.
- Keywords are useful if you have Javascript on your page for dynamically resizing text. Setting a size on the body and then larger and smaller elsewhere means you only need to change the parent to scale the entire page.
You can mix units freely; if you set the width of the page in ems, the sidebar can be set in pixels and the <main> element set as a percentage. Likewise, if you have the body font size set in pixels, you can use the smaller and larger keywords to control sizing relatively.
Which is truly the best unit to use? Ems, when you get used to them, are very convenient and clean. While they all have their uses, em values are the way to go in most cases.