CSS units
Enter a value and choose the unit to see the same size in every CSS unit, ready to copy.
The same size in other units
- 1.5remroot font size
- 1.5emparent font size
- 150%percent of the parent font size
- 18ptpoints
- 1.5pcpicas
- 0.25ininches
- 0.635cmcentimetres
- 6.35mmmillimetres
- 25.4Qquarter-millimetres
- 1.6667vwpercent of the viewport width
- 2.6667vhpercent of the viewport height
- 2.6667vminpercent of the viewport’s shorter side
- 1.6667vmaxpercent of the viewport’s longer side
Context
PX to REM at 16px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
A point counts as 1.333px, since an inch is 96px and 72pt. The other way round, a pixel is 0.75pt.
How it works
Rem is based on the font size of the html element, which is 16px in every browser unless it is changed. So 24px is 1.5rem. Setting html { font-size: 62.5% } gives 10px per rem and easier mental arithmetic, but it also changes everything built on the default size.
Em is based on the parent’s font size and so compounds when elements are nested: 1.2em inside 1.2em is 1.44 times as large. Percent for font-size works the same way, with 100% equal to 1em. Percent for widths or margins is based on the containing block instead and is not converted here.
Rem is the usual choice for font sizes and spacing, because the page then follows the size the visitor has chosen in the browser. Px in font sizes does not stop zooming but ignores that setting, which the WCAG guidance on resizing text discusses.
Vw and vh are one per cent of the viewport’s width and height, and vmin and vmax of its shorter and longer side. The values depend entirely on the window, so the button takes the size of the window you are using now. On phones vh can change as the address bar appears; dvh, svh and lvh deal with that.
Pt, pc, in, cm, mm and Q are absolute units with fixed ratios in CSS: an inch is 96px, 72pt and 2.54cm. On screen this rarely means real centimetres, because a CSS pixel is not a physical pixel. They are most useful in print stylesheets.
Values are written with a decimal point and at most four decimals, as CSS requires.