PX to REM Converter
Convert px to rem and rem to px for any root font size, work out em against a parent size, convert a whole list at once and copy ready-made CSS declarations.
The interactive tool loads here when JavaScript runs.
About this toolWhat is the PX to REM Converter?
Design files measure everything in pixels, but stylesheets that respect a reader's font settings use rem. This converter does the division for you in both directions. Type 24 in the pixel box and it shows 1.5rem at the default 16 px root; type 0.875 in the rem box and it shows 14 px. Change the root size and every result updates, so it works equally well for sites that set the html font size to 10 px or 18 px.
Below the single converter is a batch box: paste a list of sizes from a design spec, mixing plain numbers, px, rem and em, and get a table plus CSS lines ready to paste, each with the original pixel value in a comment. A parent size field gives em values for components that scale with their container, and a reference table lists common sizes from 1 px to 96 px at your root.
- Two-way px and rem conversion that updates as you type
- Any root font size and an em result against a parent size
- Batch conversion of mixed px, rem and em lists with CSS output and pixel comments
- Reference table of common sizes, plus percent of root and points
- Runs in the browser, copy and share link
How to use the PX to REM Converter
- Set the root font size if your site changes it from the browser default of 16 px.
- Type a pixel value to get rem, or type a rem value to get pixels; both boxes stay in sync.
- Set the parent font size to see the em value for a nested element.
- Paste a list of sizes into the batch box, choose the CSS property, and copy the generated declarations.
- Use the reference table for quick lookups of common sizes at your root.
Worked examples
Heading size from a mock-up
Input
24 px, root 16 px
Output
1.5rem (150% of root, 18pt)
A reader who sets their browser text to 20 px will see this heading at 30 px, keeping the same proportion to body text.
Root set to 62.5%
Input
24 px, root 10 px
Output
2.4rem
The 10 px root makes mental maths easy, but every component then needs explicit sizes, since unstyled text would be 10 px.
em inside a smaller parent
Input
13 px in a 14 px parent, root 16 px
Output
0.8125rem, 0.9286em
The em value describes the size relative to the parent; reuse that component in a 16 px parent and it grows to 14.9 px.
Batch conversion
Input
12, 14, 16, 18, 20, 24, 32, 48
Output
0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 2rem, 3rem
The CSS block lists each as font-size: 0.75rem; /* 12px */ so the original design value stays visible in code review.
Background and insight
The CSS Values and Units specification defines rem as the font size of the root element, the html tag, and em as the font size of the element itself (for most properties, which in practice means the inherited parent size when setting font-size). Browsers ship with a default text size of 16 px, so 1rem is 16 px unless the page or the reader changes it. The conversion is plain division: rem = px / root size.
The reason to bother is accessibility. When a reader raises the default text size in browser settings, sizes in rem scale with it, while sizes in px stay fixed. WCAG success criterion 1.4.4 asks that text can be resized to 200% without loss of content, and rem-based type and spacing make that much easier to meet. Browser zoom scales px too, but the font-size preference does not.
em compounds. A list nested three deep with font-size: 1.2em on each level ends up at 16 x 1.2³ = 27.6 px, while 1.2rem stays 19.2 px at any depth. That makes em useful for padding and icons that should track their own text, and rem the safer choice for the type scale itself. Setting html { font-size: 62.5% } makes 1rem = 10 px for easy maths, but overrides nothing about the reader's preference as long as it is a percentage.
Common use cases
Turning designs into CSS
Convert font sizes, spacing and breakpoints from a Figma or Sketch file in pixels to rem.
Accessibility fixes
Replace fixed pixel font sizes so text follows the reader's browser setting, as WCAG resize-text checks expect.
Design tokens
Build a spacing or type token set in rem with the pixel value documented beside each.
Component libraries
Work out em values for padding and icons that should scale with the component's own text size.
Tips and limitations
- Keep the root as a percentage (for example 62.5% or 100%), never a pixel value, so a reader's font preference still applies.
- Media queries in em or rem are measured against the browser's initial font size, not your html rule, so 48em is 768 px at the default setting.
- Borders and hairlines are usually better left in px; a 1px border does not need to grow with text.
- Long decimals are fine in CSS. Browsers round to device pixels anyway, so 0.8125rem is no problem.
- If a design uses a 10 px root, check every place that inherits size, such as form controls, which some browsers style separately.
Frequently asked questions
How do you convert px to rem?
Divide the pixel value by the root font size. At the default 16 px root, 24 px / 16 = 1.5rem and 14 px / 16 = 0.875rem.
What is 1rem in pixels?
It equals the root (html) font size, which is 16 px in every major browser by default. If a reader changes their default text size, or the page sets html { font-size: 62.5% }, 1rem changes with it.
What is the difference between rem and em?
rem is relative to the root element's font size, so it means the same everywhere on the page. em is relative to the current element's font size, which it inherits from its parent, so nested em values multiply.
Should I use rem or px for font size?
Use rem for font sizes so text follows the reader's browser setting. Pixels ignore that preference, which can make text too small for people who need it larger.
Why do people set the html font size to 62.5%?
62.5% of 16 px is 10 px, so 1.6rem is 16 px and the maths is easy. It still respects the reader's setting because it is a percentage, but body text must then be set explicitly or it will render at 10 px.
How many px is 0.875rem?
14 px at the default 16 px root (0.875 x 16). At a 10 px root it would be 8.75 px.
Can I convert several pixel values to rem at once?
Yes. Paste a list into the batch box, separated by commas, spaces or new lines. Values can be plain numbers, px, rem or em, and the tool returns a table and CSS declarations with the pixel value in a comment.
Is there an in-depth guide to the PX to REM Converter?
Yes. “PX vs REM vs EM: Choosing CSS Units for Accessible Sizing” covers the background, how it works, common pitfalls and worked examples. Read the full guide.
Related Tools You May Like
Free, in-browser tools that pair well with this one.