rem and em aren’t fixed measurements like inches or centimeters — their actual pixel value depends entirely on a font size, which is exactly why converting between them by hand gets confusing fast, especially once nested em values start compounding.
What Is the px / rem / em Converter?
Enter a value in pixels, rem, or em and the others update instantly, using your configured root font size (for rem) and parent font size (for em). A batch-conversion box also lets you paste a whole list of px values, like from a legacy stylesheet, and get back the rem equivalents for each at once.
How to Use It
- Open the tool at /tools/px-rem-em-converter.
- Set your root font size (16px by default, matching the browser default) and, if relevant, your parent element’s font size.
- Type a value into any of the px, rem, or em fields — the other two update automatically.
- Paste a list of px values into the batch box to convert a whole set at once.
Key Features
- Two-way live conversion between all three units, editable from any field.
- Configurable root and parent font size, so results are accurate for non-default setups.
- Batch conversion for turning a list of px values into rem in one pass.
- Clear explanation of why rem and em behave differently, including the compounding issue with nested em values.
When to Use This Tool
- Migrating a stylesheet from px to rem for better accessibility and consistent scaling.
- Debugging unexpectedly large or small text caused by nested em values.
- Quickly checking what a design spec’s px value translates to in your codebase’s rem-based system.
Try It Now
Open px / rem / em Converter directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.