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 px – set any :root font size
rem always references the root element, not the parent. Change the base size once to see how Tailwind, spacing systems, and WCAG targets shift.
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 and design handoff
Designers deliver Figma mockups in pixels, but production CSS uses rem. When a spec says 24px padding, you need 1.5rem — but only if the root is 16px. If your project uses a 62.5% root trick (10px root), the same padding becomes 2.4rem. This tool removes the guesswork.Responsive typography with Tailwind
Tailwind CSS uses a rem-based spacing scale: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px). When you configure a custom base font size in tailwind.config.js, every spacing token shifts. Use this converter to verify final pixel values before pushing to production.WCAG accessibility compliance
WCAG 2.1 requires minimum touch targets of 44×44px, which equals 2.75rem at 16px root. Font sizes set in rem honor the user's browser text size preference — if a user sets their browser to 20px, 1rem becomes 20px. px-based fonts ignore this, failing WCAG 1.4.4.Design system spacing scales
Modern design systems like Material Design and Fluent use rem-based spacing tokens. A typical 8-point grid translates to 0.5rem increments. This tool helps map spacing tokens (4px = 0.25rem, 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem) when onboarding a new project.
ADVERTISEMENT
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.
ADVERTISEMENT
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 |
Convert other units to Pixels
Explore other unit converters
Frequently asked questions
How many pixels is 1rem?
By default, 1rem = 16px (browser default root font size). If you or Tailwind set html { font-size: 62.5% }, then 1rem = 10px. Always check your :root declaration before assuming 16px.
What is the difference between rem and em?
rem always references the root element (html) font size and never compounds. em references the parent element and compounds through nesting — a 1.5em inside a 1.5em parent renders at 2.25× root. rem is more predictable for spacing systems.
Should I use rem or px?
Use rem for typography, spacing, and layout so that values scale with the user's browser font preferences. Use px for borders, box-shadows, outlines, and anything that should stay physically fixed regardless of zoom level.
How does Tailwind CSS use rem?
Tailwind spacing scale uses 0.25rem increments: p-1 = 0.25rem (4px), p-2 = 0.5rem (8px), p-4 = 1rem (16px), p-8 = 2rem (32px). You can change the base font size in tailwind.config.js under theme.fontSize to shift all rem values.
How do I set a custom root font size in CSS?
Use html { font-size: 18px; } or html { font-size: 112.5%; } in your global stylesheet. Setting a percentage respects user browser preferences — 62.5% makes 1rem = 10px for easier math, but 100% (16px) is the accessible default.
What is the System UI font stack and how does rem affect it?
System UI fonts (font-family: system-ui) render at the OS default size, which browsers map to 16px by default. Since rem is anchored to that root, your rem-based layout adapts correctly across macOS, Windows, and iOS without any adjustments.
Are media queries in rem affected by the root font size?
Yes, but only if you use em/rem in media queries (e.g. @media (min-width: 48rem)). Some browsers evaluate media query em/rem against the user's browser base size, not your html font-size declaration — so 48rem may equal 768px regardless of your CSS root.
Are calculations done locally?
Yes. All calculations run in your browser. No data is sent to any server.
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.
ADVERTISEMENT
Explore more free tools
Online image editor
Resize, crop and convert your image. Ready-made formats for social media, circular avatars, export to JPG/PNG/WebP.
Meta title & description checker
Check title and description length in pixels. Live Google preview and optimization tips.
PNG to JPG
Convert PNG files to JPG in your browser. No file limits, no signup, no server uploads.
Favicon generator
Create a complete favicon.ico set for your website from one image. All required sizes, no login.
Color palette generator
Generate 9 palettes from one color: monochromatic, complementary, triadic and more. HEX codes.
WebP to JPG
Convert WebP files to universally compatible JPG. Works in every app and platform.
Color contrast checker
Check text and background contrast per WCAG 2.1 AA and AAA. Automatic color correction.
Free QR code generator
Create a QR code for a website, vCard business card or print. Export PNG and SVG, no registration.
Word & character counter
Count words, characters, sentences and reading time. Change letter case and format text in one click.