Why isn't the root font-size always 16px?

16px is just the browser default for unstyled pages — a site's CSS can set a different root font-size (a common way to scale an entire rem-based design proportionally), and users can also change their browser's default font-size in accessibility settings.

When should I use pt instead of px or rem?

Almost never for screen/web display — pt is a print-oriented unit. It's mainly relevant if you're writing a print stylesheet, where pt more directly maps to physical page dimensions.

Why does the em result change when I change the parent font-size but rem doesn't?

That's the defining difference between the two units — em is defined relative to the parent element specifically, while rem always resolves against the root element's font-size regardless of what any parent element does.

All tools

Converters

CSS Unit Converter

Convert between px, rem, em, and pt.

🔒 Runs entirely in your browser — nothing here is ever uploaded

About the CSS Unit Converter

Converts a pixel value into rem, em, and pt — the relative and absolute length units CSS uses alongside px — accounting for a custom root or parent font-size instead of assuming the 16px browser default.

How to use it

Enter a Pixel value.
Enter the Root font-size (the <html> element's font-size, 16px by default) and the Parent font-size (for em, which is relative to the immediate parent element, not the root).
Read the equivalent rem, em, pt, and percentage values in the result panel.

Formula

rem = px ÷ root font-size (rem is always relative to the root <html> element, regardless of nesting)
em = px ÷ parent font-size (em is relative to the nearest parent with a set font-size, so it compounds with nesting)
pt = px ÷ (96 ÷ 72), using the standard 96 CSS-pixels-per-inch and 72 points-per-inch relationship

16px is the browser default root font-size per the CSS specification's 'medium' keyword, but it's a default, not a rule — a page's actual root font-size can be changed by the page's own CSS or a user's browser settings.

Worked example

At the browser-default 16px root and parent: 16px converts to exactly 1rem, 1em, and 12pt.

Interpreting your result

em and rem are not interchangeable — em depends on the nearest ancestor's font-size and compounds when nested (an em-sized element inside another em-sized element multiplies), while rem always resolves against the single root font-size no matter how deeply nested it is. Use the Parent font-size field to model your actual em context, not the root.

Recommendations

• rem is generally preferred for consistent, predictable sizing across a page, since it never compounds unexpectedly the way nested em values can.
• If your page sets a root font-size other than 16px (a common technique for scaling an entire design proportionally), rem and px stop lining up 1:1 — enter your actual root font-size for an accurate conversion.
• pt is mostly relevant for print stylesheets — for screen display, browsers render px, rem, and em, not pt, as their native reference unit.

Frequently asked questions

rem is always relative to the root <html> element's font-size, full stop. em is relative to the nearest ancestor element that sets a font-size — which means nested em values compound (an element sized in em, inside a parent also sized in em, multiplies the effective size), while rem never does.