REM ↔ PX Converter
Convert between REM and PX for any base font size. Enter either value; the other updates instantly. Common PX values are shown below for one-click conversions.
About REM ↔ PX Converter
REM (root em) is the CSS unit that scales with the user's browser font-size preference — critical for accessibility, since users can bump up text size site-wide via their browser settings. But designers work in pixels, and every design-to-code handoff involves the same conversion: what is 24px in rem at our project's base size? This REM ↔ PX Converter answers that in one keystroke, and shows a common-values table so the answers you look up most (16, 24, 32) are one click away.
The tool supports any base font size, not just the browser default of 16. If your project's :root font-size is 14px or 18px, set the base once and every conversion adjusts automatically. Useful for CSS specification work, translating Figma pixel measurements into responsive REM values, and quick sanity checks on existing stylesheets. Both fields are bidirectional — type either and the other updates in real time.
How to Use
Set your base font size (16px is the browser default and the value most designers assume).
Type a PX value on the left — REM updates on the right automatically. Or type a REM value on the right — PX updates on the left.
Click any value in the 'Common values' table for quick conversion.
Frequently Asked Questions
Why is 16px the standard base?
All modern browsers default to 16px root font-size when no CSS says otherwise. Setting your project's :root font-size to 16px (or leaving it default) makes 1rem = 16px, which is the mental model most designers and developers work with.
Should I use REM or PX in my CSS?
REM for font sizes, spacing, and anything a user might want to scale via their browser's accessibility settings — using REM lets users bump up text size site-wide via browser prefs. PX for borders, shadows, and hairline UI details that should not scale.
What is the difference between REM and EM?
REM is relative to the ROOT font-size (the <html> element). EM is relative to the parent element's font-size, which compounds unpredictably in nested components. Prefer REM for consistency; use EM only for local scaling inside a specific component.
Why does the tool show 4 decimals?
PX rounds to integers most of the time, but REM often produces long fractions (13px / 16 = 0.8125rem). The tool trims trailing zeros so 1.0000rem shows as 1 while 0.8125rem shows in full.
Fluid typography and spacing with clamp() — no media queries.
Build responsive CSS breakpoints with Tailwind, Bootstrap, and Material presets.
Format, beautify, and validate JSON instantly.
Convert JSON arrays into CSV for spreadsheets.