PX to REM Converter
Convert px to rem and rem to px instantly. Set a custom base font size for accurate results.
| px | rem |
|---|---|
| 8px | 0.5 rem |
| 10px | 0.625 rem |
| 12px | 0.75 rem |
| 14px | 0.875 rem |
| 16px | 1 rem |
| 18px | 1.125 rem |
| 20px | 1.25 rem |
| 24px | 1.5 rem |
| 32px | 2 rem |
| 48px | 3 rem |
| 64px | 4 rem |
| 96px | 6 rem |
How to use
- 1 Enter a pixel value (e.g. 16) in the PX field — the REM equivalent updates instantly based on your configured base font size.
- 2 Alternatively, enter a REM value (e.g. 1.25) in the REM field — the pixel equivalent is computed in real time.
- 3 Adjust the base font size (default 16px) using the number input to match your CSS :root font-size if your project uses a different value (e.g. 62.5% = 10px).
- 4 Use the quick-reference table to look up common PX values and their REM equivalents at a glance — ideal for spacing, typography, and layout sizing.
- 5 Copy the REM value into your CSS or component library. Using REM ensures your design scales with user accessibility preferences.
Key features
- Bidirectional conversion: PX → REM and REM → PX with real-time synchronous updates as you type
- Adjustable base font size (default 16px, range 1–100px) to match your CSS :root font-size configuration
- Quick-reference table of 12 common PX spacing values with their REM equivalents at your current base
- Formula display shows the exact calculation: rem = px ÷ base and px = rem × base
- Essential for building accessible, scalable responsive UIs — REM units respect user browser font-size preferences
What are PX and REM Units?
PX (pixels) is the most fundamental CSS unit — one pixel corresponds to one physical pixel on the screen. While intuitive for designers, pixel-based sizing is absolute: it ignores the user's browser font-size settings, making it a poor choice for accessibility.
REM stands for "Root EM" — it is a relative unit based on the font-size of the root element (<html>). By default, browsers set this to 16px, but users can change it in their browser settings. When you use REM, your entire layout scales proportionally — making your site more accessible and responsive.
Modern CSS frameworks like Tailwind CSS, Bootstrap 5, and Chakra UI have adopted REM as their default spacing unit precisely because of this accessibility benefit.
Common Use Cases
Building accessible websites
Use REM units so your entire UI scales when users change their browser default font size — meeting WCAG 1.4.4 requirements.
Responsive design systems
Define spacing, typography, and component sizes in REM to create a scalable system that responds to a single root font-size change.
Tailwind / Bootstrap projects
Both frameworks default to REM-based spacing utilities. Convert your design tokens from Figma (PX) to REM for consistent implementation.
Migrating legacy CSS to REM
Convert existing pixel-based CSS to REM units incrementally — this tool helps you find the exact REM value for each PX measurement.
Custom root font-size setups
Some projects use a non-standard base (62.5% = 10px, or 18px for larger typography). Adjust the base font-size to match your configuration.
Design-to-code handoff
Convert pixel measurements from Figma, Sketch, or Adobe XD into REM values ready for your CSS or component library.
Quick Conversion Reference
Common PX values and their REM equivalents at different base font sizes.
| PX | REM (14px base) | REM (16px base) | REM (18px base) |
|---|---|---|---|
| 4px | 0.2857 rem | 0.25 rem | 0.2222 rem |
| 8px | 0.5714 rem | 0.5 rem | 0.4444 rem |
| 10px | 0.7143 rem | 0.625 rem | 0.5556 rem |
| 12px | 0.8571 rem | 0.75 rem | 0.6667 rem |
| 14px | 1 rem | 0.875 rem | 0.7778 rem |
| 16px | 1.1429 rem | 1 rem | 0.8889 rem |
| 18px | 1.2857 rem | 1.125 rem | 1 rem |
| 20px | 1.4286 rem | 1.25 rem | 1.1111 rem |
| 24px | 1.7143 rem | 1.5 rem | 1.3333 rem |
| 32px | 2.2857 rem | 2 rem | 1.7778 rem |
| 40px | 2.8571 rem | 2.5 rem | 2.2222 rem |
| 48px | 3.4286 rem | 3 rem | 2.6667 rem |
| 64px | 4.5714 rem | 4 rem | 3.5556 rem |
| 96px | 6.8571 rem | 6 rem | 5.3333 rem |
| 128px | 9.1429 rem | 8 rem | 7.1111 rem |
Why Prefer REM Over PX?
| Aspect | PX | REM |
|---|---|---|
| Accessibility | Ignores user's browser font-size settings | Scales with user preferences |
| Scalability | Fixed — does not adapt to viewport | Proportional — change one value, everything scales |
| Predictability | Always identical regardless of context | Depends on root font-size |
| Best for | 1px borders, box-shadows, fine details | Font sizes, spacing, layout widths, padding, margins |
WCAG Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. Using REM instead of PX is the simplest way to meet this requirement.