How to Convert Font Sizes Between px, pt, em, and rem

A design handoff specifies font sizes in points, but your CSS uses rem. A design system component uses em for internal spacing that needs to scale with its own font size, and you’re trying to figure out what pixel value that actually resolves to on the page. Font size units aren’t just cosmetic differences — px, pt, em, rem, and percent behave genuinely differently, and converting between them correctly (rather than treating them as interchangeable) matters for getting consistent, predictable typography.

The tricky part isn’t the arithmetic — it’s that em and percent are relative units, meaning their actual rendered size depends on context (the parent element’s font size, or the document’s root font size for rem), which means the “same” em value can render at different actual sizes in different places.

What each font size unit actually means

Pixels (px) are an absolute unit — a given px value renders at a fixed size regardless of context. Points (pt) are also absolute, historically from print, and rarely used in web CSS but common in design and document tools. Em is relative to the font size of its own element (or its parent, depending on context), which is what makes it useful for scalable spacing but also what makes converting it to px require knowing that specific context. Rem is similar to em but always relative to the root (html) element’s font size specifically, which makes it more predictable across nested elements than em. Percent works similarly to em, expressing size relative to a parent or base value.

Because em and rem are relative, a “conversion” between them and px isn’t a fixed universal number — it depends entirely on what the relevant base font size actually is, which is exactly where manual conversion goes wrong if that base size isn’t accounted for.

Why people get stuck here

• Forgetting the base font size when converting. Converting rem to px without knowing the root font size (commonly but not always 16px) produces an incorrect pixel value.
• Em compounding through nested elements. Since em is relative to its own element’s context, nested elements using em can compound unexpectedly, producing a rendered size different from what a flat conversion would suggest.
• Mixing units inconsistently across a project. Using px in some places and rem in others without a clear system makes it hard to reason about how changing a base font size will cascade through the design.
• Assuming pt converts the same as px. Points and pixels aren’t the same unit even though both are absolute — converting between them requires the correct ratio, not a 1:1 assumption.

What a good font size converter looks like

Converts between all common units at once

Seeing px, pt, em, rem, and percent equivalents together from one input value, rather than converting one pair at a time, is faster for checking a value across whatever unit system a project actually uses.

Lets you adjust the base font size

Since em, rem, and percent are relative, being able to set the base font size the conversion is calculated against is essential for getting an accurate result rather than an assumption.

Shows a live text preview

Seeing the actual rendered size, not just the numeric conversion, helps confirm the converted value looks the way you expect before committing it to a stylesheet.

Common mistakes to avoid

• Converting rem to px using an assumed 16px base without checking whether the actual project has changed the root font size.
• Treating em and rem as interchangeable, when em’s relative-to-parent behavior can compound differently than rem’s relative-to-root behavior in nested contexts.
• Mixing absolute and relative units inconsistently across a project, making the overall type scale harder to reason about or adjust globally.
• Assuming pt and px convert 1:1, when they’re related by a specific ratio (96 px per inch, 72 pt per inch) rather than being equivalent.
• Not testing a converted value’s actual rendered appearance, relying purely on the numeric conversion without visual confirmation.

How to do it with Font Size Converter

Online Tool Store’s Font Size Converter runs entirely in your browser.

1. Open the Font Size Converter tool.
2. Enter a font size value in whichever unit you have.
3. Set the base font size if converting to or from a relative unit like em or rem.
4. Review the converted values across all units, along with the live text preview.

Because the base font size is adjustable, the relative-unit conversions reflect your actual project setup rather than a generic assumption.

Frequently asked questions

Why does 1rem not always equal 16px?

1rem equals the root element’s font size, which defaults to 16px in most browsers but can be changed by a project’s own CSS — if a project sets a different root font size, 1rem will correspond to a different pixel value than the common 16px default.

What’s the difference between em and rem in practice?

Em is relative to its own element’s font size (or a parent’s, depending on nesting), which means it can compound through nested elements. Rem is always relative to the root element’s font size specifically, which makes it more predictable and is often preferred for that reason in modern CSS.

When should I use pt instead of px or rem in a design project?

Points are mostly relevant for print design or documents rather than web CSS, where px and rem are the more common choices — you’ll mainly encounter pt when converting a design spec that originated in a print or document context into web-appropriate units.

Final thought

Font size units aren’t interchangeable numbers — em, rem, and percent depend on context in a way px and pt don’t, and getting a conversion right means knowing the actual base font size, not just applying a fixed ratio.

Try the free Font Size Converter tool