REM to PX Converter
Convert REM/EM units to PX based on configurable root font size with live preview and batch conversion.
REM / EM to PX Converter
| REM | PX | Preview |
|---|
What is a REM to PX Converter?
A REM to PX converter translates rem values back into fixed pixels. Relative units are excellent for responsive CSS, but when you are debugging a layout, checking a design handoff, or comparing values with a tool that only understands pixels, you need to know exactly how many pixels a given rem value produces. Enter the rem value and the tool returns the pixel equivalent instantly.
One rem is defined as the font size of the root <html> element, which is 16 pixels by default in most browsers. The conversion is therefore a simple multiplication: pixels = rem × root font size. So 1rem is 16px, 1.5rem is 24px, 0.5rem is 8px, and 2rem is 32px when the root is 16px. If your project uses a different base, enter that value and the results adjust accordingly.
Knowing the pixel value matters because many design tools, screenshots, and style guides are expressed in pixels. Being able to move fluently between the two lets you keep the accessibility benefits of rem while still verifying that the rendered sizes match the original design.
This converter also understands em input. Tick “Use EM units” and the tool treats the entered values as em, multiplying them by the root font size in the same way. Everything runs locally in your browser, so no CSS values are transmitted anywhere.
Key Features of This Converter
- Configurable root size — defaults to 16px but accepts any value from 1 to 100 to match your project’s base font size.
- Batch conversion — paste a list of rem values, separated by new lines or commas, and convert them all at once.
- REM or EM input — a single checkbox switches the interpretation between rem and em values.
- Adjustable precision — select between 0 and 4 decimal places for the pixel result.
- Live visual preview — the table renders each converted size so you can see how large the text actually appears.
- Instant and private — conversion happens in the browser with no upload and no delay.
- Set root font size — Enter your base font size in pixels (default 16).
- Set precision — Choose how many decimal places the converted pixel values should show.
- Enter values — Type or paste REM (or EM) values, one per line or comma-separated.
- Toggle units — Tick "Use EM units" to treat the input as EM, or press Swap to convert the other direction.
- Copy result — Click Copy, or read the table preview to compare every converted value at a glance.
Common REM to PX Conversions
The table below lists frequently used rem values and their pixel equivalents at the default 16px root size. The same factors apply to em when the “Use EM units” option is enabled.
| REM | PX (16px base) | PX (14px base) | Typical use |
|---|---|---|---|
| 0.25rem | 4px | 3.5px | Tight spacing |
| 0.5rem | 8px | 7px | Small gap |
| 0.75rem | 12px | 10.5px | Caption text |
| 0.875rem | 14px | 12.25px | Secondary text |
| 1rem | 16px | 14px | Body text |
| 1.25rem | 20px | 17.5px | Subheading |
| 1.5rem | 24px | 21px | Heading |
| 1.75rem | 28px | 24.5px | Large heading |
| 2rem | 32px | 28px | Large gap |
| 2.5rem | 40px | 35px | Component spacing |
| 3rem | 48px | 42px | Section spacing |
| 4rem | 64px | 56px | Hero spacing |
Worked Examples
- 1rem at a 16px root — 1 × 16 =
16px, the default body size. - 1.5rem at a 16px root — 1.5 × 16 =
24px. - 0.5rem at a 16px root — 0.5 × 16 =
8px. - 2rem at a 16px root — 2 × 16 =
32px. - 1.25rem at a 16px root — 1.25 × 16 =
20px. - 1rem at a 14px root — 1 × 14 =
14px, which is why the root size must match your stylesheet. - Batch input —
0.5, 1, 1.5on one line converts to8px,16px, and24pxin order. - EM input — with “Use EM units” ticked, 1.5em at a 16px root returns
24px.
Tips and Common Mistakes
- Set the root size first — the pixel result is only correct if the root font size matches the one your stylesheet actually declares.
- A 62.5% root changes everything — a common trick sets the root to 10px, so 1rem becomes 10px rather than 16px and every conversion shifts.
- EM is not the same as REM — real em values compound against the parent element; this tool multiplies by the root as a simplification.
- Decimal pixel results are normal — a root of 14px makes many rem values land on half pixels, which browsers render with sub-pixel smoothing.
- Don’t round too early — if you convert at 0 decimals and then re-use the value, small errors can accumulate across a layout.
- Use Swap to go back — the Swap button flips the tool to PX-to-REM mode when you need to convert in the other direction.
Common Use Cases
Converting rem back to pixels is the check that keeps relative-unit designs honest. It is the fastest way to confirm what a browser will actually render.
- Debugging a responsive layout — turn suspicious rem values into pixels to see whether an element is really as large as you expect.
- Checking a design handoff — compare rem-based CSS with the pixel measurements in a design file to catch discrepancies.
- Verifying a custom root size — confirm that 1rem maps to the intended base when a project overrides the browser default.
- Writing documentation — document both the rem value and its pixel equivalent so collaborators using different tools understand the scale.
- Auditing a type scale — translate heading and body sizes to pixels to check they follow a consistent progression.
- Preparing values for tools — some image, canvas, and mobile tools only accept pixels, so convert first.
What is the difference between REM and EM?
REM (root em) is relative to the root element's font size, usually 16px, so it never compounds. EM is relative to the font size of the parent element, so nested EM values multiply and can grow unexpectedly. This tool multiplies both by the root font size, which keeps the calculation simple and predictable.
What is the default root font size?
Most browsers default to 16px, and this tool starts there too. You can change the field to match your design system's base font size, for example 14px, 18px, or 20px. The accepted range is 1 to 100 pixels, and every result is recalculated as soon as the value changes.
What is the formula for REM to PX?
PX = REM × Root Font Size. With a 16px base, 2rem becomes 32px and 1.5rem becomes 24px. EM follows the same formula when “Use EM units” is enabled, because the tool treats the input as being relative to the root for simplicity.
Why convert REM back to pixels?
Relative units are great for responsive CSS, but pixels are easier to reason about when debugging, comparing against a design file, or handing values to a tool that only accepts pixels. Converting back lets you verify that the rendered size matches the original design intent.
How accurate is the conversion?
The multiplication is performed at full precision and then rounded to the number of decimal places you select, from 0 to 4. With a 14px root, many rem values produce half-pixel results such as 17.5px, so choose two or more decimals when working with a non-16px base.
Can I convert multiple values at once?
Yes. Paste a list of rem or em values separated by new lines or commas and each one is multiplied by the root size in turn. The output lists one pixel value per line, and the preview table shows every converted value with a sample so you can compare sizes at a glance.
Does this tool accept EM values?
Yes. Tick the “Use EM units” checkbox and the input is interpreted as em rather than rem, using the same root font size for the multiplication. Remember that real em values in a stylesheet depend on the parent element, so the result is a root-relative approximation.
Can I convert PX to REM here too?
Yes. Press the Swap button and the tool switches to PX-to-REM mode, dividing each pixel value by the root font size instead. The heading and placeholder update to reflect the new direction, and you can switch back at any time without losing your root size or precision settings.