Free PX to REM Converter: px, rem, em, pt & %

Convert between px, rem, em, pt and percent with your own base font size. Paste a block of CSS to convert it all at once.

  • 100% free
  • Custom base size
  • Convert whole CSS
  • Cheat sheet
1
Set your base sizeThe root font size of your site.
Browsers use 16px unless you change it.
px
Quick sizes
em and percent depend on the parent element. Leave equal to the base if unsure.
px
2
ConvertA value, or a block of CSS.
3
Cheat sheetpx to rem. Click to copy.

☕ Support ProFigma

Did this tool save you time? Buy me a coffee.

Hi, I'm Mahesh 👋 I build every ProFigma tool myself and keep them free for designers and developers. If one helped you today, a small coffee keeps new tools and features coming.

  • Keeps every tool free
  • Funds new tools & features
  • Supports an indie creator
Buy Me a CoffeeSecure checkout via Gumroad · Any amount
How it works

Convert px to rem in three steps

  1. Set your base sizeMost browsers use 16px. Change it if your site uses a different root font size.
  2. Type a valueEnter px, rem, em, pt or % and see every other unit at once.
  3. Copy the resultClick a result to copy it, or paste a block of CSS to convert all its px values.
Why this one

A converter built for real CSS work

All units at once

px, rem, em, pt and % in one view, so you don't convert one at a time.

Your own base size

Works with 16px, 10px (the 62.5% trick), 18px or anything else.

Bulk CSS conversion

Paste a block of CSS and convert every px value in one click.

Handy cheat sheet

A ready list of common sizes, from 8px to 96px, with one-click copy.

Tips

Tips for better results

  • Use rem for font sizes. People who change their browser font size will get a page that respects it.
  • Use px for hairlines. A 1px border looks best as 1px. Turn on Keep 1px in the CSS converter.
  • Use em for button padding. Padding in em grows with the button's own text size.
  • Don't set html to a px size. It overrides the user's setting. Leave it at 100% and use rem.
FAQ

PX to REM questions

How do I convert px to rem?

Divide the pixel value by the root font size. With the usual 16px base, 24px ÷ 16 = 1.5rem. This tool does it for you and lets you change the base.

What is the difference between rem and em?

rem is relative to the root (html) font size, so it stays predictable everywhere. em is relative to the font size of the parent element, so nested elements can compound. Use rem for most sizes and em for things that should scale with their own text, like button padding.

What is the default root font size?

16px in all major browsers, unless the user has changed it in their browser settings. That is why 1rem usually equals 16px.

Why use rem instead of px?

rem respects the user's font size setting, so people who need larger text get it. It also makes it easy to scale a whole design by changing one value.

How do I convert a whole CSS file?

Use the CSS block tab. Paste your CSS, choose the base size and copy the result. Every px value becomes rem. You can keep 1px borders as px.

How many px is 1rem, 1.5rem or 2rem?

With a 16px base: 1rem = 16px, 1.5rem = 24px, 2rem = 32px. The cheat sheet on this page lists the common sizes.

What about pt and percent?

1pt is 1.333px. A percent value is relative to the parent size, so 150% of 16px is 24px, or 1.5em. The tool converts all of them.

Is anything uploaded?

No. The conversion happens in your browser.

Read the guidePX to REM: How to Convert and When to Use Each OneThe formula, a cheat sheet and clear rules for rem, em and px.Read more →

QR Code Generator

Custom QR codes for links, Wi-Fi, contacts and WhatsApp, with your logo and colours.

Case Converter

Switch text between 15+ cases in one click.

Image Compressor

Shrink photos up to 90% right in your browser.

Contrast Checker

WCAG 2.2 AA and AAA checks for any colour pair.

UI Grid Maker

Design Figma and CSS grids with a live calculator.

PNG to JPG Converter

Bulk convert images in three steps.