PX to REM / EM Converter (2026) - CSS Unit Math

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.

PX to REM / EM Converter