PX to REM Converter
Convert px to rem and rem to px with any base font size, browse an 8–96 px table, and convert a whole CSS file's pixel values to rem at once.
About this tool
PX to REM Converter
Convert px to rem and rem to px with any base font size, browse an 8–96 px table, and convert a whole CSS file's pixel values to rem at once.
This PX to REM converter divides a pixel value by the root font size to get rem (rem = px ÷ base) and multiplies to go back. The base defaults to 16px, the font size browsers use when a site doesn't change it, and you can set any other value such as 10px for the 62.5% technique. Type in either box and the other updates instantly. A table lists 8 to 96 px in 1, 2 or 4 px steps with copy buttons, and the CSS converter scans a pasted stylesheet, rewriting each px value as rem or em while skipping comments, strings, url() paths, 1px borders and media queries if you choose. Everything runs in your browser.
How to use PX to REM Converter
- 1
Open PX to REM Converter on AltFTool — it loads instantly in your browser.
- 2
Set the Base font size — 16px is the browser default — or pick 10, 14, 18 or 20 from the buttons.
- 3
Type a value in Pixels (px) to get REM, or type in REM / EM to get pixels, and press a chip such as 1.5rem to copy it.
- 4
Use the Conversion table to browse 8–96 px in 1, 2 or 4 px steps, or switch to rem → px.
- 5
Paste a stylesheet into Input CSS (px), choose Unit, Decimal places and Keep 1px borders, then press Copy output.
Why use PX to REM Converter
Two-way, any base
Convert px to rem or rem to px as you type, with one-tap base sizes from 10 to 20 px or any custom value. Copy the result as a value or as a ready font-size declaration.
Whole-stylesheet conversion
Paste CSS or SCSS and every px value is converted, with options for rem or em, decimal places, a minimum pixel value, keeping 1px hairlines, @media values and typography-only properties.
Reference table with copy
A px→rem table from 8 to 96 px, plus a rem→px table for common rem values, with Tailwind spacing equivalents at a 16px base and export as text or CSS custom properties.
Remembers your setup
Base size, options and your last pasted CSS are saved in this browser's local storage, so the converter is ready the next time you open it. Nothing is sent to a server.
PX to REM conversion table (16px base)
| Pixels | REM | Typical use |
|---|---|---|
| 10px | 0.625rem | Fine print |
| 12px | 0.75rem | Captions, labels |
| 13px | 0.8125rem | Small UI text |
| 14px | 0.875rem | Secondary text, buttons |
| 15px | 0.9375rem | Body text (compact) |
| 16px | 1rem | Body text (default) |
| 18px | 1.125rem | Large body, lead text |
| 20px | 1.25rem | H4, card titles |
| 24px | 1.5rem | H3, section spacing |
| 28px | 1.75rem | H2 on mobile |
| 32px | 2rem | H2, large gaps |
| 36px | 2.25rem | H1 on mobile |
| 40px | 2.5rem | H1 |
| 48px | 3rem | Display headings |
| 64px | 4rem | Hero headings, large spacing |
rem = px ÷ 16. For a different root font size, divide by that value instead.
Common use cases
- Turning a designer's pixel measurements from Figma into rem values for an accessible, scalable CSS or Tailwind theme.
- Migrating an old stylesheet from px to rem in one paste, while keeping 1px borders and media query breakpoints unchanged.
- Checking what 1.125rem or 2.5rem works out to in pixels when the root font size is 16px, 10px or 18px.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the default 16px root, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. To convert rem back to px, multiply: 2rem × 16 = 32px. If your site sets a different root font size, use that number as the base instead of 16.
What is 16px in rem?
16px is exactly 1rem when the root font size is the browser default of 16px. That is why 16px is the usual base for px-to-rem conversion. If the html element's font size is changed — for example to 62.5%, which is 10px — then 16px becomes 1.6rem.
What is the difference between rem and em?
Both are relative units. rem is relative to the font size of the root html element, so 1rem means the same size everywhere on the page. em is relative to the font size of the current element, or its parent for font-size itself, so nested em values compound. rem is usually easier to predict for spacing and type scales.
Why should I use rem instead of px?
When a visitor raises the default font size in their browser settings, text and spacing set in rem scale with it, while values in px stay fixed. That makes rem better for accessibility and readable layouts. Pixels are still fine for things that shouldn't scale, such as 1px borders or hairline dividers.
What is the 62.5% font-size trick?
Setting html { font-size: 62.5% } makes the root font size 10px in browsers with the default 16px, so 1.4rem equals 14px and maths is easy. It still respects users' font settings. Set the base in this converter to 10 to work that way. Remember to set a comfortable body font size, as 10px text is too small.
How do I convert a whole CSS file from px to rem?
Paste the CSS into the Input CSS box. Every px number outside comments, strings and url() paths is converted using your base size. Keep 1px borders as px if you want crisp hairlines, choose whether media query breakpoints convert, then press Copy output or download the .css file.
Should media queries use px, em or rem?
Inside media queries, rem and em are both based on the browser's default font size rather than the html font size you set, and both respond to the user's font settings. Many developers keep breakpoints in px for clarity; others use em. The converter leaves @media values in px unless you tick Convert @media values.
How many decimal places should rem values have?
Three or four decimal places is plenty: at a 16px base, 0.0001rem is less than a hundredth of a pixel. For example, 13px is 0.8125rem exactly, while 15px at a 18px base is 0.8333rem. Choose 2 to 6 decimal places in the CSS converter; trailing zeros are always removed.
What are Tailwind spacing units in rem?
In Tailwind CSS, one spacing step is 0.25rem, which is 4px at a 16px root. So p-4 is 1rem (16px), p-6 is 1.5rem (24px) and p-8 is 2rem (32px). The conversion table shows the matching Tailwind spacing number for each even pixel value when the base is 16px.
Embed this tool on your site
Add the PX to REM Converter widget to your blog or website — free, responsive, no signup. Just keep the “Widget by AltFTool” credit link visible.
<iframe src="https://www.altftool.com/embed/widget/px-to-rem-converter"
title="PX to REM Converter — free AltFTool widget"
width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden"
loading="lazy" referrerpolicy="no-referrer-when-downgrade" allow="clipboard-write"></iframe>
<p style="font-size:12px;margin:4px 0 0">Widget by <a href="https://www.altftool.com/tools/all/px-to-rem-converter?utm_source=embed&utm_medium=widget" rel="nofollow">AltFTool — free online tools</a></p>