PX・Rem Calculator
Real-time bidirectional conversion between PX and Rem
Conversion Settings
Common Conversions
PX-based
| PX Value | Rem Value |
|---|---|
8px | 0.5rem |
12px | 0.8rem |
14px | 0.9rem |
16px | 1.0rem |
18px | 1.1rem |
20px | 1.3rem |
24px | 1.5rem |
28px | 1.8rem |
32px | 2.0rem |
36px | 2.3rem |
40px | 2.5rem |
48px | 3.0rem |
56px | 3.5rem |
64px | 4.0rem |
72px | 4.5rem |
80px | 5.0rem |
96px | 6.0rem |
Rem-based
| Rem Value | PX Value |
|---|---|
0.3rem | 4px |
0.5rem | 8px |
0.8rem | 12px |
1.0rem | 16px |
1.1rem | 18px |
1.3rem | 20px |
1.5rem | 24px |
1.8rem | 28px |
2.0rem | 32px |
2.3rem | 36px |
2.5rem | 40px |
3.0rem | 48px |
3.5rem | 56px |
4.0rem | 64px |
5.0rem | 80px |
6.0rem | 96px |
8.0rem | 128px |
What is the PX・Rem Calculator?
A tool to convert between pixels (PX) and Rem units in either direction. Convert fixed pixel values from design mockups to Rem units, or check Rem values in pixels. Supports responsive design and accessible site development by working with relative units.
How to Use
Set a base font size and enter a PX or Rem value. The conversion result appears instantly. Copy the value with one click and paste it directly into your code.
Common values are listed in a preset table for quick copy, letting you work faster.
When This Tool is Useful
When specifying font sizes or spacing in CSS, you might want to use Rem units instead of fixed pixels. This tool is helpful when unifying base sizes in a design system or when making text sizes responsive to user browser settings.
Practical examples:
- Convert a 24px margin from your design tool to 1.5rem
- Set heading sizes at 2rem (equivalent to 32px) based on the browser default of 16px
- Implement layouts with relative units to meet accessibility guidelines
How the Calculation Works
Based on a base font size (usually 16px), the calculation uses these formulas:
rem = px ÷ base font size
px = rem × base font size
Calculation examples (base 16px):
- 8px → 0.5rem
- 16px → 1rem
- 24px → 1.5rem
- 32px → 2rem
Common Value Reference
Pixel values:
8, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96
Rem values (base 16px):
0.25, 0.5, 0.75, 1, 1.125, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 3, 3.5, 4, 5, 6, 8
Configuration Tips
Base Font Size
Browser defaults are typically 16px, but you can adjust this to match your project requirements. The range is 8–128px.
Display Precision
Toggle decimal places from 0 to 2. Usually 0 or 1 decimal is sufficient, but 2 decimals are available for precise layout adjustments.
Input Step Values
When using spinner buttons to adjust values, PX increments by 0.5 and Rem by 0.1. Direct input accepts any value.
FAQ
Why is the PX step 0.5?
Most production work uses whole pixels, but border widths and fine adjustments sometimes use 0.5px. A 0.1px step would create minimal visual change and make controls harder to use.
Do I need 2 decimal places?
For high-density displays like Retina screens or strict design systems, 2 decimals can be useful. For most implementations, 0–1 decimals work fine.