PX to REM Converter
Converts CSS pixels to rem and back at the root font size you set (16px by default), and px to em and back against a parent font size, with a table of common sizes.
Result…
How it's calculated
rem = px ÷ root font size · px = rem × root font size em = px ÷ parent (or own) font size · px = em × that size pt = px × 0.75 (1in = 96px = 72pt)
In CSS, 1rem is the font size of the root (html) element, and 1em is the computed font size of the element itself, or of its parent when the property being set is font-size. Browsers default the root to 16px, so 24px is 1.5rem, but a visitor's text-size setting or your own stylesheet can change it, and rem values follow. That is why accessible stylesheets size text in rem: it respects the visitor's choice, while px does not. em is handy for spacing that should grow with the text around it, but it compounds when elements nest. A CSS pixel is defined as 1/96 of an inch, so 1px = 0.75pt. Enter your own root or parent size if your design changes it.
Your numbers, step by step
About the PX to REM Converter calculator
This px to rem converter turns the pixel values in a design file into the rem units a stylesheet should use, and back again. Set the root font size, which browsers start at 16px, and enter a pixel value to get rem, or a rem value to get pixels. It also converts px to em and em to px against a parent font size, for spacing that should scale with the text around it. Alongside the answer it shows the value in points, the percentage of the base size, and a table of common sizes from 8px to 64px at your root size, so you can convert a whole type scale at once. Front-end developers moving a design from Figma to CSS and anyone tidying an old stylesheet will find it quick to check. The division is shown with your numbers, so you can see exactly where each value comes from.
How to use it
- Choose what to “Convert”: “px → rem”, “rem → px”, “px → em” or “em → px”.
- Enter the “Pixels” or the rem or em “Value”.
- Set the “Root font size” for rem, or the “Parent font size” for em; leave 16 if your CSS doesn't change it.
- Read the converted value, the points and the table of common sizes in the working.
Worked example
At the default 16px root, 24px ÷ 16 = 1.5rem, which is 150% of the root size and 24 × 0.75 = 18pt. With a 20px parent, a padding of 1.25em is 1.25 × 20 = 25px, or 18.75pt. If a stylesheet sets the root to 10px, 14px becomes 1.4rem.
Updated
Questions people ask
How do I convert px to rem?
Divide the pixels by the root font size. At the usual 16px root, 32px is 2rem and 12px is 0.75rem.
What is the difference between rem and em?
rem is always relative to the root (html) font size, while em is relative to the element's own font size, or its parent's when you set font-size itself. That means em values multiply when elements nest, and rem values don't. MDN's CSS length reference gives the definitions.
Is 1rem always 16px?
No. 16px is the common browser default, but a visitor can change their default text size and a stylesheet can set a different root size. Text sized in rem follows those changes, which is why it is the better choice for accessibility.
Should I set html font-size to 62.5%?
It makes 1rem equal 10px at the default, so the arithmetic is easier, but it changes every rem on the page, including any from libraries. If you do it, enter 10 as the root font size here.
How many points is a pixel in CSS?
CSS defines 1in as 96px and as 72pt, so 1px is 0.75pt. On screens a CSS pixel may cover several device pixels; the pixels per inch calculator works out a screen's real density.