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.
Frequently Asked Questions
What's the difference between REM and EM?
Both are relative units, but they reference different elements. REM (Root EM) is always relative to the root <html> element's font-size. EM is relative to the parent element's font-size, which means it compounds as you nest elements: 1.5em inside a 1.2em parent becomes 1.8em. REM avoids this compounding issue, making it more predictable and easier to maintain.
When should I use PX vs REM?
Use REM for font sizes, spacing (padding, margins), layout widths, and anything that should scale with user preferences. Use PX for fine details that shouldn't scale: 1px borders, box-shadows, border-radius, and occasionally media query breakpoints. Many CSS frameworks like Tailwind and Bootstrap use REM as their default unit precisely because it respects user accessibility settings.
What is the default root font-size in browsers?
All major browsers default to 16px. This means 1rem = 16px unless you or the user changes it. Some developers set html { font-size: 62.5% } to make 1rem = 10px (since 62.5% of 16px = 10px), which simplifies mental math when converting from design mockups. However, this is controversial in the accessibility community because it overrides user preferences.
Does REM work with media queries?
Technically yes, but it's important to know that media queries always use the browser's default font-size (usually 16px), not the root element's font-size. This means @media (min-width: 48rem) will always trigger at 768px, even if you've changed the root font-size to 10px. This behavior is defined in the CSS spec and applies consistently across all browsers.
Should I use REM or PX for responsive typography?
REM is the recommended choice for responsive typography. Combined with clamp() or viewport units, you can create fluid typography that scales smoothly across screen sizes. For example: font-size: clamp(1rem, 2vw, 1.5rem) gives you a minimum of 16px, a responsive value, and a maximum of 24px, all while respecting the user's base font-size preference.