To convert pixels to rem, divide the pixel value by the document root’s computed font size in pixels: rem = px ÷ rootPx. For the reverse direction, use px = rem × rootPx.
The rem unit is relative to the root element’s font size; CSS px is a reference pixel used by the layout system. The formula is only accurate when rootPx matches the document being edited. Although 16 px is a common root size, it is not guaranteed. Browser preferences, user styles, accessibility settings, author CSS, embedded documents, and application design systems can establish a different computed value.
This sheet keeps the formulas, root-size checks, and input boundaries in one place. For a direct calculation, the PX to REM Converter handles one value at a time in either direction.
Conversion formulas at a glance
Identify the direction before substituting numbers. The root value is a reference used in the calculation, not a value the converter discovers in your stylesheet.
| Task | Formula | Required reference |
|---|---|---|
| Pixels to rem | rem = pixels ÷ rootPx | Pixel value and the root element’s computed font size in pixels |
| Rem to pixels | px = rem × rootPx | Rem value and the root element’s computed font size in pixels |
The W3C CSS Values and Units Level 4 specification defines rem relative to the root element’s font size, while the MDN relative-length reference provides the same unit context. These references explain the standard behavior but do not reveal the computed root size in a particular page.
Do not assume that a design exported at one root size will preserve the same pixel result under another root size. The relationship changes with the root. CSS px and rem are also layout units rather than guaranteed physical measurements, and browser zoom is separate from root-relative scaling.
Convert a value with the PX to REM Converter
- Open the linked PX to REM Converter and choose either PX to REM or REM to PX.
- Enter the source value as a strict decimal or scientific-notation number without including a unit suffix such as px or rem inside the field.
- Enter the actual computed root font size in pixels. Keep the initial 16 px value only when it matches the document.
- Select Convert to generate the CSS value.
- Review the result and any approximation marker, then copy the displayed number and unit if needed.
Copy places the displayed number and output unit together on the clipboard. Access depends on browser permission and secure-context rules. If copying fails, the valid result remains available and the interface asks you to copy it manually. Editing the value, root size, or direction clears a previous error and copy status; an older clipboard request cannot overwrite the status of newer inputs.
Parsing, arithmetic, formatting, and copying happen in the current browser tab. Entered values, root sizes, results, and clipboard content are not uploaded, and the tool does not call an API or modify your stylesheet.
One worked conversion
Assume you have verified that the document root computes to 16 px and need to convert a 24 px length.
Formula: rem = px ÷ rootPx. Substitution: rem = 24 px ÷ 16 px. Result: 1.5rem.
This result belongs to the verified 16 px root. If the document’s actual root differs, enter that value and convert again instead of assuming the same rem value will produce the same pixel result.
Find the root size before converting
- Open the page or document whose CSS you intend to change.
- Open the browser’s developer tools and inspect the document root element, which is usually the html element.
- Find font-size in the Computed styles panel and confirm the value in pixels.
- For embedded content or an application shell, inspect the root of the document that owns the relevant CSS rather than assuming it matches the outer page.
- Enter that computed pixel value in the converter’s root field.
The converter begins with 16 px as a convenience because it is a frequent browser default, not a guarantee. When the value is uncertain, developer tools are the reliable source. The tool itself does not inspect browser preferences, evaluate a stylesheet, resolve the cascade, or trace inheritance.
Input rules and numerical limits
- Accepted numbers: Whole numbers, decimal fractions, leading decimals such as .5, signed values, and scientific notation such as 2e2 or 1e-3 are supported.
- Rejected syntax: Hexadecimal numbers, commas, CSS unit suffixes inside the input, Infinity, NaN, partial exponents, and mixed text produce errors rather than being interpreted loosely.
- Whitespace: Leading and trailing whitespace is harmless, but internal whitespace is not silently removed.
- Field length: Each raw field has a 100 UTF-16 code-unit budget that is checked before trimming. Over-limit text fails explicitly and is never truncated.
- Input ranges: 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. Every input must also be finite.
- Negative values: The converter permits signed lengths because many CSS properties and calculations can use them. A particular CSS property may still impose a non-negative requirement.
- Precision boundaries: A nonzero value that underflows to zero because of browser numeric precision is rejected. Exact negative zero is normalized to ordinary zero.
Results must remain finite and stay within −1,000,000,000,000 through 1,000,000,000,000, making the largest supported reverse result 1,000,000,000,000 px. Out-of-range input or an invalid result produces a clear error; nothing is clamped, shortened, or silently capped.
Read exact and approximate results
The converter uses browser 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 the displayed text differs from the number’s canonical shortest decimal form, the interface shows an approximation mark and states that the result was rounded to 12 significant digits. An exact displayed value is not marked as approximate. The marker describes display precision; it does not mean the conversion was rejected.
After conversion, check the root size and the target property again. The tool performs unit arithmetic but does not determine whether the resulting length is legal for every CSS property.
Choose rem or keep px
Use rem when typography or spacing should scale with the document root. Keep px when fixed CSS reference-pixel values are intentional. Neither unit represents a guaranteed physical measurement on a screen.
| Unit | Best fit | Primary dependency | Main caution |
|---|---|---|---|
| rem | Root-relative typography and spacing | The root element’s computed font size | Its pixel result changes when the root size changes |
| px | Intentional fixed CSS reference-pixel values | The layout system’s pixel reference | It does not follow root font-size changes |
Test important layouts at the root sizes and browser settings your users may have. A root-relative design can scale differently across environments, while fixed values do not follow the root setting. Page zoom and physical screen size remain separate considerations that the converter does not account for.
Special cases the converter cannot resolve
CSS has a special rule when rem appears in the root element’s own font-size declaration: it refers to that property’s initial value instead of recursively referring to itself. The converter performs ordinary arithmetic against the root size you enter and does not predict this special declaration context. Resolve that case separately and verify it in developer tools.
The focused converter does not evaluate stylesheets, resolve cascade or inheritance, inspect browser preferences, calculate em or viewport units, account for page zoom, predict rendered physical size, or alter project files. It also converts one value per calculation rather than processing a bulk stylesheet. For a larger migration, the root-aware PX to REM bulk conversion workflow covers that separate task.
For production work, inspect the real root size, convert against that reference, review precision markers, and test the resulting layouts under the settings that matter to your audience.
For a deeper look, see Regex Cheat Sheet: Command Line vs Online.