Px to Rem Converter — Build Accessible, Scalable CSS
Converting pixels to rem is one of the most frequent tasks in front-end development. rem (root em) is the CSS unit that scales with the user's browser font size preference, making your layouts accessible and responsive by default. Enter any pixel value and get the exact rem equivalent — with support for custom root font sizes beyond the browser default of 16px.
Default: root font size = 16px. Examples: 16px = 1rem, 24px = 1.5rem, 32px = 2rem, 12px = 0.75rem, 8px = 0.5rem. Reverse: px = rem × root_font_size.
Why rem Beats px for Responsive Design
Pixel values are absolute — they never change regardless of user settings, screen size, or zoom level. rem values are relative to the root font size, which means they scale when users increase their browser's default text size. A layout built entirely in px will look identical whether a user has normal vision or low vision — and WCAG accessibility guidelines require that text can be resized up to 200% without breaking layout. rem lets you build once and have it work for everyone.
em vs rem — Know Which Relative Unit to Use
em is relative to the font size of the current element's parent, which causes compounding effects in nested elements. A paragraph inside a div inside a section, each sized at 1.2em, ends up at 1.2 × 1.2 × 1.2 = 1.728em — the infamous em cascade. rem is always relative to the html root element, so nesting has no effect. 1.5rem is always 1.5 × root font size, no matter how deeply nested the element is. Use rem for a predictable, consistent sizing system; use em only when you explicitly want size to scale with the parent.
Common px-to-rem Reference Values at 16px Root
Most design systems work with a base-8 or base-4 spacing scale. At the browser default of 16px root font size: 8px = 0.5rem (tight spacing), 12px = 0.75rem (small text), 16px = 1rem (body text baseline), 20px = 1.25rem, 24px = 1.5rem (large text or comfortable spacing), 32px = 2rem (section spacing), 48px = 3rem (hero headings), 64px = 4rem (large display text). Build your design token system around these rem values and your typography will scale correctly at any root size.
Accessibility — Why rem Respects User Font Preferences
Browsers have an accessibility setting that lets users set a preferred base font size — commonly used by people with low vision. When a user sets their preference to 'Large' (typically 20px), a page built with rem scales all its text, spacing, and layout proportionally. A page built with px stays at the designer's intended size, potentially making it illegible. This is why WCAG 1.4.4 (Resize Text, Level AA) is best satisfied with rem-based typography rather than px. Using rem is not just a preference — for many users it is a functional accessibility requirement.
Quick Reference
- 8px → 0.5rem (tight gaps, thin dividers)
- 12px → 0.75rem (captions, helper text, labels)
- 16px → 1rem (body text, base spacing unit)
- 20px → 1.25rem (large body, comfortable line spacing)
- 24px → 1.5rem (h3/h4 headings, card padding)
- 32px → 2rem (h2 headings, section gaps)
- 48px → 3rem (h1 headings, hero text)
- 64px → 4rem (display/hero type, large icons)
Frequently Asked Questions
What is the difference between px, em, and rem?
px (pixels) is an absolute unit — 16px is always 16 pixels regardless of context. em is relative to the font size of the element's parent — if the parent is 20px, then 1em = 20px. rem (root em) is relative to the font size of the root <html> element only, regardless of nesting. rem is the most predictable of the three because it always refers back to one fixed reference point.
Why should I use rem instead of px?
rem respects the user's browser font size preference. When a user increases their browser's base font size from 16px to 20px for accessibility, rem-based layouts scale up automatically. px-based layouts stay fixed and become harder to read. rem also makes your spacing and type system scale proportionally, which is essential for responsive design and WCAG accessibility compliance.
What is the default root font size in browsers?
All major browsers (Chrome, Firefox, Safari, Edge) default to 16px as the root font size. This means 1rem = 16px by default. However, users can override this in browser settings, which is exactly the behaviour rem is designed to respect. Never hardcode the assumption that 1rem = 16px in your CSS logic.
How do I set a custom root font size?
Set it on the html element in your CSS: html { font-size: 18px; }. Some designers use a percentage trick for easier math: html { font-size: 62.5%; } makes 1rem = 10px (since 62.5% of 16px = 10px), so 1.6rem = 16px. However this approach overrides user font preferences, partially defeating the accessibility benefit of rem.
Is 1rem always 16px?
Only by default. 1rem equals whatever the html element's font-size is set to. If you or a user changes the browser's default font size, 1rem changes accordingly. This is a feature, not a bug — it means your layout scales correctly for users who need larger text.
How does rem help with accessibility?
WCAG 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content. Using rem for font sizes, spacing, and layout means that when a user sets their browser font preference to 'Large', your entire UI scales proportionally. px-based designs often break at large font sizes because only the type grows while spacing and containers stay fixed.
Should I use rem for everything — including borders and box shadows?
Common practice: use rem for font sizes, line heights, padding, margin, and layout spacing. Use px for thin borders (1px), box shadows, and decorative details where you want a fixed visual weight regardless of zoom level. Using rem for borders means a 1px border becomes 0.0625rem — possible but rarely necessary.