About This Tool
px to rem converts pixels to rem based on the root element's font size. The default is 16px, but you can use 10, 14, 18, or another positive value to match your project.
How to Use
- Enter the px values you want to convert.
- Set your project's actual Root Font Size, which must be greater than 0.
- View the result and calculation explanation.
- Copy the rem result, or clear the input to convert other sizes.
Examples
- 32px ÷ 16px = 2rem.
- 24px ÷ 16px = 1.5rem.
- 20px ÷ 10px = 2rem.
How the Calculation Works
rem = px ÷ root font size. For a 16px root font size, 24px equals 1.5rem. Browsers commonly default to 16px, but site styles and user settings can change this, so use the actual value.
Common Uses
- Convert pixel dimensions in design files to rem.
- Use consistent units for project spacing and font sizes.
- Check how different root font sizes affect conversions.
Privacy
Your input and results stay in your browser and are not uploaded or saved automatically. Copy any results you want to keep and save them yourself before leaving the page.
FAQ
What is rem?
rem is a CSS length unit relative to the document root element's font size. The root element is usually html.
How many pixels are in 1rem?
It depends on the root font size. With a 16px root, 1rem = 16px; with a 10px root, 1rem = 10px.
Why can't Root Font Size be 0?
Converting px to rem divides by the root font size, so zero would cause division by zero. Negative values are also invalid font sizes.
What is the difference between rem and em?
rem uses the root element's font size. em usually relates to the current element's font size; when used for font-size itself, it relates to the parent's computed font size.