Font Size Conversion Table
| Pixels | Points | em (16px root) | Typical use |
|---|---|---|---|
| 8px | 6pt | 0.5em | fine print |
| 9px | 6.75pt | 0.5625em | fine print |
| 10px | 7.5pt | 0.625em | small caption |
| 11px | 8.25pt | 0.6875em | caption |
| 12px | 9pt | 0.75em | small text |
| 14px | 10.5pt | 0.875em | secondary text |
| 16px | 12pt | 1em | body default |
| 18px | 13.5pt | 1.125em | large body |
| 21px | 15.75pt | 1.3125em | h4-size |
| 24px | 18pt | 1.5em | h3-size |
| 30px | 22.5pt | 1.875em | h2-size |
| 36px | 27pt | 2.25em | h1-size |
| 48px | 36pt | 3em | display |
| 60px | 45pt | 3.75em | hero |
| 72px | 54pt | 4.5em | poster |
The same font size has four spellings - px, pt, em, rem - and design tools hand you whichever one they like. This table pins the common sizes in all units at once, and the calculator converts any value at any root size using the scale CSS fixes exactly: 1 inch = 96 px = 72 pt.
The part that matters beyond arithmetic: px and pt are absolute, em scales against the parent, and rem scales against the root - which is why rem is the accessibility-safe unit and why the root size box exists.
How to use
- Enter a value with its unit and the root size; the chips load the 16px body default, the 12pt print size, and a 1.5em heading.
- Read the table for the standard ladder from 8px fine print to 72px poster type at the 16px default root.
- Check the second line of the result for the pt and percentage equivalents - handy when a print spec and a screen spec must agree.
Frequently asked questions
Why is 16px the base size?
It is the default root font size of every browser - the value your visitor gets before any stylesheet applies. Because rem divides by it, 1rem = 16px = 12pt at defaults, and the whole px/rem/pt triangle hangs off that single number.
Is a pt the same on screen as in print?
In CSS, pt is pinned to px at exactly 0.75pt per pixel regardless of the device - it is a print unit that renders consistently but tells you nothing about physical size on screen. Use it when a print stylesheet asks for it; stick to rem on screen.
When should I use em instead of rem?
em compounds: 1.2em inside 1.2em is 1.44 times the root - useful for components that should scale with their context, a footgun when nesting runs deep. rem is flat: it always measures against the root, which keeps a design predictable.
Which unit is best for accessibility?
rem. A visitor who raises the browser base font size expects text to follow; rem respects that choice automatically, while px overrides it. The root-size box above shows exactly how the same rem value resolves at a different base.