PX ⇄ REM ⇄ EM Converter
Convert px to rem/em using a base font size.
Last reviewed by the Radiatus Cloud team
Output
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Convert between pixel and relative units
CSS pixel values are fixed and absolute, while rem and em units scale with font size, a difference that matters a great deal for both accessibility and responsive design. This converter turns px values into rem or em using a base font size you set, and works in reverse too, so you can move a design that was built in fixed pixels onto flexible relative units without doing the division by hand each time. It is the small, repetitive calculation that adopting relative units otherwise requires.
Why relative units matter
A layout sized entirely in pixels completely ignores the user’s own font-size preference, which is a real accessibility problem for anyone who has enlarged their default text to read comfortably. Rem sizes relative to the root font size and em relative to the current element’s, so a design built in these units scales gracefully whenever the user scales their text up. Converting existing pixel values is the practical first step in adopting them, and that conversion depends entirely on the base font size, which the converter accounts for correctly.
Convert either direction
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between rem and em?
Rem is relative to the root font size; em is relative to the current element’s font size. Rem is more predictable; em compounds when nested.
Why convert pixels to relative units?
Because pixel sizes ignore the user’s font-size preference. Rem and em scale with text size, which is better for accessibility and responsive design.
Why does the base font size matter?
Because rem is calculated against it. A pixel value converts to a different rem depending on the root font size, so the base must be set correctly.
Can it convert back to pixels?
Yes. It works both ways, so you can move between fixed and relative units in either direction.
Is my input uploaded?
No. The conversion runs entirely in your browser.
Privacy & Security
Calculated locally in your browser. No data is sent to any server.
How to Use
Enter px and base font size to convert to rem/em.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.