PX to REM Calculator
Convert pixel values to REM units for responsive CSS. Set your project's base font size and get accurate REM equivalents instantly.
How to Convert PX to REM
- 1Enter your pixel value in the PX input field
- 2Set the base font size (default is 16px for most browsers)
- 3The REM value is calculated automatically
- 4Use the table to see common pixel values converted to REM
Key Benefits
- Instant conversion with custom base font size
- Handy conversion table for common values
- Bidirectional: PX to REM and REM to PX
- Essential for accessible, responsive CSS
Frequently Asked Questions
What is the difference between PX and REM?
PX (pixels) are fixed-size units — they do not change regardless of a user's browser settings. REM (root em) is relative to the root element's font size, which browsers default to 16px. The formula is straightforward: rem = px ÷ root font size. So 24px ÷ 16 = 1.5rem. Because REM scales with the browser font size setting, users who increase it for accessibility reasons will see your layout scale proportionally.
Why is 16px the default base?
All major browsers ship with a default root font size of 16px, which means 1rem = 16px out of the box. If your project's CSS sets a different font-size on the html element — for example 18px — update the base in this calculator to match your project and get accurate conversions.
Should I use REM or EM?
REM is relative to the root element and stays consistent no matter how deeply nested an element is. EM is relative to its own parent, so nested elements compound — 1.2em inside another 1.2em becomes 1.44× the root size. For font sizes and layout spacing, REM is easier to reason about. EM is still useful for things that should scale relative to a component's own font size, like padding inside a button.
When should I still use px instead of rem?
PX is appropriate for things that should never scale with the browser font size: thin borders (1px), box shadows, and images or icons with fixed physical dimensions. Media query breakpoints are debated — px is more common in practice, but rem breakpoints do respond to user font preferences. Use REM for font sizes, padding, margin, and any spacing that should grow or shrink with the user's text-size preference.
How does rem improve accessibility?
Many users with low vision increase their browser's default font size from 16px to 20px, 24px, or more. If your CSS uses px throughout, that preference is silently ignored. If you use rem, the whole layout scales proportionally — text, spacing, and containers all grow together — making the page genuinely more readable without any extra JavaScript or media queries.
Does the base font size have to be 16px?
No. Some teams set the html element's font-size to 62.5% to make 1rem equal 10px, so 16px becomes a cleaner 1.6rem. Others set it to 10px directly. Whatever your project uses, set that value as the base here and the calculator will give you accurate REM equivalents for your specific setup.