Skip to content
1440px

rem to px

px = rem × root font size — with a live converter and the full table.

Formula
px = rem × root font size

At the browser default root size of 16px: 2.5rem = 40px.

The inverse. Useful when you need to know what a rem-based spacing scale actually renders as.

Converter

—

rem to px conversion table

rem to px at each common root font size
Value10px root12px root14px root16px root18px root20px root
0.125rem1.25px1.5px1.75px2px2.25px2.5px
0.25rem2.5px3px3.5px4px4.5px5px
0.375rem3.75px4.5px5.25px6px6.75px7.5px
0.5rem5px6px7px8px9px10px
0.625rem6.25px7.5px8.75px10px11.25px12.5px
0.75rem7.5px9px10.5px12px13.5px15px
0.875rem8.75px10.5px12.25px14px15.75px17.5px
1rem10px12px14px16px18px20px
1.125rem11.25px13.5px15.75px18px20.25px22.5px
1.25rem12.5px15px17.5px20px22.5px25px
1.375rem13.75px16.5px19.25px22px24.75px27.5px
1.5rem15px18px21px24px27px30px
1.75rem17.5px21px24.5px28px31.5px35px
2rem20px24px28px32px36px40px
2.25rem22.5px27px31.5px36px40.5px45px
2.5rem25px30px35px40px45px50px
2.75rem27.5px33px38.5px44px49.5px55px
3rem30px36px42px48px54px60px
3.5rem35px42px49px56px63px70px
4rem40px48px56px64px72px80px
4.5rem45px54px63px72px81px90px
5rem50px60px70px80px90px100px
6rem60px72px84px96px108px120px
7rem70px84px98px112px126px140px
8rem80px96px112px128px144px160px
9rem90px108px126px144px162px180px
10rem100px120px140px160px180px200px
12rem120px144px168px192px216px240px
16rem160px192px224px256px288px320px
20rem200px240px280px320px360px400px
24rem240px288px336px384px432px480px

Set it up once in CSS

CSS
/* 62.5 % makes 1rem = 10px, so 1.6rem = 16px.
   Convenient, but it overrides the user's browser preference at the root —
   prefer keeping the default and doing the maths. */
html { font-size: 100%; }        /* 16px, respects user preference */

:root {
  --step-0: 1rem;      /* 16px */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.5rem;    /* 24px */
  --step-3: 2rem;      /* 32px */
}

/* Fluid type without a converter, using clamp() */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

Questions

How do I convert rem to px?

px = rem × root font size. With the browser default root font size of 16px, 2.5rem = 40px.

What if the root font size is not 16px?

Then every value changes proportionally. The table above shows all six common root sizes side by side. Note that the root font size is whatever html computes to — if a user has increased their browser's default text size, the pixel result changes accordingly.

How do I convert px back to rem?

Invert the formula, or use the px to rem converter.

Other conversions

px → rempx → emem → pxpx → ptpt → pxpx → mmmm → pxpx → cmpx → inin → px

Common rem values

0.125rem2px0.25rem4px0.375rem6px0.5rem8px0.625rem10px0.75rem12px0.875rem14px1rem16px1.125rem18px1.25rem20px1.375rem22px1.5rem24px1.75rem28px2rem32px2.25rem36px2.5rem40px2.75rem44px3rem48px3.5rem56px4rem64px4.5rem72px5rem80px6rem96px7rem112px8rem128px9rem144px10rem160px12rem192px16rem256px20rem320px24rem384px
Conversions follow the CSS Values and Units specification, in which 1in is defined as exactly 96px. Values are computed, not tabulated by hand.