Pixel to REM Converter

Browsers default the root font size to 16px. One rem equals the root font size, so 1rem = 16px out of the box, and 24px = 1.5rem, 12px = 0.75rem. The tool defaults to a 16px base; type a pixel value and see the rem instantly, or flip to rem-to-pixel mode if you're reading a stylesheet that uses rem. The conversion happens on every keystroke with no Calculate button.

REM matters because users can change their browser default from 16px to anything they like, usually for accessibility. If your CSS uses px everywhere, the user's setting is ignored and your text stays the size you hard-coded. If your CSS uses rem, every text size, padding, and spacing value scales with the user's preference. WCAG accessibility guidelines effectively require this; users with low vision who set their browser default to 24px depend on REM-based sites to render readably.

REM is always relative to the root html element. EM is relative to the parent element's font size, which means EM compounds: a 1.5em inside a 1.5em is 2.25 times the root. EM is useful for component-internal spacing where you want a button's padding to scale with its own font size. REM is what you want for global typography and layout because the maths is predictable: 1rem = root size, no matter how deeply nested.

The classic 'set html font-size to 62.5%' trick (which makes 1rem = 10px) lets you write 1.6rem instead of mentally converting 16px to 1rem. It works but it has a quiet cost: if a user has set their browser default above 16px for accessibility, your 62.5% multiplier propagates that change but at a smaller starting point. Modern guidance is to leave html font-size alone, write 1rem for body text, and use the Tailwind-style scale (0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.875rem, 2.25rem) for headings.