What is the difference between px and rem?

Pixels are fixed units; rem units are relative to the root font size (html element), which defaults to 16px. So 1rem = 16px, 24px = 1.5rem. If a user increases their browser font size, rem-based layouts scale with it — px-based ones don't.

How do I convert px to rem?

Divide the pixel value by the root font size: rem = px ÷ 16 (with the default root). 20px = 1.25rem, 32px = 2rem, 10px = 0.625rem.

Why should I use rem instead of px?

Accessibility and scalability. Users who set larger default font sizes (common for low vision) see rem-based text and spacing scale proportionally. WCAG guidance favors relative units for text sizing.

What if my root font size isn't 16px?

Set the base value in the converter — some design systems use 10px roots (making 1rem = 10px for easy math) via html { font-size: 62.5%; }. All conversions recalculate against your base.

Should I use rem or em?

rem is relative to the root and predictable everywhere; em is relative to the parent element and compounds when nested. Use rem for most sizing, em for spacing that should scale with a component's own font size (like button padding).

PX to REM Converter — Free Pixel to REM CSS Calculator

Remove Ads

Result

Share on Social Media:

PX to REM Converter — Pixel-Perfect Meets Accessible

Design tools speak pixels; accessible CSS speaks rem. This free converter translates between them instantly in both directions, at any root font size — 16px default or your design system's custom base — with batch conversion for entire spacing scales. In-browser, no signup.

The Formula

rem = px ÷ root font size — with the browser default root of 16px:

px	rem	px	rem
4	0.25	24	1.5
8	0.5	32	2
12	0.75	40	2.5
14	0.875	48	3
16	1	64	4
18	1.125	80	5
20	1.25	96	6

Why rem Wins for Accessibility

Browsers let users set a larger default font size — distinct from zoom — and a meaningful share of users rely on it. Text sized in px ignores that setting entirely; text in rem scales with it. WCAG 1.4.4 requires text to be resizable to 200% without loss of functionality, and rem-based sizing is the most robust way to get there. Media queries defined in rem (not px) also keep breakpoints aligned with the user's actual text size.

The 62.5% Trick — And Its Caveat

Setting html { font-size: 62.5%; } makes 1rem = 10px, so 24px is a tidy 2.4rem. Convenient math, but it changes the meaning of rem across your whole codebase and breaks third-party components that assume a 16px root. Most modern teams keep the 16px default and let tooling (or this converter) handle the division.

Practical Conversion Policy

rem: font sizes, spacing scales, container widths, media query breakpoints.
em: padding/margins that should track a component's own font size.
px: borders (1px hairlines), shadows, and other details that shouldn't scale.

Free and Instant

Both directions, custom roots, batch mode — all computed locally with no account and no limits.

Px To Rem Converter

Result