Which CSS Measurements To Use When
-
Pixels (px)
Use for: hairline borders and general elements when creating fixed-width designs; values for CSS shadow displacement. Avoid using in @media breakpoints, as doing so breaks pages when they are zoomed: use rem or em instead.
Don’t use for: typography. (Exception: setting a base font-size in a CSS reset). -
Percentage (%)
Use for: making responsive images and containers; setting height on the body in some cases.
Don’t use for: typography. (Exception: font-size CSS reset.) - em, ex
Use for: typography, and elements related to typography (margins, for example), with the understanding that em and ex have a subtle “gotchas” when used in complex layouts. Consider using rem as an alternative. - Points and picas
Use for: print stylesheets.
Don’t use for: anything else. - rem
Used as: a more robust and predictable alternative to em and ex, and employed for the same purposes, including @media query breakpoints. Don’t use: if you wish to support IE8 and earlier. Or, use the unit but include a fallback (by providing an alternate measurement in a more common unit before the rem measurement) or a polyfill. - Viewport units (vh & vw)
Use for: responsive typography; “perfect” responsive containers. What not to use the units for is difficult to determine, as vh & vw are very new and have yet to be fully exploited in web design. Do be aware of their lack of support in IE 8, and allow for fallbacks. - Inches (in) and Centimeters (cm)
Use with: print stylesheets, especially page margins
Don’t use for: anything else. - Character (ch)
Use when: sizing and adjusting monospaced fonts. Be aware of browser support limitations. - Grid (gd)
Use for: experimental layouts; the unit is only supported in IE10+ at this moment.
Polyfills are beginning to appear, however. - Raw numbers
While almost every CSS property requires that the measurement system be specified in the declaration, a few are best used with plain integer or floating-point values. In particular, line-height and border-image should be used with raw numbers.