What Is a PX to REM Converter?
This tool converts between pixel (px) and rem units instantly. Rem units are the foundation of accessible, responsive CSS — they scale proportionally when users adjust their browser's default font size, while pixel values stay fixed. Converting your CSS from px to rem improves accessibility for millions of users with low vision.
The Conversion Formula
The formula is simple: rem = px ÷ base font size. With the default base of 16px, 24px = 1.5rem. This tool includes an adjustable base size, a full reference table, and a bulk converter that turns the px values in a pasted CSS block into rem. It leaves url() paths, quoted strings and @media or @container conditions alone, and can keep 1px hairlines in px.
How to Use This PX To Rem
- Enter a pixel value — Type the pixel size you want to convert — common values include 12, 14, 16, 18, 20, 24, 32, 48px.
- Set the base font size — The default is 16px (browser standard). Change this if your project uses a different root font size.
- Read the rem value — The tool instantly shows the equivalent rem value. For example, 24px ÷ 16 = 1.5rem.
- Use the reference table — The built-in conversion table shows common px-to-rem mappings for quick reference.
Tips and Best Practices
- → Use rem for scalable designs. Rem values scale with the user's browser font-size setting, making your design accessible to users who've increased their default text size.
- → Keep px for borders and shadows. Thin lines (1px borders, small shadows) should stay in pixels. A 0.0625rem border doesn't scale usefully and can render inconsistently.
- → Don't change the root font size. Avoid setting
html { font-size: 62.5% } to make 1rem = 10px. It breaks user preferences and causes accessibility issues. Keep the default 16px and do the math.
- → Combine rem with CSS clamp(). Use
clamp(1rem, 2.5vw, 2rem) for fluid typography that respects both viewport size and user font preferences.
Frequently Asked Questions
What is the difference between px and rem?
Pixels are fixed units that stay the same size regardless of user settings. Rem units are relative to the root font size — if the user changes their browser's default font size, rem-based layouts scale proportionally, making them more accessible.
Why should I use rem instead of px?
Rem units respect user accessibility preferences. If a user sets their browser font size to 20px, rem-based text scales up. Pixel values ignore this, which can make content unreadable for users with low vision.
What is the default root font size?
The default root font size in all major browsers is 16px, meaning 1rem = 16px. You can change it with html { font-size: 18px; } to make 1rem = 18px, adjusting all rem values site-wide.
What is the formula for px to rem?+
Divide the pixel value by the root font size: rem = px ÷ root-font-size. With the default 16px root, 24px ÷ 16 = 1.5rem. With a 20px root, 24px ÷ 20 = 1.2rem.
What is the difference between rem and em?+
Rem is relative to the root element (html) font size — always consistent. Em is relative to the parent element's font size — it compounds when nested. If a 1.5em element is inside another 1.5em element, the inner text is 2.25× the base size. Rem avoids this compounding problem.
Should media queries use rem?+
You can, but rem inside a media query is measured against the browser's default font size (normally 16px), not the font-size you set on html. So if your root is 10px or 20px, converting 768px with that base gives the wrong breakpoint. The bulk converter leaves @media and @container conditions in px for that reason; if you want rem breakpoints, divide by 16.
What does the bulk converter change?+
Every number followed by px in ordinary declarations, including negatives and decimals like .5px, using the base you set. It skips url() paths (so icon-20px.png stays intact), anything in quotes, and @media or @container conditions, and by default keeps 1px values as px because hairline borders should not scale. Review the result before pasting it over your stylesheet.
Can I convert rem back to pixels?+
Yes. Type into the rem field and the px field updates: px = rem × root font size, so 1.5rem is 24px at the default 16px base, or 30px at a 20px base.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service