Pixel to REM/EM Converter for CSS, Free & Instant
This pixel to rem/em converter turns any px value into clean CSS rem and em units and back again, based on your chosen root font size. Get a full quick reference table and copyable CSS output, no sign up needed.
REM is always relative to the root (html) font size, typically 16px by default in browsers. EM is relative to the parent element’s font size, which can differ if you’ve changed font sizes higher up the DOM tree.
How the pixel to REM/EM converter actually does the math, and why rem and em are not the same unit wearing two names
Pixels are absolute. Rem and em are not, and that single fact is the whole reason this tool exists. A rem value means nothing without knowing the root font size, and an em value means nothing without knowing the font size of the parent element it inherits from. This converter asks for both, because guessing either one silently produces the wrong CSS.
Everything computes locally in your browser with plain JavaScript arithmetic. No pixel value, no font size, nothing you type is sent anywhere. Refresh the page and the state resets.
The conversion, step by step
There is no unit table to look up here, only two divisions. The tool keeps them separate on purpose because they answer different questions.
html element. If you type a custom value, it swaps in immediately. This is the number every rem calculation divides by.
Notice rem never touches the parent value and em never touches the root value. That separation is the entire point of the tool. Mixing them up in hand written CSS is one of the most common sources of unexpectedly large or small text on real websites.
Root default, and why 16 is not arbitrary
Every major browser ships with a default stylesheet that sets the html element to 16 pixels unless a user or an author overrides it. That is where the 16 default in both fields comes from. It is a convention, not a law, which is exactly why the tool makes both numbers editable rather than hardcoding them.
| Pixels | Rem (root 16px) | Em (parent 16px) |
|---|---|---|
| 8px | 0.5rem | 0.5em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 24px | 1.5rem | 1.5em |
| 32px | 2rem | 2em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
font-size: 1.5em, the effective size multiplies at every level, 1.5 times 1.5 times 1.5, which balloons fast and surprises people who only tested one level deep. Rem always resolves against the single root value no matter how deeply nested the element is, so it never compounds. This tool lets you set only one parent value because it is modeling a single level of nesting. Real pages with multiple nested em declarations need to multiply by hand.What the extra panels are for
Live preview
A sample line of text is resized to the exact pixel value in real time using inline font-size, so you can see the rendered scale rather than just trust the number.
CSS output box
Generates all three equivalent declarations, pixel, rem and em, ready to copy into a stylesheet with one click, using the browser Clipboard API.
Common sizes table
A fixed list of frequently used pixel values, from 8 up to 64, recalculated against whatever root and parent you have set, useful for building out a type scale.
Why designers moved to rem in the first place
Pixel sized text ignores a user’s browser font size preference in some older browsers and can behave inconsistently under browser zoom. Rem sized text scales predictably because it is anchored to one root value that responds to accessibility settings. Em is still useful for spacing that should scale with its own local component, like padding inside a button that should grow if the button’s own font size grows.
CSS unit references
- W3C CSS Values and Units Module Level 4 defines rem and em formally as font relative length units, specifying rem’s relationship to the root element and em’s relationship to the computed font size of the element itself.
- MDN length reference covers browser support and the practical difference between font relative and viewport relative units.
- WebAIM’s guidance on font sizing discusses accessibility implications of pixel versus relative units for users who change their default browser font size.
Sizing decisions in CSS
Converting a designer’s pixel based Figma spec into a rem based CSS file, auditing an inherited codebase where nested em values have compounded into oddly large buttons, building a type scale for a design system, checking how a component behaves inside a card that overrides the local font size, and translating legacy pixel stylesheets to units that respect user accessibility settings.
FAQ: Pixel to REM Converter
Rem and em scale automatically when a user increases their browser’s default font size for accessibility, while fixed pixel values do not scale at all, which can make text and layouts stay uncomfortably small for users who need larger text. Using relative units for typography and spacing is widely considered a best practice for building accessible, responsive interfaces.
16px is the standard default across virtually all modern browsers, which is why “divide by 16” is the most common rem calculation shortcut you’ll see referenced. This can be changed by the user in their browser’s accessibility settings, or by a site’s own CSS setting a different font-size on the html element, which is exactly what the Root Font Size field in this tool lets you account for.
Em compounds: if a parent element has font-size: 1.5em and a child inside it also has font-size: 1.5em, the child’s actual rendered size is 1.5 times 1.5 times the base, not just 1.5 times. This compounding effect across multiple nested levels is the most common source of confusion with em units, and it’s exactly why many developers default to rem for most sizing, since rem always calculates from a single fixed root regardless of nesting depth.
Many developers do, and it’s a reasonable choice, since it keeps spacing proportional if a user increases their base font size, preserving visual balance between text and whitespace. Others intentionally keep spacing in fixed pixels for tighter layout control that doesn’t shift with font size changes. Both approaches are valid, it comes down to a team or project’s specific design system preferences.
Most values with a 16px base divide cleanly to 2 or fewer decimal places, for example 24px is exactly 1.5rem. This tool shows up to 4 decimal places for precision with unusual base sizes, but in practice, rounding to 2 or 3 decimals is visually indistinguishable in a browser and keeps your CSS more readable.
No, pixel values are absolute and unaffected by root font size changes, only rem and em values respond to it. This is exactly the tradeoff at the center of the px vs rem/em decision: px stays perfectly predictable and fixed, while rem and em gain accessibility responsiveness at the cost of that fixed predictability.
Yes, Tailwind’s default spacing and font size scale is built on rem units with a 16px root assumption, so this converter works well for translating design specs (often given in px by designers) into the rem values Tailwind’s utility classes and custom theme configuration expect.
No, all calculations happen locally in your browser using simple division, nothing is sent to a server or stored.
From the blog
Reading around units
Where measurement systems came from and why two of them still argue.
