PX to REM Converter: Pixels, rem and em for Your Base Size
Convert px to rem and em, or rem and em back to px, for the root size you use. Get a table of common sizes you can copy into your CSS. Runs in your browser.
Everything is worked out in this browser. Nothing is uploaded or sent to a server.
The tool failed to load. Please reload the page.
Report a problem or suggest an improvement
Nothing is sent until you press Send. Your measurements are included only if you tick the box, and you can see the full report below first.
When to use this
- You have a design in pixels and want the rem values for your CSS.
- Your root font size is not 16 px and you need the whole scale for it.
- You want to turn rem or em back into pixels to check a size.
How to use
- Type the value and choose its unit: px, rem or em.
- Set the root font size. It is 16 px unless your CSS changes it.
- Add a parent font size only if you want em values for a nested element.
- Press Convert. Copy the CSS value or the table.
Examples
- 24 px at the default size: 24 px divided by a root size of 16 px is 1.5 rem.
- A 10 px root size: Some projects set the root to 10 px so 1.6 rem is 16 px. Set the root size to 10 and the table shows the whole scale.
Understanding the result
1 rem is the root font size in pixels, so px divided by the root size is rem. 1 em is the font size of the parent element, so px divided by the parent size is em. If you leave the parent blank the tool uses the root size for em, which is only right when the parent has the root size. Values are shown with up to 4 decimals and no trailing zeros.
Limitations
- This converts numbers. It does not read your stylesheet, so it cannot know the real parent size of an element.
- If a visitor changes their browser font size, rem and em values scale with it but px values do not. The table shows the default, not each user's setting.
- Media queries, line height and letter spacing in em depend on the property they are used on, which this tool does not model.
- Long decimals are rounded to 4 places, so a very small rem value can be off by a fraction of a pixel.
FAQ
How do I convert px to rem?
Divide the pixels by the root font size. At the default 16 px, 24 px is 24 / 16 = 1.5 rem.
What is the difference between rem and em?
rem is relative to the root element's font size, em to the font size of the parent element. em values can compound when elements are nested.
What is the default root font size?
Most browsers use 16 px unless the user or your CSS changes it. Check the font size on your html element.
Why use rem instead of px?
rem sizes follow the font size a person sets in their browser, which can help readers who need larger text. px sizes stay fixed.
Does this tool send my numbers anywhere?
No. The conversion runs in your browser. Nothing you type is sent to a server.
Related tools
- Text
Sort Lines Alphabetically, Naturally, by Number or by Length
Paste a list and sort the lines A to Z, by natural number order, by the number at the start, or by length. Remove repeats and blank lines, then copy the result. Runs in your browser.
- Text
Compare Two Lists: Find What Is in One and Not the Other
Paste two lists and see the items only in A, only in B, in both, and all together, with counts and a copy button for each. Runs in your browser, nothing is uploaded.
- Time
Meeting Cost Calculator: What Does This Meeting Cost?
Work out what a meeting costs from the number of people, an hourly cost you type and the length. See cost per minute and run a live meter. Runs in your browser.
- Dev
WCAG Color Contrast Checker: Ratio and the Closest Color That Passes
Check the WCAG contrast ratio of a text and background color for AA and AAA, then get the closest lighter or darker color that passes. Runs in your browser.