PX to REM Converter
Convert px to rem and rem to px at any root font size, with em, pt, and vw equivalents and a full 1–96px table.
Open source on GitHubConvert
Browsers default to 16px. Change it if your html element sets another font-size.
Result
24px at a 16px root
1.5rem
1–96px at a 16px root
| px | rem | pt |
|---|---|---|
| 1px | 0.0625rem | 0.75pt |
| 2px | 0.125rem | 1.5pt |
| 3px | 0.1875rem | 2.25pt |
| 4px | 0.25rem | 3pt |
| 5px | 0.3125rem | 3.75pt |
| 6px | 0.375rem | 4.5pt |
| 7px | 0.4375rem | 5.25pt |
| 8px | 0.5rem | 6pt |
| 9px | 0.5625rem | 6.75pt |
| 10px | 0.625rem | 7.5pt |
| 11px | 0.6875rem | 8.25pt |
| 12px | 0.75rem | 9pt |
| 13px | 0.8125rem | 9.75pt |
| 14px | 0.875rem | 10.5pt |
| 15px | 0.9375rem | 11.25pt |
| 16px | 1rem | 12pt |
| 17px | 1.0625rem | 12.75pt |
| 18px | 1.125rem | 13.5pt |
| 19px | 1.1875rem | 14.25pt |
| 20px | 1.25rem | 15pt |
| 21px | 1.3125rem | 15.75pt |
| 22px | 1.375rem | 16.5pt |
| 23px | 1.4375rem | 17.25pt |
| 24px | 1.5rem | 18pt |
| 25px | 1.5625rem | 18.75pt |
| 26px | 1.625rem | 19.5pt |
| 27px | 1.6875rem | 20.25pt |
| 28px | 1.75rem | 21pt |
| 29px | 1.8125rem | 21.75pt |
| 30px | 1.875rem | 22.5pt |
| 31px | 1.9375rem | 23.25pt |
| 32px | 2rem | 24pt |
| 33px | 2.0625rem | 24.75pt |
| 34px | 2.125rem | 25.5pt |
| 35px | 2.1875rem | 26.25pt |
| 36px | 2.25rem | 27pt |
| 37px | 2.3125rem | 27.75pt |
| 38px | 2.375rem | 28.5pt |
| 39px | 2.4375rem | 29.25pt |
| 40px | 2.5rem | 30pt |
| 41px | 2.5625rem | 30.75pt |
| 42px | 2.625rem | 31.5pt |
| 43px | 2.6875rem | 32.25pt |
| 44px | 2.75rem | 33pt |
| 45px | 2.8125rem | 33.75pt |
| 46px | 2.875rem | 34.5pt |
| 47px | 2.9375rem | 35.25pt |
| 48px | 3rem | 36pt |
| 49px | 3.0625rem | 36.75pt |
| 50px | 3.125rem | 37.5pt |
| 51px | 3.1875rem | 38.25pt |
| 52px | 3.25rem | 39pt |
| 53px | 3.3125rem | 39.75pt |
| 54px | 3.375rem | 40.5pt |
| 55px | 3.4375rem | 41.25pt |
| 56px | 3.5rem | 42pt |
| 57px | 3.5625rem | 42.75pt |
| 58px | 3.625rem | 43.5pt |
| 59px | 3.6875rem | 44.25pt |
| 60px | 3.75rem | 45pt |
| 61px | 3.8125rem | 45.75pt |
| 62px | 3.875rem | 46.5pt |
| 63px | 3.9375rem | 47.25pt |
| 64px | 4rem | 48pt |
| 65px | 4.0625rem | 48.75pt |
| 66px | 4.125rem | 49.5pt |
| 67px | 4.1875rem | 50.25pt |
| 68px | 4.25rem | 51pt |
| 69px | 4.3125rem | 51.75pt |
| 70px | 4.375rem | 52.5pt |
| 71px | 4.4375rem | 53.25pt |
| 72px | 4.5rem | 54pt |
| 73px | 4.5625rem | 54.75pt |
| 74px | 4.625rem | 55.5pt |
| 75px | 4.6875rem | 56.25pt |
| 76px | 4.75rem | 57pt |
| 77px | 4.8125rem | 57.75pt |
| 78px | 4.875rem | 58.5pt |
| 79px | 4.9375rem | 59.25pt |
| 80px | 5rem | 60pt |
| 81px | 5.0625rem | 60.75pt |
| 82px | 5.125rem | 61.5pt |
| 83px | 5.1875rem | 62.25pt |
| 84px | 5.25rem | 63pt |
| 85px | 5.3125rem | 63.75pt |
| 86px | 5.375rem | 64.5pt |
| 87px | 5.4375rem | 65.25pt |
| 88px | 5.5rem | 66pt |
| 89px | 5.5625rem | 66.75pt |
| 90px | 5.625rem | 67.5pt |
| 91px | 5.6875rem | 68.25pt |
| 92px | 5.75rem | 69pt |
| 93px | 5.8125rem | 69.75pt |
| 94px | 5.875rem | 70.5pt |
| 95px | 5.9375rem | 71.25pt |
| 96px | 6rem | 72pt |
Runs entirely in your browser. Nothing you type here is uploaded or stored.
px, rem, em, pt, and vw compared. What each unit is relative to, and when to use it.
| Unit | Relative to | Use it for |
|---|---|---|
| px | A CSS pixel, 1/96 of an inch | Borders, shadows, and details that should not scale with text. |
| rem | Multiple of the root (html) font size | Font sizes, spacing, and layout. Respects the visitor’s browser font-size setting. |
| em | Multiple of the parent element’s font size | Padding that should scale with a component’s own text. Compounds when nested: 1.2em inside 1.2em is 1.44× the root. |
| pt | A point, 1/72 of an inch (1px = 0.75pt) | Print stylesheets and handing values to designers who work in points. |
| vw | 1% of the viewport width | Fluid type and full-bleed layouts. Combine with rem in clamp() so text never gets too small to read. |
| % | Relative to the parent (font-size: % uses the parent font size) | Widths in fluid layouts; font-size: 62.5% on html makes 1rem = 10px. |
A common type scale in rem and px. Tailwind CSS font sizes at a 16px root.
| Class | rem | px |
|---|---|---|
| text-xs | 0.75rem | 12px |
| text-sm | 0.875rem | 14px |
| text-base | 1rem | 16px |
| text-lg | 1.125rem | 18px |
| text-xl | 1.25rem | 20px |
| text-2xl | 1.5rem | 24px |
| text-3xl | 1.875rem | 30px |
| text-4xl | 2.25rem | 36px |
| text-5xl | 3rem | 48px |
| text-6xl | 3.75rem | 60px |
More free tools. Free, open source, no sign-up. See all tools · Source on GitHub
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 14px ÷ 16 = 0.875rem. If your stylesheet sets a different font-size on the html element, enter it as the root font size above and every value, including the 1–96px table, updates.
How do I convert rem to px?
Multiply the rem value by the root font size: 1.5rem × 16 = 24px, and 2.25rem × 16 = 36px. Type into the Rem field above to convert in that direction.
What is the difference between rem and em?
rem is always relative to the root html element’s font size, so 1rem is the same everywhere on the page. em is relative to the font size of the element’s parent, so it compounds when elements are nested. Use rem for predictable sizing and em when spacing should scale with a component’s own text.
Why use rem instead of px for font sizes?
Visitors can change the default font size in their browser settings, and rem values follow that choice while px values ignore it. Using rem for type and spacing keeps your layout readable for people who need larger text, which also helps you meet WCAG text-resize guidance.
Should I set html { font-size: 62.5% }?
It makes 1rem equal 10px at the default browser setting, so mental math is easier (1.4rem = 14px). It still respects the visitor’s font-size setting because it is a percentage. The trade-off is that third-party components expecting 1rem = 16px will render smaller, so set the root font size to 10 here if you use it.