PX to REM Conversion: Why You Should Stop Using Pixels in CSS
Learn why rem units are better than pixels for accessible, responsive web design. Includes conversion formula, examples, and a free PX to REM converter tool.
Why Developers Are Moving Away from Pixels
For years, pixels were the go-to unit for everything in CSS. Font sizes, margins, paddings, widths, heights, all specified in px. It worked because screens were mostly the same size and users rarely changed their browser settings.
That world does not exist anymore. Today, websites need to work on 4-inch phones, 13-inch laptops, 27-inch monitors, and 65-inch TVs. More importantly, millions of users with visual impairments rely on browser font size settings to make text readable. When you hardcode font sizes in pixels, those settings are ignored, and your website becomes inaccessible.
How PX to REM Conversion Works
The conversion formula is straightforward: divide the pixel value by the root font size (which is 16px by default in all browsers).
rem = px / 16
/* Examples */
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
48px = 3rem
64px = 4remCommon PX to REM Conversions
| Pixels | REM | Common Use |
|---|---|---|
| 10px | 0.625rem | Small labels, captions |
| 12px | 0.75rem | Secondary text, footnotes |
| 14px | 0.875rem | Body text (small) |
| 16px | 1rem | Body text (default) |
| 18px | 1.125rem | Large body text |
| 20px | 1.25rem | H4 headings |
| 24px | 1.5rem | H3 headings |
| 30px | 1.875rem | H2 headings |
| 36px | 2.25rem | H1 headings |
| 48px | 3rem | Display headings |
| 64px | 4rem | Hero headings |
The Accessibility Argument
Open your browser settings right now. In Chrome, go to Settings then Appearance then Font Size. You can change it from the default Medium (16px) to Large (20px) or Very Large (24px).
Visit a website that uses pixels for font sizes. The text stays the same size no matter what you set. The user's preference is completely ignored. This affects roughly 10 to 15 percent of web users who have adjusted their browser font size.
On a website that uses rem units, changing the browser font size from 16px to 20px causes all rem-based values to scale up by 25%. Text becomes larger, spacing increases proportionally, and the layout remains readable.
How to Migrate from PX to REM
- Start with font sizes. Convert all font-size declarations from px to rem first.
- Convert spacing next. Margins, paddings, and gaps should be in rem.
- Leave borders and shadows in px. A 1px border should stay 1px.
- Convert width/height constraints to rem where appropriate.
- Test with different browser font sizes to verify everything scales correctly.
/* Before: All pixels */
.card {
font-size: 16px;
padding: 24px;
margin-bottom: 32px;
border: 1px solid #eee;
border-radius: 12px;
}
/* After: REM where appropriate */
.card {
font-size: 1rem;
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid #eee;
border-radius: 0.75rem;
}Use Our Free Converter
Doing the division manually for every value gets tedious. Our PX to REM converter handles it instantly. Enter any pixel value, set your base font size, and get the rem equivalent.
Free PX to REM Converter
Convert pixels to rem units instantly with adjustable base font size. No signup required.
Try it freeRelated Articles
CSS Units Explained: PX vs REM vs EM vs VW vs VH in 2026
A complete guide to CSS units. Learn when to use pixels, rem, em, vw, and vh with practical examples and conversion tips for responsive web design.
CSSCSS to Tailwind Migration: A Complete Step-by-Step Guide
Migrate your CSS codebase to Tailwind CSS with this practical guide. Covers class mapping, responsive design conversion, and a free automated converter tool.
CSSWhat is REM in CSS? A Practical Guide with Examples
Understand the rem unit in CSS and why it matters for responsive, accessible web design. Practical examples, browser support, and conversion tips included.