straighten
Pixel to REM Converter
Convert px to rem and em instantly based on custom root font settings.
Base Font Size
Usually 16px (browser default)
8pxCurrent: 16px32px
PX
Formula
24px ÷ 16 = 1.5rem
Result
1.5rem
EM Value
1.5em
Percent
150%
Common Scales
| PX | REM | EM | TW |
|---|---|---|---|
| 8px | 0.5rem | 0.5em | w-2 |
| 10px | 0.625rem | 0.625em | w-2.5 |
| 11px | 0.6875rem | 0.6875em | w-2.75 |
| 12px | 0.75rem | 0.75em | w-3 |
| 13px | 0.8125rem | 0.8125em | w-3.25 |
| 14px | 0.875rem | 0.875em | w-3.5 |
| 15px | 0.9375rem | 0.9375em | w-3.75 |
| 16px | 1rem | 1em | w-4 |
| 18px | 1.125rem | 1.125em | w-4.5 |
| 20px | 1.25rem | 1.25em | w-5 |
| 24px | 1.5rem | 1.5em | w-6 |
| 28px | 1.75rem | 1.75em | w-7 |
| 32px | 2rem | 2em | w-8 |
| 36px | 2.25rem | 2.25em | w-9 |
| 40px | 2.5rem | 2.5em | w-10 |
| 48px | 3rem | 3em | w-12 |
| 56px | 3.5rem | 3.5em | w-14 |
| 64px | 4rem | 4em | w-16 |
| 72px | 4.5rem | 4.5em | w-18 |
| 80px | 5rem | 5em | w-20 |
| 96px | 6rem | 6em | w-24 |
Tailwind Scale
Step 1
0.25rem
4px
Step 2
0.5rem
8px
Step 4
1rem
16px
Step 8
2rem
32px
Step 12
3rem
48px
Step 16
4rem
64px
tips_and_updatesPro Tip
"Always use REMs for typography and major spacing. It ensures your UI respects user accessibility settings, like custom browser font sizes."
REM vs PX: Which should you use?
zoom_inThe Case for REM
REM units are relative to the root font-size. This is the gold standard for accessibility. If a user increases their browser's default font size, your entire layout will scale proportionally, keeping the design readable and usable.
straightenThe Case for PX
Pixel units are absolute. Use them for elements that should never scale, such as 1px borders, subtle drop shadows, or decorative elements where pixel-perfection is required regardless of text size.