The formula to convert PX to REM is simple: REM = PX ÷ Base Font Size. In almost every browser, the default base font size is 16px, so unless you or your CSS framework has changed it, dividing by 16 gets you the rem value.
Step-by-Step Conversion
- Find the root font size. Open DevTools, select the
<html>element and read its computedfont-size. If no rule changes it, it is 16px. - Divide the pixel value by that number. 28px ÷ 16 = 1.75.
- Add the unit. The result is
1.75rem. - Check the reverse. Multiply back: 1.75 × 16 = 28px. The reverse formula is
PX = REM × Base Font Size.
Worked Examples
| PX | REM (base 16px) |
|---|---|
| 2px | 0.125rem |
| 4px | 0.25rem |
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 13px | 0.8125rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Because 16 is a power of two, every whole pixel value converts to a decimal that ends — 13px is exactly 0.8125rem, never a repeating number. There is no need to round these values.
What If the Base Font Size Isn't 16px?
Some projects reset the root font size, most commonly to 62.5% — which makes 1rem = 10px, since 62.5% of the 16px browser default is 10px. This turns the math into simple division by 10 instead of 16, so 24px becomes an easy-to-eyeball 2.4rem. If your project does this, check the font-size rule on the html element before assuming a 16px base.
| PX | Base 10px (62.5%) | Base 16px (100%) | Base 18px (112.5%) |
|---|---|---|---|
| 12px | 1.2rem | 0.75rem | 0.6667rem |
| 16px | 1.6rem | 1rem | 0.8889rem |
| 24px | 2.4rem | 1.5rem | 1.3333rem |
| 36px | 3.6rem | 2.25rem | 2rem |
With bases like 18px, results repeat forever, so round to four decimal places. The difference is a tiny fraction of a pixel and is not visible on screen.
Converting a Real Component
Here is a typical card written in pixels, then converted at a 16px base. Font sizes and spacing move to rem; the border and shadow stay in px because they should not grow with text.
/* Before */
.card {
padding: 24px 20px;
margin-bottom: 32px;
font-size: 15px;
border: 1px solid #e1e4e8;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.card-title { font-size: 22px; margin-bottom: 12px; }
/* After */
.card {
padding: 1.5rem 1.25rem;
margin-bottom: 2rem;
font-size: 0.9375rem;
border: 1px solid #e1e4e8;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.card-title { font-size: 1.375rem; margin-bottom: 0.75rem; }Not sure which values deserve rem and which should stay in pixels? Our PX vs REM guide has a property-by-property table.
Letting CSS Do the Math
If you prefer to keep the original pixel numbers visible in your code, plain CSS can do the division for you with calc():
.title {
font-size: calc(22rem / 16); /* = 1.375rem */
margin-bottom: calc(12rem / 16); /* = 0.75rem */
}This works in every modern browser and keeps the design value readable. In Sass you can write a small function, such as @function rem($px) { @return math.div($px, 16) * 1rem; }, which outputs the final rem value at build time.
Common Conversion Mistakes
- Dividing by the parent's font size. That gives you em, not rem. Rem always uses the root, no matter where the element sits. If you need the parent-based value, use a PX to EM converter instead.
- Setting the root in px.
html { font-size: 16px; }makes rem values ignore the user's default font-size setting, which removes the main benefit of converting. - Converting design values exported at 2×. Halve the numbers first; a 32px label in a 2× mockup is 16px, or 1rem.
- Over-rounding. Writing 0.9rem for 15px gives 14.4px. Use the exact 0.9375rem.
Why Use REM?
REM respects the user's browser font-size settings, which matters for accessibility — someone who has increased their default font size for readability sees your rem-based text scale along with it, while pixel-based text stays frozen at its original size regardless of their preference.
It also stays consistent no matter how deeply an element is nested, unlike em, which is relative to a parent's font size and compounds as you nest elements deeper (see our REM vs EM comparison for the full breakdown).
Finally, rem gives a design system a single control point. If you later decide the whole interface should feel slightly larger, changing the root from 100% to 106.25% (17px) scales every rem-based font size and spacing value together, without editing individual rules.
Building a Type Scale in REM
Once you are thinking in rem, it is easy to build a consistent type scale by multiplying from 1rem. With a ratio of 1.25 (often called a "major third"), each step is 1.25 times the previous one:
| Step | REM | PX at 16px root |
|---|---|---|
| Small | 0.8rem | 12.8px |
| Body | 1rem | 16px |
| H4 | 1.25rem | 20px |
| H3 | 1.5625rem | 25px |
| H2 | 1.9531rem | 31.25px |
| H1 | 2.4414rem | 39.06px |
Store the steps as custom properties, such as --text-lg: 1.25rem;, so components use the scale rather than one-off pixel conversions.
How to Test Your Converted Values
Converted values look identical at the default settings, so you need to change the default to see whether the conversion worked. In Chrome, go to Settings → Appearance → Font size and choose "Large" or "Very large". In Firefox, go to Settings → General → Fonts and raise the size. Reload your page: text and rem-based spacing should grow, borders should stay thin, and nothing should be clipped or overlap. Any text that does not change is still set in px somewhere — DevTools' Computed panel will show which rule it comes from.
Converting Without Doing the Math
Typing pixel values into a spreadsheet formula works, but it's slower than it needs to be for a quick lookup. Our PX to REM converter takes a pixel value and any custom base font size and returns the rem value instantly, along with a full reference table.
Frequently Asked Questions
How many rem is 1px?
At a 16px root, 1px is 0.0625rem. In practice, values this small are usually borders, which are better left in px.
Do I need to convert media queries to rem?
No. Px breakpoints work fine. If you do convert them, note that rem and em in media queries use the browser's initial font size (16px by default), not any value you set on html.
Will converting to rem change how my site looks?
Not for most visitors. At the default 16px root, 1.5rem renders at exactly 24px, so the page looks identical. It only changes for people who have set a larger or smaller default font size, which is the point.
How do I convert rem back to px?
Multiply by the root font size: 2.25rem × 16 = 36px. Our REM to PX converter does this instantly for any base.
Try It Yourself
Take three pixel values from your current stylesheet — a font size, a padding and a margin — and run them through the PX to REM converter. Swap them into your CSS, then raise your browser's default font size to see the layout scale.