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. If you have a differing opinion or working practice (and a rationale to back it up), please share in the comments.
- 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 reinforces the tendency to create for device dimensions, rather than where your design needs to adapt. Userem
orem
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.) - Don’t use for: typography. (Exception:
- em, ex
- Use for: typography, and elements related to typography (margins, for example), with the understanding that
em
andex
have a subtle “gotchas” when used in complex layouts. Consider usingrem
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
andex
, 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. - 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
- Viewport units (vh & vw)
- Use for: responsive typography; “perfect” responsive containers.
- Don’t use in: media queries, as the viewport will never attain a width of less than 100vw or a height less than 100vh: by definition, those numbers correspond to the current dimensions of the browser window, no matter how large or small the screen or device is. Be aware of the unit’s lack of support in IE8.
- 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
andborder-image
should be used with raw numbers.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.