PX to REM Converter

Rem units keep layouts accessible — they scale with the user's font size preference — but nobody wants to divide by 16 in their head all day. This converter does the arithmetic live: choose the direction (px → rem, rem → px or px → em), type the value, and the result appears instantly together with a copy-ready CSS line such as font-size: 0.875rem.

The base font size field makes the tool fit any project. The browser default is 16px, so 1rem equals 16px out of the box, but many codebases set html { font-size: 62.5% } to make 1rem equal 10px — enter 10 as the base and every conversion and table row follows. The px → em direction uses the same mathematics against the parent element's font size instead of the root, which is exactly the difference between em and rem in CSS.

Below the result, a reference table shows the most common design sizes — 1, 2, 4, 8, 10, 12, 14, 16, 18, 20, 24, 32, 48 and 64 pixels — already converted at your current base, with the row matching the base highlighted. It is the cheat sheet you would otherwise keep taped to your monitor, always in sync with the base you actually use.

Everything happens locally in your browser as you type: no upload, no sign-up, no server round-trip. Preset pages for rem → px, px → em, the 10px base and popular values like 14, 24 and 32 px open the converter ready-configured for those exact questions.