Skip to content
Lizely

PX to REM Converter

Convert CSS lengths between pixels and rem units with a custom root font size and copy-ready output.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose PX to REM or REM to PX, then enter a strict decimal value or scientific-notation value.
  2. 2.Enter the actual computed root font size in pixels; keep 16 only when it matches your document.
  3. 3.Convert, review any approximation marker, and copy the displayed CSS value if needed.

About PX to REM Converter

PX to REM Converter performs a focused two-way CSS length calculation in your browser. Choose PX to REM or REM to PX, enter a value, set the root font size in pixels, and generate a copy-ready CSS value. The tool starts with 16 px in the root field because that is a common browser default, but 16 px is not guaranteed. Browser preferences, user styles, author CSS, accessibility settings, embedded documents, and application design systems can establish a different computed root font size. For accurate work, inspect the actual computed font-size of the document root and enter that value. The CSS rem unit is defined relative to the font size of the root element. For ordinary conversion, pixels to rem uses rem = pixels / root pixels. The reverse direction uses pixels = rem × root pixels. A 16 px value with a 16 px root is 1 rem; 24 px is 1.5 rem; and 1.25 rem returns 20 px. Changing the root to 20 px changes those relationships. The converter does not assume that a design exported at one root size will preserve the same pixel result under another root size. CSS has a special rule when rem appears in the root element's own font-size declaration: it refers to the property's initial value rather than recursively referring to itself. This compact converter is intended for converting values against a known computed root size. It does not evaluate a stylesheet, resolve cascade or inheritance, inspect browser preferences, or predict the special declaration context for you. Use browser developer tools when the root size is uncertain. Values use a strict decimal grammar. Whole numbers, decimal fractions, leading decimals such as .5, signed values, and scientific notation such as 2e2 or 1e-3 are supported. Hexadecimal syntax, commas, CSS unit suffixes inside the input, Infinity, NaN, partial exponents, and mixed text are rejected. Leading and trailing whitespace is harmless, but internal whitespace is not silently removed. Each raw field has a 100 UTF-16 code-unit budget checked before trimming; over-limit text fails explicitly and is not truncated. Negative values are allowed because many CSS properties and calculations can use signed lengths, although individual CSS properties may impose their own non-negative rules. This tool performs unit arithmetic and does not validate whether a resulting value is legal for every CSS property. The main value range is inclusive from -1,000,000,000 through 1,000,000,000. The root font size range is inclusive from 1 through 1,000 px. These explicit finite bounds keep accidental giant exponents and zero divisors out of the calculation. Boundary values are accepted and values outside them produce a clear error. Nonzero scientific notation that is too small for browser numeric precision is rejected instead of becoming zero, including a PX-to-REM division that underflows after parsing. Exact negative zero is normalized to ordinary zero. Nothing is clamped, shortened, or silently capped. The largest possible supported reverse result is 1,000,000,000,000 px. JavaScript numbers use binary floating-point arithmetic, so some decimal quotients cannot be represented with infinitely many exact digits. Output is formatted to at most 12 significant digits, decorative trailing zeroes are removed, and scientific notation is retained when it communicates very small or large values clearly. When that display differs from the number's canonical shortest decimal form, the interface shows an approximation mark and explicitly says it was rounded to 12 significant digits. Exact displayed values such as 0.0625 are not labeled approximate, while altered subnormal or repeating values are. This avoids presenting a long binary floating-point tail as meaningful design precision while preserving far more precision than typical CSS layout work needs. Copy places the displayed number and output unit together on the clipboard, such as 1.5rem or 24px. Clipboard access depends on browser permission and secure-context rules. A failed copy does not destroy the valid result; it shows a manual-copy message. Editing the value, editing the root size, changing direction, or running another conversion immediately clears any previous copy status. Each copy attempt receives a generation token, so a late success or failure from an older clipboard request cannot overwrite the current state after the inputs change. Unmounting the tool invalidates pending clipboard work. All parsing, arithmetic, formatting, and copying happen in the current browser tab. No entered value, root size, result, or clipboard content is uploaded to Lizely. The tool adds no package dependency and does not call an API. It does not modify your stylesheet, inspect your site, calculate em units, convert viewport units, account for page zoom, or promise a particular rendered physical size. CSS px is a reference pixel unit used by the layout system; rem is a root-relative unit. Neither should be treated as a guaranteed physical measurement on a screen. Use rem when root-relative scaling supports your typography or spacing system, and keep px where fixed CSS reference-pixel values are intentional. Test important layouts at the actual root sizes and browser settings your users may have.

Methodology & sources

Reject either raw field above 100 UTF-16 code units before trimming, then match a complete decimal/scientific-notation grammar before Number conversion. Reject nonzero decimal text that underflows to zero. The value must be finite and within ±1,000,000,000; root font size must be finite and from 1 through 1,000 px. PX to REM divides value by rootPx; REM to PX multiplies value by rootPx, and any nonzero result that underflows to zero is rejected. Results must remain finite and within ±1,000,000,000,000. Negative zero is normalized to zero. Display uses 12 significant digits, strips trailing zeroes and redundant exponent formatting, and marks output approximate whenever that text differs from the number's canonical shortest decimal representation. Input edits, root edits, direction changes, and new conversions clear prior output errors and clipboard status. Clipboard generations plus a mounted guard prevent late asynchronous copy completion from publishing stale status. No input is capped or uploaded.

Frequently asked questions

What formula converts pixels to rem?
Divide the pixel value by the root element's computed font size in pixels. For example, 24 px divided by a 16 px root equals 1.5 rem.
Is the root font size always 16 px?
No. Sixteen pixels is a common default and only the initial convenience value here. Browser preferences, user styles, accessibility settings, and site CSS can make the computed root size different.
Why does a result sometimes show an approximation mark?
Some decimal results cannot be represented exactly by binary floating point. The tool displays at most 12 significant digits and marks a result when that display is rounded.
Can I enter negative values or scientific notation?
Yes. Signed decimal values and notation such as 2e2 or 1e-3 are accepted. Whether a negative length is valid still depends on the CSS property where you use it.

Related tools

Developer Tools guides

View all