CSS Unit Converter

rem is relative to the document root (html font-size, default 16 px). em is relative to the parent element. They're equal only when the parent itself uses the root size.

CSS defines 1 in = 96 px and 1 pt = 1/72 in, so 1 pt = 96/72 ≈ 1.333 px.

They use the viewport width and height you enter in the base-sizes panel. Default 1440 × 900 matches a common desktop; change them to match your design canvas.

% is computed against the parent font size (treated the same as em for typography). For other CSS properties, % depends on the property's containing block.

rem, almost always. A reader who has raised their browser's default font size gets larger text with rem and is ignored entirely by px, which is a real accessibility failure rather than a style preference. Keep px for things that genuinely should not scale, like a hairline border.

Because em compounds. Each level resolves against its parent, so three nested elements at 0.9em land at roughly 0.73 of the original — 0.9 × 0.9 × 0.9. rem cannot do this, since it always resolves against the root no matter how deep the element sits.