PX to REM Converter

Convert pixels to rem units and back using your root font size, see a table of common values, or paste a block of CSS to convert every px value at once.

Root font size (base)

Browsers default to 16px unless the user or your CSS changes it.

Pixels

REM

24px = 1.5rem

Convert CSS in bulk

Paste CSS and every px value is converted to rem using your base size.

Keep 1px values (hairline borders)

padding: 1rem 1.5rem;
margin-bottom: 2rem;
font-size: 0.875rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;

Common values at 16px base

Converting pixels to rem

Designs are usually handed off in pixels, but modern CSS works better in rem units. A rem is a multiple of the root font size — the font size set on the <html> element — which browsers set to 16px by default. So 1rem is 16px, 1.5rem is 24px, and 0.875rem is 14px. This converter does the arithmetic instantly in both directions, for any base size, and can rewrite a whole block of CSS at once.

How to use the converter

Check the root font size. Leave it at 16px unless your CSS changes the html font size.
Type a pixel value to get rem, or a rem value to get pixels.
Click any value in the table of common sizes to load it into the converter.
For a whole stylesheet, paste CSS into the bulk converter and copy the result with every px value changed to rem.

The formula

rem = px ÷ base — 24px ÷ 16 = 1.5rem
px = rem × base — 2.25rem × 16 = 36px

Results are rounded to four decimal places, which is more precise than any screen can display. Values like 0.8125rem (13px) are perfectly valid CSS.

Why rem is better for accessibility

Many people increase the default font size in their browser settings to make text easier to read. Browser zoom scales everything, but the font-size setting only affects rem- and em-based sizes. If your text and spacing are set in px, those users see no change; set in rem, your layout grows proportionally with their preference. Using rem for font sizes, and often for spacing and layout widths, is a simple way to respect user settings and meet accessibility guidelines.

rem, em and px: when to use each

rem — font sizes, spacing, max-widths and most layout values. Predictable because it always refers to the root.
em — values that should scale with the element’s own text, such as padding inside a button or icon sizes next to text.
px — hairline borders, box-shadow offsets and other details that should stay exactly one device pixel thin.

The bulk converter can keep 1px values for this reason. If your project sets html { font-size: 62.5% }, enter 10 as the base so 1rem equals 10px.

Want text that scales smoothly between phone and desktop sizes? Generate it with the CSS Clamp() Generator. You can also build gradients and shadows with the CSS Gradient & Box Shadow Generator, or create a full color scale with the Tailwind Color Shades Generator.

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px base, 24px ÷ 16 = 1.5rem. To go the other way, multiply: 2rem × 16 = 32px.

Why use rem instead of px?

rem units scale with the user's browser font size setting. If someone increases their default text size for readability, layouts built in rem grow with it, while px values stay fixed. That makes rem better for accessibility.

What's the difference between rem and em?

rem is relative to the root (html) font size, so 1rem means the same everywhere. em is relative to the current element's font size, so it compounds when elements are nested.

Should I set html { font-size: 62.5% }?

That trick makes 1rem equal 10px, which simplifies mental math. It still respects user settings, but it changes the base for every rem value, including in third-party components. Many teams now keep the 16px default and use a converter instead.

Should borders be in rem?

Usually not. Hairline borders of 1px are often left in px so they stay crisp at all sizes, which is why the bulk converter can keep 1px values.