Convert CSS rem units to pixels. Enter one or several rem values and your root font size (16px by default) to get pixels, points and a ready-to-paste CSS line, plus a quick table from 0.125rem to 6rem.
Last updated:
rem
One value, or several separated by spaces or commas (e.g. 0.75 1 1.25 2).
px
The html element's font size. Browser default: 16px.
Enter your values to see the result.
Advertisement
Advertisement
How to use the REM to PX Converter
Enter a rem value, or several separated by spaces or commas.
Set the root font size of your page: 16px unless your CSS changes the html font size.
Read the pixels plus points and percent.
Copy the CSS or use the quick table for common sizes.
Need the reverse? Use the PX to REM converter linked below the result.
REM to PX formula
px = rem × root font size and, the other way, rem = px ÷ root font size. The root font size is the computed font-size of the <html> element, 16px by default.
Examples at a 16px root: 0.5rem = 8px, 1.25rem = 20px, 2rem = 32px. At a 10px root (html { font-size: 62.5% }): 1.4rem = 14px, 2.4rem = 24px.
Common REM sizes
REM
PX (16px root)
PX (10px root)
Typical use
0.75rem
12px
7.5px
Small print, captions
0.875rem
14px
8.75px
Secondary text, buttons
1rem
16px
10px
Body text
1.125rem
18px
11.25px
Large body text
1.25rem
20px
12.5px
h5 / lead text
1.5rem
24px
15px
h4
2rem
32px
20px
h2 / h1 on mobile
3rem
48px
30px
Hero headings
Media queries in rem or em use the browser's default font size (usually 16px), not the html font size you set in CSS.
Frequently asked questions
How do I convert rem to px?
Multiply the rem value by the root font size: px = rem × root. With the default 16px root, 1.5rem = 1.5 × 16 = 24px and 0.875rem = 14px.
How many pixels is 1rem?
1rem equals the font size of the root html element. In every major browser that is 16px by default, unless the page's CSS or the user's browser settings change it.
What is the 62.5% trick?
Setting html { font-size: 62.5%; } makes the root 10px (62.5% of 16px), so 1.6rem = 16px and conversions are easy. It still respects users who raise their default font size, because it is a percentage.
What is the difference between rem and em?
rem is relative to the root html font size, so it is the same everywhere on the page. em is relative to the font size of the current element (or its parent for font-size), so nested em values compound.
Why use rem instead of px?
Sizes in rem scale with the user's browser font-size setting, which helps accessibility. Pixel font sizes ignore that setting in most browsers, although page zoom still scales both.
How do Tailwind spacing units map to px?
In Tailwind CSS, one spacing unit is 0.25rem, which is 4px at the default 16px root. So p-4 = 1rem = 16px and text-sm = 0.875rem = 14px.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.