px to rem Converter
Pixels to rem and back at any root size, with a copyable table.
About this converter
Type pixels or rem and the other follows, at whatever root font size your project uses (16px default, 10px for 62.5% codebases). Below it, the table of the values you actually reach for — 4 through 64px — each row copying its rem form on click.
Why rem beats px (one real reason)
The case for rem isn't fashion: users who raise their browser's default font size — a core accessibility setting — get proportionally bigger text only where sizes are in rem. Pixel-sized text ignores the setting entirely, which quietly excludes exactly the users who needed it. The mechanics: rem is relative to the root element's font size, 16px by browser default, so 24px = 1.5rem; the old 62.5% trick sets the root to 10px so the arithmetic reads off directly (1.6rem = 16px). And the em-vs-rem distinction that ended the debate: em compounds through nesting (an em inside an em inside an em multiplies), rem always refers to the root — predictable, hence victorious. Media queries in em/rem also respect zoom better across browsers. The other CSS generators — gradients, shadows, the minifier — live in the same drawer.
Frequently asked questions
What is 24px in rem?
1.5rem at the default 16px root (24 ÷ 16). At a 10px root (the 62.5% pattern), it's 2.4rem — set your root size in the converter and read off.
Why use rem instead of px?
Users who raise their browser font size only benefit where text is sized in rem — px ignores the setting. It's the accessibility case, and it's decisive.
What is the 62.5% root trick?
html { font-size: 62.5% } makes 1rem equal 10px, so mental conversion is trivial (1.6rem = 16px). Fine if applied consistently; the converter's root box handles such codebases.
When should I still use px?
Things that shouldn't scale with text: borders, hairlines, shadows, and usually media-query breakpoints' fine detail. Text and spacing are the rem territory.