1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert REM to pixels
Convert CSS rem units to pixels based on your root font size. Enter a value and the result appears instantly.
Loading tool editor...
When do you need to convert rem to px?
The CSS rem unit is relative to the root element (html) font size. By default, browsers set this to 16px, so 1rem = 16px. Unlike em, rem does not compound — it always references the root.
Rem is the recommended unit for modern responsive web design. It provides consistent, scalable sizing that respects user accessibility preferences.
Converting rem to px helps understand the actual rendered size when designing or debugging CSS layouts.
All calculations run locally in your browser — nothing is sent to any server.
How to use the converter?
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.
When is this converter useful?
CSS Development
Convert mockups (px) to rem: padding 24 px = 1.5 rem.Responsiveness
Rem scales with user preferences — better than fixed pixels.Accessibility (WCAG)
Rem respects the user's text size settings.Design Systems
Spacing scales in rem: 0.25 / 0.5 / 1 / 1.5 / 2 / 3 rem.
What makes this converter different?
Complete privacy
All calculations run locally in your browser. No data is sent to any server.Real-time results
The result updates instantly as you type – no need to click any button.Bidirectional conversion
The Reverse button lets you convert in both directions with one click.Reference table
A ready-made table with commonly converted values and contextual descriptions.
How does rem to px conversion work?
px = rem × root font size. Default root font size = 16px.
If html { font-size: 62.5% }, root = 10px, so 1.6rem = 16px.
Rem never compounds. 1rem is always the same regardless of nesting depth. This makes it more predictable than em.
Practical tips
- At 16px root: 0.75rem = 12px, 0.875rem = 14px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px.
- Tailwind: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px).
- Minimum touch target: WCAG recommends 44×44px = 2.75rem at 16px root.
- Media queries in rem: @media (min-width: 48rem) = 768px at 16px root.
rem vs em vs px
| Feature | rem | px |
|---|---|---|
| Reference | Root font size | Fixed pixel |
| Compounds | No (always root) | No |
| Responsive | Yes | No |
| Accessibility | Respects user settings | Fixed size |
| Predictability | Consistent everywhere | Always consistent |
rem
- Reference
Root font size - Compounds
No (always root) - Responsive
Yes - Accessibility
Respects user settings - Predictability
Consistent everywhere
px
- Reference
Fixed pixel - Compounds
No - Responsive
No - Accessibility
Fixed size - Predictability
Always consistent
Convert other units to px
Explore other unit converters
Frequently asked questions
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.