Why does rem depend on the root size but em depends on the parent?

rem always means "relative to the root ( ) element's font-size", so changing a parent's size never affects it — that predictability is why rem is the common choice for consistent type scales. em means "relative to this element's own computed font-size" (which is inherited from its parent unless overridden), so em values compound as they nest inside other em-sized elements.

What's the difference between px and pt?

px (pixels) is the standard unit for screen design. pt (points) comes from print, where 1pt = 1/72 inch; browsers convert it using a fixed 96 CSS-pixels-per-inch reference, so 1pt = 96/72 ≈ 1.333px. pt is rarely used in CSS for screens, but this converter includes it for print stylesheets or design-tool handoffs.

Why does this tool recommend rem over px for font-size?

px font sizes ignore a user's browser-level "default font size" accessibility setting, so someone who has increased their default text size for readability sees no change on px-sized text. rem sizes scale with that setting because they're relative to the root font-size, which most browsers do respect when a user changes their default.

Is this the same as the CSS Clamp Generator?

No — the Clamp Generator builds a single fluid clamp() value that scales continuously between a min and max size as the viewport changes. This tool is a static unit converter: it tells you what a fixed size equals in px, rem, em, pt, and % given a root and parent size, without any viewport-based scaling.

Does this tool save my root or parent size settings?

No — all values are calculated live in your browser from what you type. Nothing is uploaded or stored; reloading the page resets it to the 16px defaults.

FONT SIZE CALCULATOR

Convert a font size between px, rem, em, pt, and %, with a live size preview.

Value

Root (html) size

Parent font-size (for em/%)

Aa — preview at this size

How to convert a font size

1
Enter a font size and pick its starting unit (px, rem, em, pt, or %).
2
Set the root (html) font-size if it isn't the default 16px.
3
Set the parent element's font-size if you're converting em or %.
4
Read the converted value in every other unit, and click any card to copy it.
5
Check the live preview to see how that size actually renders.

Questions

Why does rem depend on the root size but em depends on the parent?: rem always means "relative to the root (<html>) element's font-size", so changing a parent's size never affects it — that predictability is why rem is the common choice for consistent type scales. em means "relative to this element's own computed font-size" (which is inherited from its parent unless overridden), so em values compound as they nest inside other em-sized elements.
What's the difference between px and pt?: px (pixels) is the standard unit for screen design. pt (points) comes from print, where 1pt = 1/72 inch; browsers convert it using a fixed 96 CSS-pixels-per-inch reference, so 1pt = 96/72 ≈ 1.333px. pt is rarely used in CSS for screens, but this converter includes it for print stylesheets or design-tool handoffs.
Why does this tool recommend rem over px for font-size?: px font sizes ignore a user's browser-level "default font size" accessibility setting, so someone who has increased their default text size for readability sees no change on px-sized text. rem sizes scale with that setting because they're relative to the root font-size, which most browsers do respect when a user changes their default.
Is this the same as the CSS Clamp Generator?: No — the Clamp Generator builds a single fluid clamp() value that scales continuously between a min and max size as the viewport changes. This tool is a static unit converter: it tells you what a fixed size equals in px, rem, em, pt, and % given a root and parent size, without any viewport-based scaling.
Does this tool save my root or parent size settings?: No — all values are calculated live in your browser from what you type. Nothing is uploaded or stored; reloading the page resets it to the 16px defaults.