Friday, November 15, 2013

Which CSS Measurements To Use When

CSS Measurements
Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.

What follows is a list of suggestions, not absolute rules.

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.


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.