Absolute units
These have a fixed size. The pixel (px) is the everyday one. Others come from print: 1in equals 96px, 1cm is about 37.8px, 1pt is 1/72 of an inch (about 1.33px), and 1pc is 16px. They are rarely needed on screens outside print styles.
Font-relative units
- em: the font size of the element, or of the parent for font-size.
- rem: the font size of the root html element.
- ch: the width of the zero character, handy for text column widths.
- ex: the x-height of the font.
Viewport units
- vw and vh: 1 percent of the viewport width or height.
- vmin and vmax: 1 percent of the smaller or larger side.
- dvh, svh and lvh: dynamic, small and large viewport heights, designed for mobile browsers whose toolbars appear and disappear.
Percentages and fr
Percentages are relative to a related value, usually the parent size. The fr unit shares the free space in a grid container.
Which unit should you use?
- Text: rem, or clamp() with rem for fluid sizes.
- Component spacing: em or rem.
- Layout widths: percentages, fr or max-width in rem or ch.
- Full-height sections: dvh with a vh fallback.
- Borders and fine details: px.
Tools
Convert with the em, rem and px converter, or build fluid values with the clamp calculator. For em versus rem in depth, see the comparison guide.
Convert instantly. Switch between em, rem and px with your own font sizes.