How to convert px to rem
- Type a pixel value in the Pixels box. The rem value appears below as you type, with the calculation that produced it.
- If your site sets a different root font size, enter it in Root font size. The default, 16px, is what browsers use unless you change it.
- To convert a list, paste one value per line into the Batch box. Each line gets its own result, and blank lines are skipped.
- Click Copy to put the result on your clipboard, or Download .txt to save the batch as a file.
Why use this tool
Turning a design file into CSS
Design tools such as Figma measure type and spacing in pixels. Convert the 14px body text, 24px headings and 32px gaps to rem before they go into your stylesheet, so they scale with the reader’s font settings.
Moving a stylesheet from px to rem
Refactoring an older codebase? Paste every pixel size the stylesheet uses into the Batch box and get the whole list back in rem, one line per value, ready to search and replace.
Building a type or spacing scale
Design tokens and utility frameworks are usually defined in rem. Convert the pixel steps of your scale (4, 8, 12, 16, 24, 32…) and check that they come out as clean values.
Sites with a 62.5% root
Some stylesheets set html { font-size: 62.5% } so that 1rem equals 10px. Set the root font size to 10 and the converter uses it; the link to the rem to px converter keeps it too.
Private by design
Every calculation runs in this browser tab, so results update the moment you change a value. There is nothing to upload, no account to create and nothing to install.
Good to know
The formula. rem = px ÷ root font size. With the default root of 16px, 24px ÷ 16 = 1.5rem. The root font size is the font-size of the html element: 16px in every major browser unless the user or your stylesheet changes it.
What you can type. Whole numbers, decimals, negative values and a decimal comma all work: 24, 24px, 13.5, 12,5 and -8. A comma is read as a decimal point, so type 1000, not 1,000, for a thousand. A value that ends in rem is already in rem, so it is flagged instead of being converted as if it were pixels. Results are rounded to at most four decimals, with trailing zeros dropped (0.09375rem shows as 0.0938rem). At a 16px root that rounding is under a thousandth of a pixel.
Batch mode. Paste one value per line. Every non-blank line gives one line of output in the same order. A line that is not a number becomes a CSS comment such as /* abc: Not a number */, so you can see what failed and still paste the result into a stylesheet.
Sharing a root font size. A root font size other than 16 is added to the address, for example ?base=10, so a link opens the converter with the same setting. The values you type never go in the address.
One catch with media queries. Inside a media query, rem is based on the browser’s default font size, not on the font size your stylesheet sets on html. With a 62.5% root, @media (min-width: 40rem) still means 640px at default settings, not 400px.
In — Batch, root font size 16px
12
14px
18
24
2remOut — rem values, one per line
0.75rem
0.875rem
1.125rem
1.5rem
/* 2rem: Already in rem */| px | rem |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.375rem |
| 7px | 0.4375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
| 11px | 0.6875rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.0625rem |
| 18px | 1.125rem |
| 19px | 1.1875rem |
| 20px | 1.25rem |
| 21px | 1.3125rem |
| 22px | 1.375rem |
| 23px | 1.4375rem |
| 24px | 1.5rem |
| 25px | 1.5625rem |
| 26px | 1.625rem |
| 27px | 1.6875rem |
| 28px | 1.75rem |
| 29px | 1.8125rem |
| 30px | 1.875rem |
| 31px | 1.9375rem |
| 32px | 2rem |
| 33px | 2.0625rem |
| 34px | 2.125rem |
| 35px | 2.1875rem |
| 36px | 2.25rem |
| 37px | 2.3125rem |
| 38px | 2.375rem |
| 39px | 2.4375rem |
| 40px | 2.5rem |
| 41px | 2.5625rem |
| 42px | 2.625rem |
| 43px | 2.6875rem |
| 44px | 2.75rem |
| 45px | 2.8125rem |
| 46px | 2.875rem |
| 47px | 2.9375rem |
| 48px | 3rem |
| 49px | 3.0625rem |
| 50px | 3.125rem |
| 51px | 3.1875rem |
| 52px | 3.25rem |
| 53px | 3.3125rem |
| 54px | 3.375rem |
| 55px | 3.4375rem |
| 56px | 3.5rem |
| 57px | 3.5625rem |
| 58px | 3.625rem |
| 59px | 3.6875rem |
| 60px | 3.75rem |
| 61px | 3.8125rem |
| 62px | 3.875rem |
| 63px | 3.9375rem |
| 64px | 4rem |
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. At the default root of 16px, 24px is 24 ÷ 16 = 1.5rem and 12px is 0.75rem. If your site sets another root size, divide by that number instead; the Root font size box does this for you.
What root font size should I use?
Use the font-size your stylesheet sets on the html element. If it sets none, use 16, the default in every major browser. If it sets 62.5%, use 10. If it sets a percentage, multiply 16 by it: 112.5% is 18px.
Why use rem instead of px?
Sizes in rem follow the reader’s browser font size setting. Someone who raises their default font size for readability gets larger text and spacing on your site, while sizes in px stay fixed. Browser zoom scales both, but the font size setting only scales rem and em.
What is the difference between rem and em?
rem is relative to the root (html) font size, so 1.5rem means the same size everywhere on the page. em is relative to the font size of the element itself, which it inherits from its parent, so nested em values compound. rem is easier to predict for most sizes.
Why does my result have four decimals?
Some pixel values do not divide evenly by the root size. 1.5px at 16px is 0.09375rem, which the converter rounds to 0.0938rem. At a 16px root, four decimals keep the error below a thousandth of a pixel, far smaller than anything a screen can show.