Switch between px and rem without doing the division in your head. Enter a value, set your root font size (16px by default), and get the converted value plus a reference table for common sizes. A small helper for writing scalable, accessible CSS — it all runs in your browser.
Usually 16.
Enter a value to convert.
Reference at 16px base
How it works
One rem equals the root font size, so the conversion is just division and multiplication: rem = px ÷ base, and px = rem × base. With the usual 16px root, 24px is 1.5rem and 1rem is 16px.
The base is the font-size on the html element. Most browsers default it to 16px, but users can change it, and some sites set a different root size. Change the base field here to match your project and the whole reference table updates.
em works the same way arithmetically, but its base is the font size of the current element rather than the root — so em compounds when elements nest, while rem always refers to the one root value. For predictable spacing, rem is usually the safer choice.
Practical examples
Body text and headings
At a 16px root, 16px body text is 1rem and a 32px heading is 2rem. Expressing them in rem means both scale together if the root size changes.
A 10px “easy math” base
Some developers set the root to 62.5% (10px) so conversions are trivial: 20px becomes 2rem, 14px becomes 1.4rem. Set the base to 10 here to mirror that setup.
Converting a design spec
A design hands you 18px labels and 12px captions. Convert them to 1.125rem and 0.75rem so the type honours the user’s browser font-size preference.
Frequently asked questions
What is the difference between px and rem?
A px is a fixed pixel size; a rem is relative to the root font size. If a user increases their browser’s default font size, rem-based text and spacing scale up with it, while px values stay fixed.
What base font size should I use?
The default is 16px, which is the standard browser root size and a good starting point. Only change it if your project sets a different font-size on the html element.
Why use rem instead of px?
rem respects the user’s font-size preference, which is better for accessibility and makes global scaling easy — change one root value and the whole layout resizes proportionally. px is fine for things that should never scale, like a 1px border.
What is the difference between rem and em?
rem is always relative to the root font size; em is relative to the current element’s font size. Because em compounds through nested elements, rem is more predictable for most sizing.
Does changing the base change my existing rem values?
Yes — since rem is relative, a different root size changes the pixel result of every rem value. That is the point: set the root once and everything scales. This tool shows the effect live in the reference table.
How precise are the results?
They are rounded to four decimal places, which is plenty for CSS. In practice you can often round further — 0.875rem for 14px, for example — since sub-pixel differences are invisible.
Can I convert 0 or negative values?
Zero converts to zero. Negative values (for negative margins, say) convert normally too — only the base must be a positive number.
Should I use the 62.5% trick?
Setting the root to 62.5% (10px) makes mental math easy, but it also shrinks any rem defaults from libraries and can surprise collaborators. It works, but many teams prefer to keep the 16px root and convert as needed.
Is anything sent to a server?
No. The conversion is pure arithmetic done in your browser; nothing you enter leaves your device.
Related tools
Color Converter
Convert colors between HEX, RGB and HSL, with alpha support and a live swatch. Runs in your browser.
Developer tools
Aspect Ratio Calculator
Find the simplified aspect ratio of any width and height, and resize while keeping that ratio. Runs in your browser.
Developer tools
Color Contrast Checker
Check the WCAG contrast ratio between a text and background colour, with AA and AAA pass or fail.
Developer tools
CSS Minifier
Minify CSS in your browser — strip comments and whitespace to shrink the file, with a before/after size comparison. Nothing is uploaded.
Developer tools
JSON Formatter
Beautify, validate or minify JSON in your browser — with clear error messages. Nothing is uploaded.
Developer tools
Base64 Encoder and Decoder
Encode text to Base64 or decode it back, UTF-8 safe and URL-safe tolerant. Runs entirely in your browser.
Developer tools