PX to REM Converter
Convert pixels to REM and EM units. Set a custom base font-size for accurate conversions.
PX vs REM: Why It Matters
Pixels (px) are fixed. 16px is always 16px regardless of the user's preferences. REM units are relative — 1rem equals whatever the root font size is (usually 16px by default). The difference seems small until you consider accessibility: millions of users increase their browser's default font size because they have difficulty reading small text.
When you set font sizes, margins, and padding in rem, your entire layout scales gracefully when users change their browser settings. Set them in px, and increasing the font size can break layouts because the text grows but the containers don't. That's why modern CSS frameworks like Tailwind use rem-based spacing by default.
This converter translates between px and rem using any base font size. The default is 16px (the browser standard), but if your project uses a different root font size, adjust the base to get accurate conversions.
CSS Unit Comparison
| Unit | Relative To | Scales With | Best For |
|---|---|---|---|
| px | Nothing (absolute) | Nothing | Borders, shadows, fine details |
| rem | Root font size (html) | Browser settings | Font sizes, spacing, layout |
| em | Parent font size | Parent element | Component-level scaling |
| % | Parent dimension | Parent size | Fluid widths and heights |
| vw/vh | Viewport width/height | Window size | Full-screen layouts, hero sections |
| ch | Width of "0" character | Font choice | Limiting text width (max-width: 65ch) |
What this means for you: Use rem for most things (font sizes, padding, margins, gaps). Use px for things that shouldn't scale (1px borders, box shadows). Use vw/vh for viewport-relative layouts. Use ch for readable line lengths.
Common PX to REM Conversions
| Pixels | REM (base 16px) | Tailwind Class | Typical Use |
|---|---|---|---|
| 4px | 0.25rem | p-1, gap-1 | Tight spacing, icon padding |
| 8px | 0.5rem | p-2, gap-2 | Small gaps, compact UI |
| 12px | 0.75rem | text-xs | Caption text, labels |
| 14px | 0.875rem | text-sm | Secondary text, sidebar |
| 16px | 1rem | text-base | Body text (browser default) |
| 20px | 1.25rem | text-xl | Subheadings |
| 24px | 1.5rem | text-2xl, p-6 | Section headings, card padding |
| 32px | 2rem | text-3xl, p-8 | Page headings, large spacing |
| 48px | 3rem | text-5xl | Hero headings |
The 62.5% Trick
Some developers set html { font-size: 62.5%; } to make 1rem = 10px (instead of 16px). This makes mental maths easier: 1.4rem = 14px, 2.4rem = 24px. But there are trade-offs:
Pros
- Easy mental conversion: 1.6rem = 16px
- No calculator needed for common sizes
Cons
- Third-party components assume 16px base
- Must reset body font-size to 1.6rem
Related Tools
How to use this tool
Enter a pixel value in the input field
Adjust the base font size if your project doesn't use the 16px default
See instant REM, EM, and percentage conversions
Common uses
- Converting pixel values to REM for accessible CSS
- Building responsive layouts with relative units
- Translating design specs (usually in px) to CSS rem values
- Quick reference for Tailwind CSS spacing values
Share this tool