px to rem Calculator
Convert pixels to rem units for responsive web design. The rem unit is relative to the root element font size (default 16px in most browsers). The formula is rem = px / base-font-size. Using rem units ensures your layout scales properly with user font size preferences.
How to Convert px to rem
- Determine the base font size (usually 16px, the browser default).
- Divide the pixel value by the base font size.
- The result is the rem value.
- To convert rem back to px, multiply rem by the base font size.
Formula
rem = px / base-font-size
px = rem x base-font-size
Default base-font-size = 16px
Example Calculation
Convert 24px to rem (base 16px):
rem = 24 / 16 = 1.5 rem
Convert 2.5rem to px (base 16px):
px = 2.5 x 16 = 40px
px to rem Reference Table (Base 16px)
| Pixels | REM |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
Frequently Asked Questions
What is the difference between rem and em?
rem is relative to the root (html) element font size. em is relative to the parent element font size. rem is more predictable because it always references the same base, while em can compound when nested.
Why should I use rem instead of px?
rem respects user font size preferences set in browser settings. If a user increases their default font size for accessibility, rem-based layouts scale accordingly while px values remain fixed.
What is the default base font size?
All major browsers default to 16px for the root font size. You can change it with CSS: html { font-size: 62.5%; } makes 1rem = 10px for easier math.
Should I use rem for everything?
Use rem for font sizes, spacing, and layout dimensions. Use px for borders, box shadows, and other decorative properties that should not scale with font size.
How does the 62.5% trick work?
Setting html { font-size: 62.5%; } makes the base 10px (16 x 0.625 = 10). Then 1.6rem = 16px, 2.4rem = 24px, making mental math easier while still respecting user preferences.