CSS Unit Playground
Convert any CSS length between px, rem, em, %, pt, vw, vh and the rest, live, with your own root font size and viewport.
Context: root 16px, element 16px, viewport 1920x1080
Equivalents
- px
- rem
- em
- %
- pt
- cm
- vw
- vh
More units: in, mm, Q, pc, vmin, vmax, ch, ex
- in
- mm
- Q
- pc
- vmin
- vmax
- ch
- ex
ch and ex are font-dependent: ch is the advance width
of the "0" glyph and ex is the x-height of the current font. This playground
approximates both as half the element font-size, which is close for most
sans-serif UI fonts but not exact. Measure in DevTools when a layout really depends on it.
Preview at this size
16px = 1rem = 100% of the base
The quick brown fox jumps over the lazy dog
How it works
Type a number, pick its unit, and every other CSS unit is worked out live. The absolute units follow the fixed ratios in the CSS Values and Units Module Level 4 specification, where 1in = 96px, 1pt = 1/72in, 1pc = 12pt = 16px, 1cm = 96/2.54px, 1mm = 1/10cm and 1Q = 1/40cm. So 96px is exactly 1in, 72pt, 6pc, 2.54cm, 25.4mm and 101.6Q on every screen.
The relative units need context, so you supply it. rem is measured against the
root font-size (16px in every browser default), em, ch and
ex against the element's own font-size, vw, vh,
vmin and vmax against the viewport, and % against
whatever length you say 100% stands for. Press "Use my viewport" to drop in the real size of
this browser window.
Everything is computed in your browser with plain JavaScript. Nothing is uploaded, there is no sign-up and there are no ads. Copy a single value with the button next to it, or take the whole table at once with Copy all or Download .txt.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. Browsers default to 16px, so 24px is 24 / 16 = 1.5rem and 1rem is 16px. Type the pixel value into the playground and the rem row updates instantly. If your project sets html { font-size: 62.5% } (10px) or any other base, change the "Root font-size" field and every rem value is recalculated for that base.
Are the CSS unit conversions exact?
The absolute units are, because CSS fixes them by definition in the CSS Values and Units Module Level 4 specification: 1in = 96px, 1pt = 1/72in, 1pc = 12pt = 16px, 1cm = 96/2.54px, 1mm = 1/10cm and 1Q = 1/40cm. That is why 96px is exactly 1in, 72pt, 6pc, 2.54cm, 25.4mm and 101.6Q. The relative units are exact for the context you enter. The one approximation is ch and ex, which depend on the font: ch is the advance width of the "0" glyph and ex is the x-height, and this tool estimates both as half the element font size.
When should I use rem, em, vw or px?
Use rem for font sizes and most spacing so a visitor who changes their browser text size scales your whole layout. Use em when a value should follow the element's own font size, such as padding on a button. Use vw and vh for things that should track the viewport, like a hero section height or a fluid heading, keeping in mind that vh on mobile changes as the address bar hides. Keep px for hairlines, borders and anything that must not scale.