Pixel to REM Converter
Calculate CSS units instantly. Convert pixels to REMs based on your root font size.
px
rem
px
Usually 16px in most browsers
Common Sizes Reference
| Pixels (px) | REM | Tailwind Class |
|---|---|---|
| 12px | 0.75rem | text-xs |
| 14px | 0.875rem | text-sm |
| 16px | 1rem | text-base |
| 18px | 1.125rem | text-lg |
| 20px | 1.25rem | text-xl |
| 24px | 1.5rem | text-2xl |
| 32px | 2rem | text-3xl |
Why use REM units?
- Accessibility: REMs scale with the user's browser font settings.
- Responsiveness: Easier to scale entire layouts by changing just the root font size.
- Standard: Modern frameworks like Tailwind CSS use REMs by default.
How it works
The formula is simple:
Pixels / Base Size = REM
By default, most browsers use a base size of 16px. So 16px = 1rem, 32px = 2rem, etc.