Design files are measured in pixels, but accessible CSS is written in rem. This converter turns px into rem and rem back into px as you type, using any root font size — the 16px browser default, a custom 18px root, or the 62.5% trick — and gives you a conversion table for the sizes you use most plus a CSS snippet ready to paste. All the math happens in your browser.
For type that scales smoothly between breakpoints, feed your rem values into the CSS clamp() calculator. If you are translating utility classes, the Tailwind to CSS converter shows what each class compiles to (Tailwind’s spacing scale is rem-based), and the CSS formatter tidies the stylesheet afterwards.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem, and 1px = 0.0625rem. Going the other way, multiply: 2rem × 16 = 32px. The root font size is whatever the html element’s font-size resolves to, so if your stylesheet sets html { font-size: 18px } you divide by 18 instead. This converter does both directions live, lets you change the root, and rounds to the number of decimal places you pick without the floating-point noise (like 0.30000000000000004) you get from a raw calculator.
Why use rem instead of px?
Accessibility. Many people raise their browser’s default font size in settings because they find 16px text hard to read. Sizes written in rem scale with that preference; sizes in px ignore it, so a px-based layout keeps text small no matter what the reader chose. Browser zoom scales both units, but the font-size preference only affects rem and em. Using rem for font sizes, and often for spacing too, keeps proportions consistent when text grows. Borders and hairlines are commonly left in px because a 1px line should stay 1px.
What is the 62.5% trick?
Setting html { font-size: 62.5% } makes the root 10px (62.5% of the 16px default), so rem values become pixel values divided by ten: 24px is 2.4rem, 13px is 1.3rem. It is easier to do in your head and it still respects a user’s font-size preference, because it is a percentage of their default rather than a fixed px value. The catch is that body text left at 1rem becomes 10px, so you must set a font-size on body or every component. With a converter like this one, many teams skip the trick and keep the 16px default.
What is the difference between rem and em?
rem means “root em” and is always relative to the html element’s font size, so 1.5rem is the same size anywhere on the page. em is relative to the font size of the element itself — or of its parent when you use em on the font-size property — so values compound when nested: a 1.2em list inside another 1.2em list ends up 1.44 times larger. That makes em useful for padding that should scale with a button’s own text, and rem better for a predictable type scale. This tool’s results equal em values only when the parent font size equals the root you entered.
How many decimal places should I use?
Four is plenty for almost everything and is the default here. Every whole-pixel value at a 16px root converts to at most four decimals (1px is 0.0625rem), so four places are exact. Odd roots like 18px or 14px produce repeating decimals — 14px at an 18px root is 0.777…rem — and browsers round computed sizes to fractions of a pixel anyway, so beyond four places makes no visible difference. Use fewer places when you want tidy design tokens, and check the px column to see how much rounding moved the value.