About the PX to REM Converter
This PX to REM converter changes pixel values into rem units — and rem back into pixels — using the root font size you choose. It also shows the equivalent em, point and percentage values, a quick reference table of common sizes, and can rewrite every px value in a pasted block of CSS in one go.
It is aimed at front-end developers and designers moving a design from Figma or a pixel-based stylesheet to scalable, accessible units. Rem units are relative to the html element’s font size, so when a visitor increases their browser’s default text size, layouts built in rem grow with it instead of staying fixed.
The default root size is 16px, which is the default in every major browser. If your stylesheet sets html { font-size: 62.5% }, use a base of 10. The em result assumes the parent element uses the same font size as the root; nested em values compound, so check the parent size when that matters.
How to use the px to rem converter
- 1Enter the value and choose px → rem or rem → px.
- 2Set the root font size (16px unless your CSS changes it).
- 3Read the rem, px, em, pt and percent equivalents.
- 4Optionally paste CSS to convert every value at once, then copy the result.
- 5Use the reference table for common spacing and type sizes.
Formula and method
A rem is one multiple of the root (html) element’s computed font size, so converting is a single division: pixels ÷ root font size. Going the other way multiplies by the root size. With the default 16px root, 24px is 24 ÷ 16 = 1.5rem.
CSS defines 1px as 1/96 of an inch and 1pt as 1/72 of an inch, so 1px = 0.75pt. The em value equals the rem value only when the parent element’s font size equals the root size; em is relative to the parent and compounds when nested. Percent is the rem value × 100, as used in font-size: 150%.
- px
- CSS pixels
- rem
- Multiples of the root element font size
- root size
- Computed font size of <html> in px (16 by default)
- pt
- Typographic points (1/72 inch)
Worked examples
24px heading at the default 16px root
24 ÷ 16 = 1.5rem, which is 18pt or 150% of the root size. In the CSS snippet, 24px, 16px, 14px and −8px become 1.5rem, 1rem, 0.875rem and −0.5rem, while the 1px border is left alone.
62.5% root (10px base)
With html { font-size: 62.5% } the root is 10px, so 14px ÷ 10 = 1.4rem. At 0.75pt per pixel, 14px is 10.5pt.
rem back to pixels
2.25rem × 16px = 36px (27pt). In rem → px mode the CSS snippet’s 2.25rem and .5rem become 36px and 8px.
Frequently asked questions
How many pixels is 1rem?+
1rem equals the font size of the root html element. In every major browser that defaults to 16px, so 1rem = 16px unless your stylesheet or the user’s browser settings change the root size.
What is the difference between rem and em?+
Rem is always relative to the root html font size, so it is predictable anywhere in the page. Em is relative to the font size of the current element’s parent, so em values multiply when elements are nested.
Why should I use rem instead of px?+
Rem-based font sizes and spacing scale when a user raises their browser’s default text size, which helps accessibility (WCAG 1.4.4 Resize Text). Pixel font sizes ignore that preference in most browsers.
What is the 62.5% trick?+
Setting html { font-size: 62.5% } makes the root 10px (62.5% of 16px), so 1.4rem = 14px and mental maths is easy. Remember to set body font size back to 1.6rem so default text is not tiny.
Should borders be in rem too?+
Usually not. Hairline 1px borders and shadows often look better staying in px so they do not become blurry fractional pixels when text is scaled, which is why the bulk converter keeps 1px by default.