We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
We use cookies.This website uses essential cookies to operate core features. With your consent, we also use analytics cookies to understand traffic and improve the service. For more details, see our .
Was this tool helpful to use?
Your feedback helps us make it better
A bidirectional PX to REM converter for front-end developers and designers, featuring customizable root font sizes.
Overview
Understand what the tool solves, how it works, and the boundaries of its data.
This px to rem converter handles one value at a time in either direction. Enter a pixel value to see its rem equivalent, or edit the rem field to calculate pixels. The base field is the pixel size used for one rem in your project. It starts at 16, a common browser initial value, but the actual root font size can differ when a site stylesheet or user preference changes it. In CSS, rem is relative to the root element’s font size, usually the html element; px is a separate CSS length unit. MDN’s CSS length reference explains these unit relationships.
rem = px ÷ root font size (px)
px = rem × root font size (px)
For example, with a 16px root, 24px ÷ 16 = 1.5rem. With a 10px root, the same 24px value is 2.4rem. The converted field is rounded to at most four decimal places, so use the displayed value as a practical CSS number rather than as an unlimited-precision measurement.
Guide
Follow the workflow and verify inputs and outputs with practical examples.
Check the computed font size on the root element for the page or design system you are converting. Enter that pixel value in the base field. Leave 16 only when that matches the context you need.
Type a single numeric value in px or rem. The paired field updates from the value you entered. You can use decimals and negative lengths where the CSS property permits them.
Use the copy control beside the result, then place the number and its rem unit into the relevant CSS declaration. The converter supplies the numeric result; it does not rewrite a stylesheet or convert a list of declarations.
The common-size buttons provide quick starting values from 8px through 64px. Selecting one fills the pixel side and recalculates using the current base. Reset returns the pixel value and base to their initial 16 settings.
Use cases
See how the tool fits into real work and everyday tasks.
A designer gives you a 24px spacing or type measurement. Enter 24 and the root size used by the site to get a rem value for a CSS declaration.
When checking one token in a design system, convert it and compare the rounded result with the project’s existing scale before adding or changing a token.
Try the same pixel value with two different base sizes. Seeing the rem value change makes clear that rem is a ratio tied to the root size, not a fixed synonym for px.
Q&A
Find concise answers to common questions and confusing cases.
No. Sixteen pixels is a common initial browser value, not a universal guarantee. A stylesheet or user setting can change the computed root font size. Enter the value that applies to the page you are working on.
Check the computed root font size and make sure you entered it as the base. A base of 16 and a base of 10 produce different rem values for the same pixel length.
No. This page converts one px/rem value at a time. It does not parse or rewrite CSS files, and it does not provide a multi-value batch input.
No. Rem refers to the root element’s font size, while em depends on the relevant element or inherited font-size context. This converter covers px and rem only.
Notes
Review scope, result limitations, and important precautions before use.
A correct division can still produce the wrong CSS if the entered base does not match the page’s computed root font size. The displayed precision is limited to four decimal places, so calculations that require greater precision should be checked independently. Whether a rem-based declaration is the right design choice depends on the property and the behavior you want from the page.
Related
Discover related tools, collections, and available API capabilities.