REM to PX Converter
Convert rem to px and back with a configurable root font size. Live two-way conversion, ready CSS snippet, and a common-values reference table. Free.
About the REM to PX Converter
This REM to PX converter turns rem units into pixels and back, instantly and in both directions. Type a rem value to see its pixel equivalent, or type pixels to get the rem — the two fields stay in sync — using whatever root font size you set (the browser default is 16px).
Change the root size and both values recalculate, which is handy when your design system uses a non-default base or you're checking how a layout responds to a different root. The tool also generates a ready-to-paste CSS snippet with a helpful comment showing the pixel equivalent, so you can drop rem into your stylesheet with confidence.
A reference table lists the common rem values from 0.25 up to 4, their pixel equivalents at your chosen root, and typical uses (body text, headings, spacing). Everything runs locally in your browser. rem is preferred for accessible typography because it scales with the user's browser settings.
How to Use the REM to PX Converter
- 1Enter a value in the rem field, or type pixels in the px field.
- 2Adjust the root font size if your project doesn't use the 16px default.
- 3Read the converted value and the generated CSS snippet.
- 4Use the reference table for common rem-to-px values.
Frequently Asked Questions
How does rem convert to px?
One rem equals the root element's font size in pixels. At the default 16px root, 1rem = 16px, 1.5rem = 24px and 0.5rem = 8px. Change the root size and every conversion updates proportionally — that's the whole point of rem.
Why use rem instead of px for font sizes?
Because rem scales with the user's browser font-size setting. If someone increases their default text size for readability, rem-based typography and spacing grow with it, while fixed px values don't. That's why accessibility guidelines recommend rem for text.
What is the root font size and when would I change it?
The root font size is the font-size of the html element, which rem is measured against. It defaults to 16px in every browser. You might set a different root in a design system, or use this tool to preview how your rem values would render under a changed root.
Does 1rem always equal 16px?
Only when the root font size is the 16px default. If a stylesheet sets html { font-size: 62.5% } (a common trick to make 1rem = 10px), the conversion changes. Set the root size in the tool to match your project and the numbers will be accurate.