🔤 July 9, 2026

px, pt, rem, em, %: Which Font-Size Unit to Use and How to Convert Them

A plain-English guide to CSS font-size units — why pt is a print unit, how rem and em actually differ, the 62.5% trick, and how to convert any size to any other unit.

DesignTypography

You inherit a stylesheet where the body is 1rem, a heading is 2.25em, a caption is 10pt, and a stray banner says font-size: 120%. Every one of those describes a size, but none of them tells you how many actual pixels will land on screen until you know what they’re measured against. Font-size units in CSS are not five different ways of saying the same thing — they are relative and absolute measurements anchored to different references, and mixing them up is how you end up with text that looks fine in one component and wildly off in another. Once you understand what each unit points at, converting between them is a single division, which is exactly what the Font Size Converter does in both directions.

px is the only unit that stands on its own

A pixel in CSS is an absolute reference unit. 16px is 16px regardless of parent, root, or context — it does not care what any ancestor element is doing. That predictability is its strength and its weakness. It’s the right choice for fixed UI chrome — borders, icon labels, a status bar — where you want the size pinned no matter what. It’s the wrong choice for body copy, because a hard-coded pixel size historically ignored the reader’s own font-size preference. Modern browsers zoom pixel text too, so px is less hostile to accessibility than it once was, but it still expresses “this exact size, always,” which is rarely what you want for content that should scale with its surroundings.

pt is a print unit that snuck into screens

Points come from typography and print, where 1 point is 1/72 of an inch. CSS defines the conversion at the standard 96 DPI reference: 1pt = 1.3333px. So 12pt, the classic word-processor default, is 16px on screen — which is exactly why 16px became the web’s de-facto body size. If you’re translating a print spec or a design handed off in points, that 1.3333 multiplier is the whole conversion: multiply points by 1.3333 to get pixels, or divide pixels by 1.3333 to get points. Use pt when you’re genuinely targeting print stylesheets; on screen it just adds a mental conversion step for no benefit.

rem and em: the two that people actually confuse

This is the pair worth getting exactly right, because they look similar and behave differently.

rem is relative to the root element (the <html> tag). If the root font-size is 16px, then 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px — everywhere on the page, no matter how deeply nested the element is. There is one anchor and it never moves as you descend the DOM.
em is relative to the parent element’s font-size. If a container is set to 20px, then 1em = 20px inside that container, and 1.2em is 24px. Nest an em-sized element inside another em-sized element and the multipliers compound — a 1.2em label inside a 1.2em card inside a 1.2em section is 1.2 × 1.2 × 1.2 = 1.728× the base. That compounding is either a feature (component-scoped sizing that grows with its container) or a footgun (runaway nested text), depending on whether you meant it.

The practical rule most design systems settle on: rem for anything that should respect the global type scale and the user’s zoom — body text, headings, most spacing — and em for sizing that should track its immediate context, like an icon that should always be 1.2× the text next to it, or padding that should grow with the button’s own font-size. Percentages behave like em (100% = parent size), so 120% and 1.2em are the same thing.

The 62.5% trick, and why it exists

You’ll see stylesheets that set html { font-size: 62.5%; }. That’s 62.5% of the 16px default, which is exactly 10px. The point is arithmetic convenience: with a 10px root, every rem becomes a clean tenth — 1.4rem is 14px, 2.4rem is 24px, 0.8rem is 8px — so you can size in rem while thinking in pixels. It’s a legitimate technique, but it has a catch: it changes the meaning of rem everywhere, so any third-party CSS or component that assumed a 16px root will render smaller than its author intended. If you adopt the trick, adopt it globally and consistently.

Converting: everything routes through pixels

The reason a converter is useful is that there’s no direct “rem to pt” formula worth memorizing — but there’s a trivial one if you go through pixels as a common currency. Turn the source value into pixels using its reference, then turn pixels into whatever you want:

px → pt: divide by 1.3333
px → rem: divide by the root size (usually 16)
px → em: divide by the parent size
px → %: divide by the parent size, times 100

And in reverse, multiply. So 1.5rem at a 16px root is 24px, which is 18pt, which is 1.2em inside a 20px parent, which is 120% of that same parent. Same physical size, four different notations — the only thing that changed is the reference each unit is measured against. The trap is assuming a unit “is” a size; it’s a size relative to something, and if you don’t know the something, you don’t know the size.

Where this fits into a type scale

Individual conversions matter most when you’re building or auditing a modular type scale — a set of sizes generated by a ratio (1.25, 1.333, the golden ratio) rather than picked at random. Those scales are usually expressed in rem for accessibility, but design tools hand you pixels and print specs hand you points, so you’re constantly translating. Pair this with the Typography Scale Calculator to generate the ratio-based steps, and the Pixels to cm / Inches Converter when a size needs to cross from screen into a physical print size.

The one-input answer

When you just need to know “what is 0.875rem in pixels, and what’s that in pt and em,” drop the value and its reference sizes into the Font Size Converter. It routes everything through pixels, shows all five units at once with the exact CSS string for each, and previews the result at real size so you can see, not just calculate, what you’re shipping. It won’t decide which unit you should use — that’s a design call — but it removes every bit of the arithmetic between them.

Try the tools from this guide

All articles