Convert pixel values to rem and em for CSS — and back. Type into any field and the others update from your root font size (16px by default). Using rem keeps your layout scaling with the user's font-size preference, which is better for accessibility. It all runs in your browser.
About this px to rem converter
In CSS, px is an absolute pixel size, while rem and em are relative. rem is measured against the root font size — the font-size set on the <html> element, which is 16px in browsers by default — so 1rem = 16px, 1.5rem = 24px, and so on. Building layouts in rem means everything scales together when a user changes their browser's default font size, which is better for readability and accessibility than hard-coded pixels. This converter turns any px value into rem and em (and back) using the root size you set, so you can size fonts, spacing and breakpoints confidently. Change the root font size field if your project uses something other than 16px. Everything is worked out in your browser.
Frequently asked questions
- How many px is 1rem?
- By default 1rem equals 16px, because browsers set the root font size to 16px. If your project changes that, enter the new value in the root font size field.
- What is the difference between rem and em?
- rem is always relative to the root font size, while em is relative to the current element's font size. This tool converts against the root size you set, so rem and em come out the same here.
- Why use rem instead of px?
- rem scales with the user's chosen font size, so text and spacing stay proportional and readable when someone increases their browser's default — better for accessibility.
Why rem units respect a reader's font size
The conversion between pixels and rem units relies on a simple mathematical relationship defined by the root font size. The formula divides the target pixel value by the root font size to determine the corresponding rem value. Because browsers default to 16 pixels for the root element, this value serves as the standard divisor for most web projects. Developers establish this base size within the CSS html selector to ensure consistent scaling across different viewports and user settings.
The primary convention for using rem units stems from the need for inclusive design. When a user modifies their browser font size settings for better readability, elements defined in rem units automatically adjust their dimensions to match that preference. In contrast, fixed pixel values remain static regardless of user intervention, which can break layouts or make text illegible for individuals with visual impairments. Using rem units ensures that the entire interface maintains its intended proportions relative to the user's base configuration.
A common mistake involves setting the root font size to a percentage or a smaller pixel value to simplify mental math, such as using 10 pixels to make the conversion factor easy to calculate. This approach often conflicts with browser accessibility settings and can cause unexpected behavior in third-party components or browser extensions. Another frequent error is applying rem units to media queries, which can lead to unpredictable layout shifts because media queries typically ignore the root font size change. Developers should maintain the 16-pixel default or a percentage-based equivalent to ensure compatibility with standard browser behavior.