PX to REM Converter
Turn pixel sizes from a design into rem values for your CSS, based on whatever root font size your site uses.
- rem
- 1.0000rem
- em
- 1.0000em
- px
- 16px
- Base
- 16px
Runs in your browser. Nothing you enter is uploaded.
What it does
Enter a size in pixels and the root font size of your site, and the converter divides one by the other to give the rem value, rounded to four decimals and ready to copy. It also shows the same number as em, along with the px and base you entered.
This comes up when a mockup is specified in pixels but your theme, Tailwind config, or custom stylesheet uses rem so text scales with the reader's browser settings. The base defaults to 16px, the usual browser default, and you can change it if your site sets a different root size.
How to use it
- 1
Type the size you want to convert in the Pixels field.
- 2
Set the Root font size field to your site's base size (16 unless your CSS changes it).
- 3
Read the rem result in the stat grid, with the em equivalent beside it.
- 4
Click the copy button to copy the rem value, formatted like 1.5000rem.
What you get
Four stats: the rem value and em value to four decimals, the pixel value you entered, and the base size. The copy button copies the rem value with its unit.
When to use it
- Translate a mockup into CSS
- A designer hands over a 28px heading and 18px body text. Convert each to rem before adding them to your stylesheet.
- Edit a store theme
- Adjust a Shopify or WordPress theme that sizes type in rem without guessing what 1.125rem looks like.
- Work with a 10px root
- If your CSS sets html { font-size: 62.5% }, enter 10 as the root so 24px maps cleanly to 2.4rem.
Example
Input
Pixels: 24 Root font size: 16
Output
rem: 1.5000rem, em: 1.5000em, px: 24px, Base: 16px
24 divided by 16 is 1.5. With a root of 10, the same 24px would be 2.4000rem.
Tips
- Check your stylesheet for a font-size on the html element before converting. If none is set, the browser default of 16px applies.
- The em figure only matches the rem figure when the parent element uses the root font size. Inside a larger or smaller parent, em values compound.
- You can trim trailing zeros when pasting: 1.5000rem and 1.5rem are the same value.
- Rem is best for font sizes and spacing that should scale with the reader's settings. Borders of 1px are usually fine left in pixels.
Questions
What root font size should I use for px to rem?
Use whatever font-size your site sets on the html element. If your CSS never sets one, browsers default to 16px, which is what the tool starts with.
Why does the converter show the same number for rem and em?
Both are calculated as pixels divided by the base you enter. That em value is only accurate when the element's parent has the same font size as the root.
How do I convert rem back to pixels?
Multiply the rem value by the root font size. For example, 1.25rem at a 16px root is 20px. You can also enter trial pixel values here until the rem matches.