What is the default root font size?

Browsers default to 16px, so 16px equals 1rem. Change the root value here if your project uses a different base.

What is the difference between rem and em?

rem is always relative to the root font size, while em is relative to the parent element's font size. rem is more predictable for spacing and layout.

rem respects the user's browser font-size setting, so text and layouts scale for accessibility, which fixed px values do not.

CSS & Design

Convert px to rem and em based on the root font size.

Free foreverRuns in your browserNo sign-up

Pixels (px)

rem

Root font size (px)

24px

rem

1.5rem

em (at this base)

1.5em

rem is relative to the root font size (default 16px). em is relative to the parent; here it matches rem at the chosen base.

rem and em units keep CSS scalable and accessible, but you often start from a pixel value in a design.

This converter turns px into rem and em for your chosen root font size, and works both ways, so you can move between units without doing the maths.

It runs in your browser.

24px to rem

Input: 24px at 16px root

Output: 1.5rem

Dividing the pixel value by the root font size gives the rem value.

What is the default root font size?: Browsers default to 16px, so 16px equals 1rem. Change the root value here if your project uses a different base.
What is the difference between rem and em?: rem is always relative to the root font size, while em is relative to the parent element's font size. rem is more predictable for spacing and layout.
Why use rem instead of px?: rem respects the user's browser font-size setting, so text and layouts scale for accessibility, which fixed px values do not.