CSS Measurements

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.
This entry was posted in Dev. Bookmark the permalink.

Leave a Reply