All the CSS sizing units you didn’t know existed

2015-11-11

If you’re a front-end developer/designer, you probably know px and em sizing units. But did you know there’s 15 of them?

em: This unit represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.
ex: This unit represents the x-height of the element’s font. On fonts with the ‘x’ letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.
ch: This unit represents the width, or more precisely the advance measure, of the glyph ‘0’ (zero, the Unicode character U+0030) in the element’s font.
rem: This unit represents the font-size of the root element (e.g. the font-size of the element). When used on the font-size on this root element, it represents its initial value.
vh: 1/100th of the height of the viewport.
vw: 1/100th of the width of the viewport.
vmin: 1/100th of the minimum value between the height and the width of the viewport.
vmax: 1/100th of the maximum value between the height and the width of the viewport.
px: Relative to the viewing device.
mm: One millimeter.
cm: One centimeter (10 millimeters).
in: One inch (2.54 centimeters).
pt: One point (which is 1/72 of an inch).
pc: One pica (which is 12 points).
mozmm: An experimental unit which attempts to render at exactly one millimeter regardless of the size or resolution of the display. This is rarely actually what you want, but may be useful in particular for mobile devices.