PX to REM Converter
Convert PX values to REM/EM units based on configurable root font size for responsive design.
PX to REM / EM Converter
| PX | REM | Preview |
|---|
What is a PX to REM Converter?
A PX to REM converter translates fixed pixel measurements into rem units, which are relative to the root font size of a web page. Designers usually work in pixels, while modern CSS favours relative units, so converting between the two is a routine step when turning a mockup into a responsive stylesheet. Enter a pixel value and the tool instantly returns the equivalent rem value.
The word rem stands for “root em”. One rem always equals the font size set on the root <html> element — by default 16 pixels in almost every browser. That means 16px becomes 1rem, 24px becomes 1.5rem, and 8px becomes 0.5rem. Because the reference point is a single root value, rem is predictable and does not compound the way nested em units can.
Converting to rem is good for accessibility. If a visitor increases their browser’s default font size, every rem-based dimension scales with it, so text and spacing grow together instead of breaking the layout. Pixel font sizes, by contrast, stay fixed and can become unreadably small for users who rely on larger defaults.
This converter also supports em output and a configurable root font size. If your design system uses a 14px or 18px base rather than the browser default, set the root size once and every conversion is calculated against it. The whole tool runs in your browser, so no values are ever uploaded.
Key Features of This Converter
- Configurable root size — defaults to 16px but accepts any value from 1 to 100 so it matches your own base font size.
- Batch conversion — paste many values at once, separated by new lines or commas, and convert them all in a single pass.
- REM or EM output — a single checkbox switches the result between
remandemunits. - Adjustable precision — choose between 0 and 4 decimal places to control how the rounded result is displayed.
- Live visual preview — a table renders each converted value so you can see how large the resulting text actually appears.
- Runs entirely client-side — the conversion is instant and your CSS values never leave your device.
- Set root font size — Enter your base font size in pixels (default 16).
- Set precision — Choose how many decimal places the converted REM or EM values should show.
- Enter PX values — Type or paste PX values, one per line or comma-separated.
- Toggle units — Tick "Convert to EM" to output EM instead of REM, 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 PX to REM Conversions
The table below lists frequently used pixel values and their rem and em equivalents at the default 16px root size. Values shown to two decimal places may be rounded.
| Pixels | REM (16px base) | EM (16px base) | Typical use |
|---|---|---|---|
| 1px | 0.0625rem | 0.0625em | Hairline border |
| 2px | 0.125rem | 0.125em | Focus ring |
| 4px | 0.25rem | 0.25em | Base spacing unit |
| 8px | 0.5rem | 0.5em | Small gap |
| 12px | 0.75rem | 0.75em | Caption text |
| 14px | 0.875rem | 0.875em | Secondary text |
| 16px | 1rem | 1em | Body text |
| 20px | 1.25rem | 1.25em | Subheading |
| 24px | 1.5rem | 1.5em | Heading |
| 32px | 2rem | 2em | Large gap |
| 48px | 3rem | 3em | Section spacing |
| 64px | 4rem | 4em | Hero spacing |
Worked Examples
- 16px at a 16px root — 16 ÷ 16 =
1rem, the baseline body size. - 24px at a 16px root — 24 ÷ 16 =
1.5rem. - 10px at a 16px root — 10 ÷ 16 = 0.625, which is shown as
0.63remat two decimals. - 14px at a 16px root — 14 ÷ 16 = 0.875, shown as
0.88remat two decimals or0.875remat three. - 12px at a 14px root — 12 ÷ 14 = 0.857, rounded to
0.86remat two decimals. - 32px at a 20px root — 32 ÷ 20 =
1.6rem. - Batch input —
8, 16, 24on one line converts to0.5rem,1rem, and1.5remin order. - EM output — with “Convert to EM” ticked, 24px returns
1.5eminstead of1.5rem.
Tips and Common Mistakes
- 1rem is not always 16px — it equals whatever the root font size is set to, so match the root value here to your real stylesheet before converting.
- Don’t change the root font size carelessly — setting
html { font-size: 62.5% }makes 1rem equal 10px, and every value converts differently. - EM compounds, REM does not — nested
emvalues multiply against the parent element, whereasremalways refers back to the root. This tool applies the root size to EM as a convenience. - Watch the rounding — a value such as 10px ÷ 16 = 0.625rem loses accuracy at two decimals; increase precision when exactness matters.
- Keep borders in pixels — converting a 1px border to rem can produce sub-pixel rendering and inconsistent weight across screens.
- Use Swap for reverse conversion — the Swap button flips the tool to REM-to-PX mode so you can check a value in both directions.
Common Use Cases
Relative units are the backbone of responsive, accessible CSS, and converting a design from pixels is the first step in adopting them.
- Converting a pixel design to responsive CSS — translate every font size, margin, and padding value from a Figma or Sketch mockup into rem.
- Building a type scale — express headings and body text as rem so the whole scale grows or shrinks with the root.
- Improving accessibility — let users who enlarge their browser font size see a layout that scales proportionally instead of overflowing.
- Working with utility frameworks — many CSS frameworks and design tokens are defined in rem, so you need conversions when mixing in pixel specs.
- Auditing an existing stylesheet — paste a list of pixel values to see their rem equivalents and spot inconsistencies.
- Supporting a custom root size — convert against a 14px or 18px base when your project does not rely on the browser default.
Why use REM instead of PX?
REM units are relative to the root font size, which makes them ideal for responsive and accessible design. When a visitor changes their browser's default font size, rem-based dimensions scale proportionally so text stays readable and spacing stays balanced. Pixel values stay fixed, which can break layouts for users who need larger text.
What is the difference between REM and EM?
REM is always relative to the root element's font size, so it never compounds. EM is relative to the font size of whatever element contains it, so nested EM values multiply and can balloon unexpectedly. This tool uses the root font size for EM conversion as well, which keeps the calculation simple and predictable.
What is the formula for PX to REM?
REM = PX ÷ Root Font Size. With the default 16px root, 32px becomes 32 ÷ 16 = 2rem and 12px becomes 12 ÷ 16 = 0.75rem. Change the root font size field to match your own design system and every value is recalculated against it.
What is the default root font size?
Almost every browser uses 16px as the default root font size, and this tool starts there too. Many design systems use 14px, 15px, or 18px instead, so check your stylesheet and set the root size field accordingly before converting. The accepted range is 1 to 100 pixels.
How accurate is the conversion?
The result is a full-precision division that is then rounded for display. You choose between 0 and 4 decimal places, so a value like 10px at a 16px root (0.625rem exactly) appears as 0.63rem at the default two decimals. Increase the precision to three or four decimals when you need the exact value.
Can I convert multiple values at once?
Yes. Paste as many pixel values as you like, separated by new lines or commas, and the tool converts each one in order. The output lists one converted value per line, and the preview table shows every value alongside a sample so you can compare them visually.
Does this tool convert to EM as well?
Yes. Tick the “Convert to EM” checkbox and the output switches from rem to em, using the same root font size for the calculation. This is a convenient approximation; remember that real em values in a stylesheet depend on the parent element and can differ from the root-relative result.
Should I use REM for every property?
No. REM suits font sizes, line heights, margins, padding, and layout spacing because those benefit from scaling. Borders, fine shadows, and other hairline details are usually safer in pixels, since converting a 1px border to rem can introduce sub-pixel rounding and uneven rendering across displays.