PX to REM converter
Convert pixel sizes from a design file into rem or em units for responsive CSS, or turn rem values back into pixels. Front end developers use it to keep spacing and type scales consistent.
- Runs in your browser
- Free, no account needed
- Copy or download the result
Result
Example
24px 16px 32px 14
Root font size: 16px (1rem = 16px) 24px = 1.5rem 16px 32px = 1rem 2rem 14 = 0.875rem CSS-ready values: 1.5rem 1rem 2rem 0.875rem
How to use the px to rem converter
- Type values in the box, one line each, such as 24px, 1.5rem or 16px 24px.
- Choose what Plain numbers are, then set Root font size in px, Relative unit and Maximum decimal places.
- Press Run to see each conversion and the CSS-ready values.
- Press Copy result or Download to paste the values into your stylesheet.
How it works
rem = px / root font size, and px = rem x root font size. The default root size is 16px, which browsers use unless a user or stylesheet changes it.
Values ending in px are converted to your relative unit, and values ending in rem or em are converted to pixels. Plain numbers follow the Plain numbers are setting.
Each line can hold up to 8 values, so shorthand such as 16px 24px stays on one line. Up to 500 lines are allowed.
em is treated as relative to the same base size you enter. In real CSS, em depends on the parent element's font size, so set the base to that size.
Everything runs in your browser. Your input is not uploaded or stored.
Questions and answers
How many pixels is 1rem?
1rem equals the root font size, which is 16px in most browsers by default. So 1.5rem is 24px.
How do I convert px to rem?
Divide the pixel value by the root font size. 24px / 16 = 1.5rem.
What is the difference between rem and em?
rem is relative to the root html font size, while em is relative to the font size of the parent element. rem is easier to predict in nested layouts.