← All Tools

Pixel ↔ REM / EM Converter

Convert CSS px values to rem, em, pt, %, and viewport units with an adjustable base font size. Includes a bulk converter, a reference scale, and a live size preview.

Base settings

px
px
px
px

Most browsers default html to 16 px. Users can override this in browser settings — that's why rem beats px for accessible typography.

Live converter

px
rem
em
pt
% (of parent)
vw
vh
Preview at this size
The quick brown fox jumps over the lazy dog

Reference scale

Common px values converted at the current root font size (16 px).

pxremempt% of parent

Bulk converter

Paste CSS or a list of px values — every NNpx is rewritten to the target unit, with the original kept as a comment.

Output

When to use what

  • rem — most things: font sizes, spacing, breakpoints. Honors the user's browser zoom / base font preference, so layouts scale predictably for low-vision users.
  • em — relative to the nearest font-sized ancestor. Useful inside components that should scale with their own text (icons, padding inside buttons).
  • px — fine details that should never scale: 1 px borders, box shadows, hairlines, image dimensions tied to physical pixels.
  • % — width/height relative to parent layout box; font-size % is relative to parent font-size (so 62.5% on html makes 1rem = 10 px — a common trick, but it breaks user font-size overrides).
  • vw / vh / vmin / vmax — fluid typography and full-bleed layouts (e.g. clamp(1rem, 2.5vw, 1.5rem)). On mobile, prefer svh / dvh / lvh over vh to avoid the URL-bar jump.
  • pt — print stylesheets only. 1 pt = 1/72 in ≈ 1.333 px at the default 96 DPI.