What This Tool Does
The Microapp REM to PX Converter handles the most common CSS unit conversion: rem ↔ px. Enter a value in either unit, get the equivalent in the other instantly. Adjust the root font-size if your project uses something other than the default 16 px.
This is the daily conversion every front-end developer needs at some point — when migrating designs from fixed-pixel mockups to responsive rem-based code, or when reading rem values from a stylesheet and wanting to know how big they actually render.
How to Use It
- Enter a value in either the rem or px field.
- The other field updates instantly.
- If your project uses a non-default root font-size (some designs use 10 px on the root for easier mental math), change the assumption.
- Click "Copy" to put the value on your clipboard.
• 1 rem = 16 px
• 1.5 rem = 24 px
• 0.875 rem = 14 px
• 2 rem = 32 px
Pattern:
px = rem × root font-size. Always.
Why "16 px" Is the Default
All major browsers default to a root font-size of 16 px. This isn't arbitrary — it's the result of a decades-long convention rooted in print typography. It's also the size most people read body text at comfortably without zooming.
You can override the root font-size in CSS:
html { font-size: 18px; } /* now 1 rem = 18 px */Some designers set html { font-size: 62.5% } (which equals 10 px) as a "rem hack" for easier mental math: 1 rem = 10 px, 1.5 rem = 15 px, 2.4 rem = 24 px — the rem value reads like the pixel value with a decimal moved. Whether this is worth it is a stylistic call (it works, but it overrides the user's font-size preference, which is the whole reason rem exists). The Microapp converter supports any root size you set.
The "Why rem at All" Question
Modern responsive design strongly prefers rem to px for almost everything. Three reasons:
- Accessibility. Users who increase their browser font-size (an accessibility setting common with low-vision users) get larger UI when you use rem. With px, the UI stays small regardless of their preference.
- Easier global scaling. Need to make the entire UI 25% bigger for a tablet view? Change root font-size from 16 px to 20 px. Every rem-based element scales. With px, you'd need to update every value individually.
- Design system consistency. When all sizes are multiples of the root font-size, the whole UI feels rhythmic. Mixing px and rem fights this.
The exceptions where px is still right: 1-pixel borders (1 px = 1 device pixel, exactly what you want for crisp lines), drop shadows where the offset is meant to be exactly 1-2 device pixels, and edge cases where you really need pixel precision regardless of user font-size.
Quick Reference Table
| rem (at 16 px root) | px | Common use |
|---|---|---|
| 0.5 rem | 8 px | Half-step spacing, small gap |
| 0.75 rem | 12 px | Caption / fine-print text |
| 0.875 rem | 14 px | Secondary body text, button labels |
| 1 rem | 16 px | Body text default |
| 1.125 rem | 18 px | Slightly emphasized body |
| 1.25 rem | 20 px | Lead paragraph, h4 |
| 1.5 rem | 24 px | h3, common spacing unit |
| 2 rem | 32 px | h2, large component padding |
| 2.5 rem | 40 px | h1 (mobile) |
| 3 rem | 48 px | h1 (desktop), section headers |
Related Tools
For broader CSS unit conversion (px, rem, em, vw, vh, pt, etc.), use the CSS Unit Converter. For converting CSS color formats, the Color Converter handles HEX/RGB/HSL/HSV. To work with CSS animations visually, see the CSS Animation Generator.