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. emis 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.