Pixel to em & rem Converter

What this tool does

This converter translates a CSS length between px, em and rem. You enter a value, choose its unit, and set a base font-size — 16px by default — and the tool shows the equivalent in all three units as a table, with a one-click copy button on each row. Conversion works in both directions: type a pixel value to get em and rem, or type an em or rem value to get pixels. Both relative units are measured against the base you supply, and the table recalculates live as you type. Everything runs in your browser.

Why you might need it

Design files almost always specify type and spacing in pixels, but accessible, scalable stylesheets are usually built in rem. Bridging the two means dividing every pixel value by the base font-size, over and over, which is tedious and easy to slip on. You might be translating a 24px heading into rem, checking that a 1.5em margin lands where you expect, or verifying a spacing scale before committing it. A converter that does the arithmetic — using the exact base from your project — keeps a stylesheet consistent and removes a whole class of small rounding mistakes.

How to use it

1. Enter the value you want to convert.
2. Choose its unit: px, em or rem.
3. Set the base font-size in pixels. Leave it at 16 for the browser default, or match your root element’s font-size.
4. Read the results table — all three units appear at once. Click the copy icon on any row to copy that value with its unit.

How it’s calculated

The conversion is simple proportional arithmetic. The tool first normalises your input to pixels: a pixel value is already in pixels, while an em or rem value is multiplied by the base font-size. From that pixel figure it then divides by the base to get the em and rem equivalents. The two governing formulas are em = px ÷ base and px = em × base, with rem behaving identically against the same base. At a 16px base, 16px equals 1rem, 24px equals 1.5rem, and 8px equals 0.5rem.

Common pitfalls

The biggest real-world subtlety is that em and rem are not always equal. In CSS, rem is anchored to the root font-size, but em is relative to the current element’s font-size, and em values compound when elements nest — an em inside an em multiplies. This tool deliberately uses one shared base, which matches the common case but not deeply nested em chains; for those, set the base to the specific element’s font-size. Another trap is forgetting that users can change their browser’s default font-size, so a value that looks right at 16px will scale on someone else’s screen — which is exactly why rem is preferred.

Tips and related conversions

To turn a pixel-based design into a scalable one, set the base to your project’s root font-size and read the rem column for every value — that is the accessible way to size text and spacing. A handy mental shortcut at the 16px default is to divide by 16: 16px is 1rem, 32px is 2rem, 12px is 0.75rem. Avoid sizing body text in px outright, since it can prevent the page from respecting a reader’s preferred size. Because this converter is pure arithmetic running locally, you can work through an entire type scale quickly, and nothing about your design ever leaves the browser.