Skip to converter
Veomark

Free · Instant · No signup

PX to REM / EM Converter

Convert pixels using a base font size.

Page updated 2026-09-04.

PX to REM / EM Converter visual
Sponsored
QuotVid free Pinterest automation trial - auto-post videos every day

Calculator

CSS pixel value to convert. Default 16 px.

Root font size on html. Default 16 px (browser default).

Calculated Results

REM

1 rem

1.0000 rem

EM

1 em

1.0000 em

Sponsored
QuotVid daily quote videos across TikTok, Instagram, YouTube, Pinterest, and Facebook

Convert design pixels to CSS rem units

Handoff specs arrive in px while modern CSS prefers rem for accessible scaling. Enter px and root font size, read rem instantly.

Default 16 px input at 16 px base is 1 rem, the spacing unit in many component libraries.

Copy exports px, rem, em, and base in one line for Slack or ticket comments.

Typography and dev tooling

Preview font stacks on the Web Safe Fonts Preview at the rem size you convert here.

Ship minified CSS with the CSS Minifier after token updates.

JSON config spacing sometimes lives beside CSS; validate JSON in the JSON Formatter on the same PR.

Practical conversion tips

Divide by 16 mentally for quick checks: 24 px = 1.5 rem at default base.

Change base when the project sets html { font-size: 62.5%; } for 10 px rem math.

Rerun when design rebases from 14 px body to 16 px body so components stay aligned.

Frequently Asked Questions (FAQ)

How are rem and em calculated?

rem = px / base font size. em uses the same formula on this page when parent equals root. Default 16 px with base 16 yields 1 rem and 1 em.

What base font size should I use?

Match your html or :root font-size. Browser default is 16 px. Design systems often keep 16 or use 10 for easy mental math (10 px = 1 rem).

Can I convert zero pixels?

Yes. Zero px yields 0 rem and 0 em. Negative px is blocked with an alert.

Does em differ from rem on this page?

Values match when base equals parent size. Nested components with different parent font-size need manual em adjustment; this tool documents em relative to the base you enter.

Why convert px to rem instead of leaving pixels?

rem scales with the root font size, so user zoom and your html font-size still move the design. em scales with the parent font-size. This page uses one base size (default 16px) for both. Nested em in CSS can compound; rem does not. Convert UI spacing to rem unless you have a reason to use em.

You might also need