Loading…
Convert pixels to rem and em with a custom root font size.
———| PX | REM | EM (parent = root) | Size |
|---|---|---|---|
| 8 | 0.5 | 0.5 | |
| 10 | 0.625 | 0.625 | |
| 12 | 0.75 | 0.75 | |
| 14 | 0.875 | 0.875 | |
| 16 | 1 | 1 | |
| 18 | 1.125 | 1.125 | |
| 20 | 1.25 | 1.25 | |
| 24 | 1.5 | 1.5 | |
| 28 | 1.75 | 1.75 | |
| 32 | 2 | 2 | |
| 40 | 2.5 | 2.5 | |
| 48 | 3 | 3 | |
| 56 | 3.5 | 3.5 | |
| 64 | 4 | 4 | |
| 80 | 5 | 5 |
🔒 100% client-side — all conversions compute locally. rem = px ÷ root-font-size.
Modern CSS uses rem and eminstead of pixels so layouts scale with the user's font-size preference. But converting px to rem in your head is error-prone — you have to divide by the root font size, which is rarely exactly 16px. This tool does the math instantly and shows a live table for the sizes you use every day.
rem (root em) is always relative to the <html>element's font size, so it is predictable and consistent everywhere — ideal for layout, spacing, and base font sizes. emis relative to the nearest parent element's font size, so it compounds in nested elements. Use em for padding and margins inside components that should scale with their own text (e.g. a button whose padding grows with its label). For everything else, prefer rem.
Many teams set html { font-size: 62.5% } so the root becomes 10px and 1rem = 10px — making mental math trivial (1.6rem = 16px). If your project does this, change the root size here to 10px so the conversions match. Otherwise, leave it at 16px (the browser default). Always verify against the computed style on the html element in DevTools.
Some contexts (design specs, Figma exports, browser DevTools) speak in pixels. Converting those px values to remkeeps your stylesheet scalable while matching the designer's intent. This tool's table covers the common breakpoints (8, 12, 16, 20, 24, 32, 40, 48…) so you can copy the right value without reaching for a calculator.
The PX to REM / EM Converter converts px to remfrom one unit to another using the exact internationally defined conversion factors. Type a value, choose your source and target units, and the converted result is shown instantly — no waiting, no page reload.
Manual conversion is error-prone because it means memorizing ratios (how many feet in a meter, how many pints in a liter). This tool removes that friction: the conversion factor is built in, and the math is done to full precision with no rounding until the final displayed number.
Common uses: people reach for this tool when they need to look up a px to rem converter with root font size, pixel to em css converter online, rem to px calculator, or css px to rem conversion table.
Browser-based tools like this one have a few real advantages over installed software or manual methods:
The PX to REM / EM Converter is based on the following formula:
rem = px / root font size (px)
Variables: px: length in pixels (px) root font size: font size of the html element, default 16 px rem: length in rem units
Convert pixels to rem relative to the root font size (default 16 px). rem scales with user font settings, so it is the accessible unit for type and spacing.
Worked example: Step 1: Convert 24 px with the default 16 px root font size. Step 2: rem = 24 / 16 = 1.5. Result: 24 px = 1.5 rem.
More tools you might find useful