by GelFuzion
Home / CSS Generators / PX to REM Converter
01.07CSS Generators

PX to REM Converter

Convert px to rem with your own root font size, and switch between em, pt, % and viewport units. Paste a whole stylesheet to convert every pixel value at once.

Updated
Result in every unit (click to copy)

Bulk convert CSS from px to rem

Hairline borders stay in px
Converted to rem

PX to REM conversion table (16px root)

What a px to rem converter actually does

A px to rem converter divides a pixel value by the root font size of the page. On a site that leaves the html element at the browser default, the root is 16px, so 24px becomes 1.5rem and 14px becomes 0.875rem. The reason to bother: when a visitor bumps their browser's default text size to 20px because they find small type hard to read, every rem value on your site scales with it. Pixel values do not.

Browser zoom scales everything regardless of units, but the font size setting in Chrome, Firefox and Safari only affects relative units. A site built entirely in px quietly ignores that preference.

How to use the converter

  1. Set your root font size. Leave it at 16 unless your stylesheet sets html { font-size: ... } to something else. The page URL updates so you can bookmark a base like 10 or 18.
  2. Type a value and pick its unit. Every other unit updates instantly. Click any result to copy it with its unit attached.
  3. Set the parent size for em and %. em and percentage font sizes are relative to the parent element, not the root, so a 1.25em heading inside a 20px card is 25px.
  4. Set a viewport for vw and vh. 1vw is 1% of the viewport width, so on a 1440px design comp, 48px is 3.3333vw.
  5. Bulk convert a stylesheet. Paste CSS into the bulk box and every px value at or above the threshold is rewritten in rem. Values inside url() and quoted strings are never touched.

Which units to use where

A practical split that holds up on real projects:

  • rem for font sizes, spacing, max-widths and anything that should respect the reader's text size preference.
  • em for padding and icon sizes inside components that should scale with their own text, like buttons and badges. A button with padding: 0.75em 1.25em stays proportional at every size you set it.
  • px for hairline borders, outlines, small shadows and image dimensions where an exact device-independent pixel is the point.
  • vw and vh for layout that should track the screen, and inside clamp() for fluid type. Never use vw alone for font size: it ignores the user's text preference entirely. Our fluid type scale generator builds clamp() values that combine rem and vw so text stays fluid and zoomable.

Example: converting a component

A card before and after bulk conversion with a 16px root and a 3px threshold. The 1px border stays in pixels and the media query is left alone.

/* before */
.card { padding: 24px 32px; border: 1px solid #ddd; border-radius: 12px; }
.card h3 { font-size: 20px; margin-bottom: 8px; }
@media (min-width: 768px) { .card { padding: 40px; } }

/* after */
.card { padding: 1.5rem 2rem; border: 1px solid #ddd; border-radius: 0.75rem; }
.card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .card { padding: 2.5rem; } }

Why media queries are left in px

Inside a media query, rem and em do not use your html font size. They always resolve against the browser's initial font size, which is 16px unless the visitor changed it. So @media (min-width: 48rem) means 768px at default settings, not 48 times your custom root. Converting media queries with a 10px root would silently break every breakpoint. If you want breakpoints that move when users enlarge text, convert them by hand using 16 as the divisor, and prefer em, which behaves most consistently across browsers.

Common mistakes

  • Converting with the wrong root. If your theme sets html { font-size: 62.5% }, your root is 10px and every value needs dividing by 10, not 16. Check the computed font size of html in DevTools before converting a whole stylesheet.
  • Setting the root in px. html { font-size: 16px } overrides the visitor's preference and undoes the benefit of rem. Leave it unset, or use a percentage.
  • Compounding em. A list with font-size: 0.9em nested three levels deep ends up at 0.73em. Use rem for font sizes unless compounding is what you want.

Converting units is a good moment to check the rest of your front end too. The website launch checklist covers accessibility, performance and SEO checks worth running before a site goes live.

Frequently asked questions

How many pixels is 1rem?

1rem equals the font size of the root html element. Every major browser ships with a default of 16px, so 1rem is 16px unless the site or the visitor changes it. If a visitor raises their default font size to 20px, 1rem becomes 20px and everything sized in rem grows with it.

How do I convert px to rem?

Divide the pixel value by the root font size. With the default 16px root, 24px divided by 16 is 1.5rem, and 14px divided by 16 is 0.875rem. To go the other way, multiply the rem value by the root size.

What is the difference between rem and em?

rem is always relative to the root html font size, so 1.5rem means the same thing everywhere on the page. em is relative to the font size of the current element, or of the parent when used on font-size itself, so nested em values compound. Use rem for most sizing and em for things that should scale with their own text, like button padding or icon size.

Should I set html font-size to 62.5%?

It makes the math easy, since 1rem becomes 10px, but it also means every component has to restore a readable body size and third-party widgets built for a 16px root can render tiny. Most teams now keep the 16px default and use a converter or a CSS function instead.

Should borders and shadows be in rem?

Usually not. A 1px hairline border should stay 1px at any text size, and small shadows look odd when they scale. That is why the bulk converter has a minimum threshold: values below it, such as 1px and 2px, are left in pixels.