px to rem Converter
Convert pixels to rem and rem to pixels with your own root font size, and see the Tailwind spacing class. Free and private.
Tailwind spacing: 6 (for example p-6, gap-6)
Tailwind text size: text-2xl
| Pixels | rem (root 16px) | Tailwind spacing |
|---|---|---|
| 8px | 0.5rem | 2 |
| 10px | 0.625rem | 2.5 |
| 12px | 0.75rem | 3 |
| 14px | 0.875rem | 3.5 |
| 16px | 1rem | 4 |
| 18px | 1.125rem | — |
| 20px | 1.25rem | 5 |
| 24px | 1.5rem | 6 |
| 28px | 1.75rem | 7 |
| 32px | 2rem | 8 |
| 36px | 2.25rem | 9 |
| 40px | 2.5rem | 10 |
| 48px | 3rem | 12 |
| 56px | 3.5rem | 14 |
| 64px | 4rem | 16 |
| 72px | 4.5rem | — |
| 96px | 6rem | 24 |
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS clamp() Generator.
Free Online px to rem Converter
Type a size in pixels or in rem and see the other one at once. Set your own root font size, and get the Tailwind class that matches. It gives developers a quick browser-based way to solve a focused px to rem converter task before moving the result into a project.
How to convert px to rem
Type a pixel value in the left box. The rem value appears on the right. Type in the right box to go the other way. The formula is rem = px ÷ root size.
Changing the root size
The root size is 16 px unless your site changes it. If your CSS sets html { font-size: 62.5% }, enter 10.
Common mistakes
- Using 16 as the root size on a site that changed it: every rem value is then off by a constant factor.
- Using rem for borders and shadows where one device pixel is wanted: keep px there.