Modern CSS gives you three common length units for typography and spacing — px, rem, and em. They are trivial to convert between, but choosing the right one has real consequences for accessibility and maintainability. This guide explains the math, the trade-offs, and when to reach for each.
How the conversions work
Every conversion here is a single division or multiplication. rem is measured against the root font size (the html element), which defaults to 16px, so rem = px ÷ 16 and px = rem × 16. Change the root and the divisor changes with it — this tool lets you set any base. em works the same way but against the element's own (or parent's) font size instead of the root, so em = px ÷ parent. Results are rounded to four decimals and trailing zeros are stripped, so 24px comes back as a clean 1.5rem rather than 1.5000rem.
Why rem beats px for accessibility
The single biggest reason to prefer rem is respect for the user's browser settings. When someone increases their default font size — common for low-vision users — every rem-based size scales up with it. A hard px font size ignores that preference entirely, leaving text stuck at the size you picked. Using rem for font sizes (and often for spacing) is one of the cheapest accessibility wins available, and it is why most design systems express their type scale in rem. The 16px default is also a sensible floor: it matches the browser default that the WCAG-conscious world is built around.
When to use em, and the 62.5% trick
Reach for em when you want a value to scale with a specific component rather than the whole page — padding inside a button that should grow with the button's text, or an icon sized relative to its label. The catch is compounding: nest em-sized elements and the multiplier stacks, which can surprise you. Some teams set html { font-size: 62.5% } so that 1rem = 10px and the mental math is easier (1.6rem = 16px). It works, but it overrides the user's base size for any px-based third-party content and adds a layer of indirection. A converter removes the main reason people reach for that trick — you can keep the accessible 16px default and let the tool handle the arithmetic.