PX to REM Converter
Result: 1rem
Calculation based on a root font-size of 16 pixel.
How to Use the converter?
Type a pixel value to get REM
Or type in the REM field to convert back to pixels
Change the root font size if yours isn't 16px
How to Convert PX to REM
To convert pixels to REM, divide the pixel value by the root font size. Browsers set the root (<html>) font size to 16px by default, so the formula is REM = PX ÷ 16. For example, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem.
Designs usually arrive in pixels: Figma, Sketch and most style guides specify type and spacing in px. Converting those values to REM before they go into your CSS means the layout scales with the reader's browser font-size setting instead of staying locked at a fixed size.
If your project sets a different root size, for example html { font-size: 62.5%; } which makes 1rem = 10px, enter that value in the root font size field above and every conversion updates. With a 10px root, 24px becomes 2.4rem.
Some values don't divide evenly: 13px is 0.8125rem and 15px is 0.9375rem. Keep up to four decimals in your CSS. Browsers handle fractional REM values fine, while rounding 0.8125rem to 0.8rem quietly turns 13px into 12.8px.
PX to REM Conversion Chart (16px Root)
Pixels ↔︎ REM
- 1px = 0.0625rem
- 2px = 0.125rem
- 4px = 0.25rem
- 6px = 0.375rem
- 8px = 0.5rem
- 10px = 0.625rem
- 12px = 0.75rem
- 13px = 0.8125rem
- 14px = 0.875rem
- 15px = 0.9375rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 22px = 1.375rem
- 24px = 1.5rem
- 28px = 1.75rem
- 30px = 1.875rem
- 32px = 2rem
- 36px = 2.25rem
- 40px = 2.5rem
- 44px = 2.75rem
- 48px = 3rem
- 56px = 3.5rem
- 64px = 4rem
- 72px = 4.5rem
- 80px = 5rem
- 96px = 6rem
- 100px = 6.25rem
PX to REM with a 10px Root (html { font-size: 62.5% })
10px
1rem
12px
1.2rem
14px
1.4rem
16px
1.6rem
18px
1.8rem
20px
2rem
24px
2.4rem
32px
3.2rem
Quick Conversion Tips
Converting PX to REM
Divide the pixel value by the root font size (16px by default). Example: 18px ÷ 16 = 1.125rem
Using a 62.5% root
Setting html { font-size: 62.5% } makes 1rem = 10px, so PX ÷ 10 = REM. Example: 18px ÷ 10 = 1.8rem
Learn More About CSS Units
REM vs PX: The Complete Developer's Guide
When to use REM and when to use PX, how the root font size affects every conversion, and how to set up a REM-based type scale.
Read the guide →Related Converters
PX to REM: Frequently Asked Questions
How do I convert PX to REM?
Divide the pixel value by the root font size, which is 16px by default. For example, 16px = 1rem, 24px = 1.5rem and 32px = 2rem. The converter above does the calculation for you, in both directions.
What is the formula for PX to REM?
REM = PX ÷ root font size. With the default 16px root: 8px = 0.5rem, 12px = 0.75rem, 20px = 1.25rem. If your root font size is different, enter it in the root font size field.
What is 14px in REM?
14px is 0.875rem at the default 16px root font size (14 ÷ 16 = 0.875).
What is 12px in REM?
12px is 0.75rem at a 16px root font size (12 ÷ 16 = 0.75).
Does html { font-size: 62.5% } change the conversion?
Yes. 62.5% of 16px is 10px, so 1rem = 10px and the formula becomes REM = PX ÷ 10. Set the root font size field to 10 to convert with that base.
Should I convert every PX value to REM?
Not necessarily. REM works best for font sizes, spacing and layout widths that should follow the reader's font-size preference. Hairline borders, box shadows and other decorative details often stay in pixels.