px to rem Converter – Free, Online, Private

The root

One rem is the font size of the root element, almost always the html element, and the CSS initial value is 16px. This page divides each px length by that root. 16px becomes 1rem. 24px becomes 1.5rem. 8px becomes 0.5rem. If your document sets html { font-size: 62.5% } so that 1rem is 10px, change the root box to 10 before you convert, or the numbers will be wrong for that stylesheet. The root control is on the page for that reason.

What is rewritten

A bare number is one length in pixels, so 18 becomes 1.125rem. A snippet is scanned for numbers followed by px, case-insensitively. 1.5px is allowed. Other units, including em, %, and numbers inside strings that are not lengths, should not use the px suffix. A value such as 16PX is still converted. Trailing zeros are trimmed, and the quotient is rounded to four decimal places so 10px at a 16px root is 0.625rem rather than a long binary fraction. Negative lengths, used in some offsets, keep the sign.

Worked example

The sample declaration has 16px, 24px and 8px at the default root. The result is font-size: 1rem; padding: 1.5rem 0.5rem;. The property names and the punctuation stay. Convert one component at a time if a declaration mixes a border width you want to keep in px with a padding you want in rem. Borders of 1px are often left in px on purpose so they do not disappear at unusual root sizes. Delete the px from that one length before converting, or put it back after.

Accessibility

rem tracks the user's root font size. A layout converted from a fixed px mock tracks that preference instead of ignoring it. It does not replace a real responsive layout. The math is local. A half-finished stylesheet does not need to be uploaded to see the rem values.

Frequently asked questions