Photograph of a wooden ruler

While CSS has many ways to measure linear distance, all of them can be broadly classified into two groups:

  • absolute values that relate to a real-world system, such as picas or pixels.
  • relative units that relate to the element itself, or its context.

As a general rule, relative units are preferred for responsive design; absolute units are for small fixed-width elements such as hairlines.

Absolute CSS UnitAbbreviationRelative CSS UnitAbbreviation
PixelspxPercent%
PointsptEmem
InchesinExex
CentimeterscmRoot emrem
PicaspcViewport widthvw
Quarter-millimeterqViewport heightvh
Viewport minimumvmin
Viewport maximumvmax
characterch
Fractionfr

For more information, I've linked lesser-known units to associated in-depth articles that explain them thoroughly.

  • 1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font).
  • ch is the equivalent of em, but applied to the width of the 0 (zero) numeral of the chosen font.
  • fr relates to the CSS grid: it represents the fraction of space that a grid module takes up, relative to other modules. As such, it is a special unit of measurement, and can't be used outside the CSS grid context.

A few tips and pointers:

  • You never need to specify units when declaring a length value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared: 2em, 2px, etc.
  • All systems of CSS measurement can take floating point values: 2.25rem, 5.3cm, etc.

Working out which CSS measurement system to use where on a web page can be confusing, even intimidating; I've created a simple guide to help the perplexed.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.