The px ⇄ rem formula
A rem ("root em") is a CSS length relative to the font size of the root html element. Converting between the two is a single division or multiplication:
rem = px ÷ root font size
px = rem × root font size
The root font size is 16px by default in every major browser, so 1rem = 16px unless you change the base. The converter lets you set any base for design systems that use 10px or other roots.
Worked example
px to rem. You have a 24px heading and a 16px base:
Divide: 24 ÷ 16 = 1.5rem.
rem to px. A spacing token of 0.75rem at the same base:
Multiply: 0.75 × 16 = 12px.
10px trick: set
html{font-size:62.5%} to make 1rem = 10px, so 1.6rem = 16px. Enter 10 as the root size here to convert against that base.Why developers prefer rem
Because rem scales with the root font size, a single change to the html element resizes an entire layout, and the browser's own text-zoom and accessibility settings are respected. Fixed pixel values ignore those preferences, which is why modern CSS favours rem for typography and spacing.