PX to REM Converter

Converting px to rem by hand means dividing every value by the root font size and hoping you got the decimals right. Our free converter does it instantly in both directions, between pixels, rem and em, with a root size you can change from the browser default of 16px. It shows a conversion table of common sizes alongside Tailwind spacing values, and can bulk convert a whole block of pasted CSS, replacing pixel values with rem while keeping 1px borders and media query breakpoints if you want. Everything runs in your browser.

How to use the PX to REM

1. 1 Check the root font sizeLeave it at 16px, the default in every major browser, unless your stylesheet sets a different font size on the html element.
2. 2 Convert a single valueType in the px, rem or em box and the other two update instantly. Set the parent size if you need em values for a nested element.
3. 3 Use the conversion tableScan the table for common sizes from 1px to 128px. Click any row to load it into the converter.
4. 4 Bulk convert a stylesheetPaste CSS into the bulk box. Pixel values become rem, 0px becomes 0, and comments, url() paths and quoted strings are left untouched.
5. 5 Choose what to keep in pxKeep 1px values for hairline borders and leave media query breakpoints in px if you prefer, then copy or download the converted CSS.

What px, rem and em mean

A CSS pixel, written px, is a fixed unit. It is not the same as a physical pixel on your screen, because high-density displays use several device pixels for each CSS pixel, but within a page a 16px font is always 16px no matter what the user has asked for. That predictability is why designers have used pixels for years.

A rem, short for root em, is relative to the font size of the root html element. Browsers set that to 16px by default, so 1rem equals 16px, 1.5rem equals 24px and 0.875rem equals 14px. If a visitor raises the default font size in their browser settings to 20px, every rem value grows in proportion, while pixel values stay where they were.

An em is relative to the font size of the element itself, or of its parent when used for font-size. That makes em useful for spacing that should scale with the text inside a component, such as the padding on a button. The catch is that em compounds: a list inside a list, each set to 1.2em, gets bigger at every level. Rem avoids that because it always refers back to the root.

Why rem is better for accessibility

Many people with low vision, and plenty of older readers, raise the default font size in their browser rather than zooming the whole page. Browser zoom scales pixels and rem alike, but the default font size setting only affects relative units. If your stylesheet sets font sizes in pixels, those visitors get no benefit from the setting they chose, and some may give up on your site.

Using rem for font sizes respects that choice. Using rem for spacing, such as padding, margins and gaps, means the layout grows with the text, so larger text does not end up squashed into containers built for small text. WCAG success criterion 1.4.4 asks that text can be resized up to 200 per cent without losing content or function, and relative units make that much easier to meet.

This is also why you should not set the root font size in pixels on the html element. A rule such as html { font-size: 10px } overrides the visitor's preference completely. If you want a different base, use a percentage such as 62.5 per cent, which keeps the setting relative, and set the root size in the converter to match.

How to convert px to rem

The formula is simple: rem equals pixels divided by the root font size. With the usual 16px root, 24px becomes 24 divided by 16, which is 1.5rem. Going the other way, pixels equal rem multiplied by the root size, so 2.25rem is 36px. For em, divide by the font size of the parent element instead of the root.

Some values do not divide neatly. 13px at a 16px root is 0.8125rem, and 15px is 0.9375rem. That is fine; browsers handle the decimals and round to whole device pixels when they paint. The converter lets you choose how many decimal places to keep. Four is plenty for accuracy, while two keeps the code shorter at the cost of tiny differences.

• 12px = 0.75rem, often used for small print and captions.
• 14px = 0.875rem, a common size for secondary text and labels.
• 16px = 1rem, the default body text size.
• 18px = 1.125rem and 20px = 1.25rem, popular body sizes on content-heavy sites.
• 24px = 1.5rem, 32px = 2rem and 48px = 3rem, typical heading and section spacing values.

Bulk converting a stylesheet safely

The bulk converter looks for numbers followed by px and replaces each with its rem equivalent. It skips anything inside comments, url() values and quoted strings, so a background image called hero-1200px.jpg keeps its file name. Values that are part of a longer word, such as a class name, are also left alone. Zero becomes a bare 0, since a zero length needs no unit.

Two options cover the cases where pixels are still the right choice. Keeping 1px values means hairline borders and dividers stay crisp at exactly one pixel, rather than becoming 0.0625rem, which can render as nothing or as two pixels on some screens. Leaving media query breakpoints in px keeps your existing responsive behaviour easy to read; switching breakpoints to em or rem is a separate decision you can make deliberately.

Always review the result before replacing your live stylesheet. Box shadows, outlines, small icon sizes and anything tied to a bitmap image may look better left in pixels. Run your test pages at the default font size and again with the browser text size set larger to make sure nothing overflows.

When to keep using pixels

Rem is not the answer for every value. Borders, outlines, box shadow offsets and blur radii are usually best in pixels, because there is no reason for a border to get thicker when text gets bigger. The same goes for the exact size of a raster image or a canvas, where scaling would make it blurry. Media query breakpoints can be written in px or em; em breakpoints respond to the user's font size, which some teams prefer, while px is simpler to reason about.

A practical rule is to use rem for font sizes, line heights expressed as lengths, and most spacing; em for spacing that should scale with a specific component's text; and px for fine details such as borders and shadows. Unitless line-height values such as 1.5 are often better still, because they scale with whatever font size the element ends up with.

Rem in Tailwind CSS and design tools

Tailwind CSS uses rem for its spacing and type scale. Each spacing step is 0.25rem, so p-4 is 1rem, gap-6 is 1.5rem and mt-12 is 3rem, which works out at 16px, 24px and 48px with a 16px root. The conversion table shows the matching Tailwind number for each size, so you can translate a design spec straight into utility classes.

Design tools such as Figma usually show measurements in pixels. Agree a root size with your developers, normally 16px, and convert values as you hand over designs. Keeping the design scale to multiples of 4px or 8px makes the conversion tidy, because each step lands on a clean rem value and a Tailwind class.

Examples you can copy

/* Before */
.card { padding: 24px 32px; font-size: 18px; border: 1px solid #e4e4e1; margin: 0px auto 48px; }

/* After */
.card { padding: 1.5rem 2rem; font-size: 1.125rem; border: 1px solid #e4e4e1; margin: 0 auto 3rem; }

rem = px / root font size
px  = rem x root font size
em  = px / parent font size

24px / 16 = 1.5rem
2.25rem x 16 = 36px

html { font-size: 62.5%; }   /* 10px when the browser default is 16px */
body { font-size: 1.6rem; }  /* 16px, still scales with user settings */

/* Set the converter's root size to 10 */

Common mistakes to avoid

Frequently asked questions