Why the base font size matters at all#
rem, em and % are relative units — they only mean something in relation to a base size, which is why 1.5rem is 24px on a page with the default 16px root font-size, but 30px on a page that sets html { font-size: 20px; }. This tool defaults the base to 16px, the actual browser default when nothing overrides it, but the base is editable specifically so the conversion stays correct on a page that changed it.
Where em quietly differs from rem, and why this tool can't fully model it#
rem is always relative to the root element's font-size, full stop — that's the entire reason it exists as a unit, to give a stable reference point unaffected by nesting. em is relative to the font-size of the element it's used on (or its parent, for font-size itself), which means the same 2em can mean a different pixel value in two different places on the same page if they sit inside containers with different font sizes. This tool treats em as equal to rem, using the single base font size entered — accurate only when nothing between the root and the element in question has changed the font-size. For deeply nested components with their own font-size rules, treat the em conversion here as a starting estimate, not a guarantee.
Where the pt conversion comes from#
pt is a print-era unit — 72 points per inch — while CSS px is defined as 96 "CSS pixels" per inch (a fixed ratio, not tied to actual screen DPI). That makes 1pt exactly 96/72, or 4/3, CSS px — a fixed, non-relative ratio, unlike rem/em/%, which all depend on the base font size.