How to Convert rem to px
Learn how to convert rem values back to pixel values in CSS. Understand when you need the actual computed pixel size and how the root font size affects the calculation.
Basic Conversion
Detailed Explanation
Converting rem Back to Pixels
The reverse formula is just as simple:
px = rem * root-font-size
With the default 16px base:
px = rem * 16
When You Need px From rem
While rem is preferred for most styling, there are scenarios where you need to know the actual pixel value:
- Canvas drawing — The Canvas API uses pixel coordinates, so you must convert rem back to px when positioning elements.
- JavaScript calculations — Animations or layout math in JS often require exact pixel values.
- Third-party library constraints — Some libraries accept only pixel values for configuration options like width, height, or offset.
- Design review — Designers often spec layouts in pixels, so converting rem back helps verify implementation accuracy.
Practical Example
Given a design system where --spacing-lg is 1.5rem:
1.5 * 16 = 24px
Reading Computed Values in JavaScript
You can read the actual root font size at runtime:
const rootFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize
);
const pxValue = 1.5 * rootFontSize; // e.g. 24
This is important because the user may have changed their browser's default font size, making 1rem equal to 18px or 20px instead of 16px.
Quick Reference (base 16)
| rem | px |
|---|---|
| 0.25 | 4 |
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 3 | 48 |
| 4 | 64 |
Use Case
A developer integrating a charting library that only accepts pixel values needs to convert the design system's rem-based spacing tokens into exact pixel measurements.