How to Convert px to rem
Learn how to convert pixel values to rem units in CSS. Understand the formula, the role of the root font size, and why rem improves accessibility and responsiveness.
Detailed Explanation
Understanding the px-to-rem Conversion
The formula for converting pixels to rem is straightforward:
rem = px / root-font-size
By default most browsers set the root font size to 16px, so the conversion becomes:
rem = px / 16
Step-by-step Example
To convert 24px to rem with a 16px base:
- Divide 24 by 16
- Result: 1.5rem
Why 16px Is the Default
The CSS specification does not mandate a particular root size, but every major browser (Chrome, Firefox, Safari, Edge) ships with a default of 16px for the <html> element. Users can override this in their browser settings to enlarge or shrink text globally, which is the primary accessibility advantage of rem.
Quick Reference Table
| px | rem (base 16) |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
When the Base Is Not 16px
Some projects set html { font-size: 62.5%; } which makes 1rem equal to 10px. In that case the formula becomes rem = px / 10, making mental math easier. Our converter lets you specify any custom base size.
Use Case
A front-end developer migrating a legacy codebase from fixed px values to rem for improved accessibility and responsive scaling across devices.