Some new CSS length units (and some lesser-known ones)

Published by marco on

I’ve been using CSS since its inception and use many parts of the CSS3 specification for both personal work and work I do for Encodo. Recently, I read about some length units I’d never heard of in the article CSS viewport units: vw, vh, vmin and vmax by Chris Mills (Dev.Opera).

  • 1vw: 1% of viewport width
  • 1vh: 1% of viewport height
  • 1vmin: 1vw or 1vh, whatever is smallest
  • 1vmax: 1vw or 1vh, whatever is largest

These should be eminently useful for responsive designs. While there is wide support for these new units, that support is only available in the absolute latest versions of browsers. See the article for a good example of how these can be used.

While the ones covered in the article are actually new, there are others that have existed for a while but that I’ve never had occasion to use. The Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units (CSS Values and Units Module Level 3) section lists the following units:

  • em: This one is well-known: 1em is equal to the “computed value of the ‘font-size’ property of the element on which it is used.”
  • ex: Equal to the height of the letter ‘x’ in the font of the element on which it is used. This is useful when you want to size a container based on the height of a lower-case letter—i.e. tighter—rather than on the full size of the font (as you get with em).
  • ch: “Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.” Since all digits in a font should be the same width, this unit is probably useful for pages that need to measure and render numbers in a reliable vertical alignment.
  • rem: The same as em but always returns the value for the root element of the page rather than the current element. Elements that use this unit will all scale against a common size, independently of the font-size of their contents. There’s more to the CSS rem unit than font sizing by Roman Rudenko (CSS-Tricks) has a lot more information and examples, as well as an explanation of how rem can stand in for the still nascent support for vw.