How to use it
- Set the root font size if your site changes it (for example html { font-size: 62.5% } makes it 10px).
- Type a value in either box to convert px to rem or rem to px. Switch to em if you size relative to a parent.
- Use the table for quick lookups, or paste a CSS snippet to convert every px length at once and copy the result.
How it works
rem = px ÷ root font size. With the default 16px root, 24px is 1.5rem and 14px is 0.875rem. em uses the same formula but with the parent element's font size, which is why nested em values multiply; rem avoids that because it always refers to the root.
Using rem for font sizes and spacing lets text scale when someone raises the default font size in their browser settings, which helps people with low vision. Values are rounded to four decimals.
The snippet converter changes numbers followed by px. It leaves comments, url(…) and quoted strings untouched, keeps 1px if you ask (thin borders usually should stay 1px), writes 0px as 0, and by default leaves @media and @container conditions alone, because in media queries rem and em always refer to the browser's initial font size, regardless of the root font size you set. It does not understand calc() semantics beyond replacing the px numbers inside it, which is still correct because each length is converted on its own.
Examples
Default root size
With a 16px root: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
The 62.5% trick
If your CSS sets html { font-size: 62.5% }, the root is 10px, so 14px = 1.4rem and 24px = 2.4rem. Set the root font size field to 10 to match.
Converting a component
padding: 24px 16px; border: 1px solid #ddd; becomes padding: 1.5rem 1rem; border: 1px solid #ddd; with “Keep 1px values” turned on.
Frequently asked questions
Should I use rem or em?
Use rem for most font sizes, spacing and layout, because it is predictable everywhere. Use em when something should scale with its own component's text size, such as padding inside a button.
Why not convert media queries to rem?
You can, but in a media query 1rem always equals the browser's default font size (usually 16px), not your html font-size. The converter therefore skips them by default; turn the option off if you divide by 16 anyway.
Is rem better for accessibility than px?
For font sizes, yes: rem respects the user's default font size setting, while px font sizes ignore it. Browser zoom works with both units.
Privacy
Conversions and the CSS snippet are processed in your browser and never sent anywhere.