Convert a CSS length
Set the root size explicitly. This tool does not inspect or change your website.
At a 16px root size. Results are rounded to six decimal places.
The short answer
Convert pixels to rem by dividing the pixel value by the root font size in pixels. Convert rem to pixels by multiplying by that root size. A 24px value is 1.5rem when the root is 16px; the result changes if the root font size changes.
1. Identify the root font size
Check the computed font size of the document’s root element in the target environment. Do not assume that every product, theme, or user setting resolves to the same value. This calculator starts at 16px as an example and lets you replace that assumption.
A rem unit refers to the root font size. It does not refer to the immediate parent’s font size, which is relevant to em in many property contexts. Record which unit and reference size you are discussing when a design and browser value appear inconsistent.
2. Convert the value in the right direction
Choose pixels to rem when translating a pixel measurement into a root-relative value. Choose rem to pixels when checking how a root-relative value resolves under a known root size. A nonzero positive root size is required for a useful conversion.
The value can include decimals and negative numbers because CSS lengths can be used in different property contexts. Whether a negative value is valid for a particular property is a separate question. The calculator formats the result to six decimal places and removes unnecessary trailing zeros.
px → rem: value in px ÷ root font size in px
rem → px: value in rem × root font size in px
24px ÷ 16px = 1.5rem
1.5rem × 20px = 30px
Record the root-size assumption with the converted value.3. Use the project’s existing sizing rules
A numerically equivalent conversion is not automatically the right implementation. Check the product’s typography and spacing tokens before introducing a new literal value. The intended decision may already have a semantic name that should be reused.
Avoid treating rem as an accessibility guarantee. Review how text and layout respond to user settings, browser zoom, and content expansion. W3C’s resize-text guidance concerns usable content and functionality when text is enlarged; changing a unit in a stylesheet does not establish that outcome by itself.
4. Review the rendered result after converting
Open the affected screen and check the real content at narrow and wide widths. Look for changes in wrapping, control height, alignment, and action placement. If the value belongs to a shared token, inspect another consumer that could expose a different layout constraint.
When sharing a correction, include the original value, chosen root size, converted result, and applicable token role. Recheck the running product after implementation. The converter works in your browser and does not change your project’s CSS or send the entered values to CRRT.
- State the root-size assumption explicitly.
- Reuse an existing token when it matches the intended role.
- Check text enlargement and long content in the real interface.
- Verify property-specific limits separately from arithmetic.
Common questions
Is the root size always 16px?
No. That is a common starting assumption, but styles and user settings can change the computed root size. Inspect the target environment when precision matters.
Does converting every value to rem make a UI accessible?
No. Units are one implementation choice. The rendered layout and controls still need review for resizing, reflow, interaction, and other applicable requirements.
Sources & further reading
Written with AI assistance. Tool references checked against the linked documentation on November 2, 2026. Examples are starter templates to adapt and review in your own project.