CSS Units

contents

Length

The units for length generally fall into two categories: absolute and relative. When crafting responsive designs, it is most often beneficial to use relative units wherever possible. Many of the absolute units that have a defined meaning outside of CSS (e.g. in, cm, mm, pt, etc.) are rarely used – usually for styles targeting printed media.

The table below describes some of the most common and useful relative CSS length units for screens.

Common CSS length units
`em`	The calculated `font-size` of the element. If used on the `font-size` property itself, it represents the inherited `font-size` of the element.
`rem`	Like `em`, but represents the calculated `font-size` of the root element (e.g., the `html` element).
`vh` & `vw`	¹/100^th of the viewport's height and width, respectively
`vmin` & `vmax`	The minimum and maximum, respectively, of `vh` and `vw` (e.g., `vmin` = `vw` in portrait orientation, and `vmin` = `vh` in landscape)
`%`	Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also designates the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g., the width of a containing block), or something else.

While historically the most commonly-used length unit, px is an absolute unit which I highly recommend to avoid if possible. With modern-day devices of varying size and pixel densities, the actual rendered size of a px can be hard to reliably predict and reason about.¹

In fact, the CSS Spec itself quite eccentrically defines an abstract unit of measurement, the reference pixel:²

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

I don’t think that any designer or developer wants to constantly think in terms of a “nominal arm’s length” when specifying precise measurements for user interfaces. For most applications, I recommend using a combination of ems and rems to specify size. A great benefit of these units is that they are inherently responsive in design – your entire application, when sized in ems and rems, will adapt and scale proportionally with the default root font size (1 rem). Additionally, a single rule targeting the font-size of the root element inside of media queries can be used to tweak sizing across your entire application at various breakpoints.

Color

CSS supports several different ways to specify color values, though historically for digital platforms colors are most commonly expressed in the rgb (red, green, and blue) cubic-coordinate system.

With rgb hex notation (#RRGGBB), the value of each three rgb color component values is respectively expressed as a hexadecimal number between 00 and ff (0–255₁₀). For example, “pure” green would be expressed as #00ff00.

rgb color may also be expressed in a functional notation: rgb(rv, gv, bv) where rv, gv, and bv are the rgb values, respectively. The value parameters may be expressed as decimal integers (0–255) or as percentages (0%–100%), but all three must be expressed in the same way. The rgba() function allows for a fourth alpha parameter to change the color’s opacity, expressed as a decimal float between 0 (fully transparent) and 1 (fully opaque).

Colors may also be specified in the hsl cylindrical coordinate system using the hsl() function, which takes three parameters: the hue angle as an integer (0–360), then saturation and lightness each expressed as a percentage (0%–100%). There is also an hsla() function which supports a fourth alpha value parameter.

While CSS defines color keywords – the literal name of colors – their use is not recommended except in the cases of white, black, and transparent, whose exact rgb(a) values are obvious to authors. (It is also unlikely that any named color exactly falls within your branding or UI style guides.)

`calc`

The CSS calc() function can be used to perform calculations to determine property values, like length. The result of the mathematical expression in the function is used as the computed value for the property on which it is specified.

The expression can combine the simple mathematical operators(+,-,*,/) using standard operator precedence rules. You can use different units for each value in your expression as well as nested expressions in parentheses.

calc() is especially advantageous when needing to prescribe property values composed of different units (e.g., calc(80% - 2em)) or for more precisely expressing values whose decimal floating-point representation is non-terminating (e.g., calc(100% / 3) instead of 33.3%).