CSS Unit Converter

Convert between px, rem, em, vw, vh, and pt instantly.

Presets:

Value

Unit

Root font (px)

Viewport width (px)

Viewport height (px)

Active Input: 16pxRoot Font Size: 16pxViewport Size: 1920x1080pxEquivalent in px: 16px

Unit	Value	Copy CSS
px(input)	16
rem	1
em	1
vw	0.833333
vh	1.48148
pt	12

CSS Custom Properties

:root {
  --converted-px: 16px;
  --converted-rem: 1rem;
  --converted-em: 1em;
  --converted-vw: 0.833333vw;
  --converted-vh: 1.48148vh;
  --converted-pt: 12pt;
}

JSON Mapping

{
  "px": "16px",
  "rem": "1rem",
  "em": "1em",
  "vw": "0.833333vw",
  "vh": "1.48148vh",
  "pt": "12pt"
}

CSS units explained

px is an absolute pixel — it never scales. rem is relative to the root font-size (usually 16 px) — preferred for spacing and typography because it respects user browser zoom. em is relative to the current element's font-size (which makes it tricky in nested elements; at root level it equals rem). vw / vh are 1% of the viewport width / height — great for fluid layouts. pt is a print unit: 1pt = 96/72 px ≈ 1.333 px. For a deeper dive into unit-aware spacing, try the PX to REM Converter.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Converting a pixel value into rem for a scalable stylesheet.
Working out what a viewport unit resolves to at a given width.
Converting a print unit into pixels for a screen mockup.
Working out what a vw value resolves to at the breakpoints you actually support.
Comparing em against rem for a nested component.

Frequently Asked Questions

What is the difference between em and rem?: em is relative to the element's own font size and compounds through nesting — three levels of 0.9em is 0.729 of the root. rem is always relative to the root, which is why it is the safer default for spacing and type scales.
Which units are absolute?: px, pt, pc, in, cm and mm — all fixed to each other by definition, with 1in = 96px = 72pt exactly. None of them corresponds to a physical measurement on screen; the ratios are a coordinate system that the browser maps to hardware pixels.
When should I use px?: For things that genuinely should not scale with text — a hairline border, a fixed icon size, a shadow offset. For font sizes and spacing, px ignores the user's browser setting entirely, which is a WCAG 1.4.4 failure at 200% zoom.
What do the viewport units do?: vw and vh are 1% of the viewport width and height. The mobile complication is browser chrome that appears and disappears while scrolling, which is why svh, lvh and dvh were added — small, large and dynamic viewport height.
What is ch and when is it useful?: The width of the 0 glyph in the current font, which makes it the natural unit for line length. Setting max-width: 65ch gives roughly the 60–75 character measure typography recommends, and it adapts automatically when the font changes.

Common errors and gotchas

Assuming the root font size is 16px, which a user or a stylesheet can change.
Confusing em with rem, where one is relative to the parent and the other to the root.
Converting a media-query breakpoint to rem without knowing it uses the initial font size.
Using viewport units for type without a clamp, which becomes unreadable on small screens.
Treating pt as a screen unit, which it is not — it is a print measure.