Developer Tools
Px to REM / EM Converter
Convert pixels to rem and em (and back). Custom base font-size, Tailwind reference table, batch input.
Quick conversion
px
16px
rem
1rem
em (assumes parent = base)
1em
point (pt)
12.00pt
cm (96 dpi)
0.423cm
Batch convert (one px value per line)
Tailwind size reference (default base 16px)
| Tailwind class | rem | px (base 16) |
|---|---|---|
| text-xs / p-1 | 0.25rem | 4px |
| text-sm / p-2 | 0.5rem | 8px |
| p-3 | 0.75rem | 12px |
| text-base / p-4 | 1rem | 16px |
| text-lg / p-5 | 1.25rem | 20px |
| p-6 | 1.5rem | 24px |
| text-xl / p-7 | 1.75rem | 28px |
| text-2xl / p-8 | 2rem | 32px |
| text-3xl / p-10 | 2.5rem | 40px |
| text-4xl / p-12 | 3rem | 48px |
| text-5xl / p-14 | 3.5rem | 56px |
| text-6xl / p-16 | 4rem | 64px |
Why use rem instead of px?
Accessibility.When users increase text size in browser settings, elements sized in rem scale proportionally — elements in px don't. Around 15% of users have non-default zoom or text-size settings. Using rem for typography and most layout respects those preferences.
Frequently Asked Questions
When should I use rem vs em vs px?▾
rem: most layout sizes (margins, padding, font-size of components). Predictable — always relative to the root html element. em: when you want a value relative to the parent's font-size (rare). px: 1px borders, very specific small sizes where rem rounding would be visible.
Why does the default base = 16px?▾
Browsers default the html element's font-size to 16px (this has been standard since HTML 4). 1rem = 16px. Some CSS reset patterns set html { font-size: 62.5% } so 1rem = 10px, making mental math easier (1.6rem = 16px). We support custom base font-size for that case.
What's the accessibility benefit of rem?▾
When users zoom text in their browser settings (~15% of users do this), elements sized in rem scale proportionally. Elements in px stay fixed and may overflow or look tiny. Use rem for typography and most layout to respect user preferences.
Do I need to convert when using Tailwind?▾
Tailwind's default size scale is already in rem (text-base = 1rem = 16px, p-4 = 1rem, etc.). You generally don't convert — just use the utility class. We show the Tailwind reference table below for quick lookup.
What about responsive scaling (vw, vh, %)?▾
rem is for static sizes (a button stays the same physical size). vw/vh scale with viewport (100vw = full screen width). Best practice: rem for typography and components, vw/vh for hero heights, % for fluid widths. Mix them — modern CSS welcomes it.