Point to EM
Convert points (pt) to em values.
Convert Points (pt) to EM (em). Results update as you type.
pt
Browser default is 16px
pt to em conversion table (base 16px)
| Points | EM |
|---|---|
| 6pt | 0.5em |
| 7pt | 0.5833em |
| 8pt | 0.6667em |
| 9pt | 0.75em |
| 10pt | 0.8333em |
| 10.5pt | 0.875em |
| 11pt | 0.9167em |
| 12pt | 1em |
| 14pt | 1.1667em |
| 16pt | 1.3333em |
| 18pt | 1.5em |
| 20pt | 1.6667em |
| 24pt | 2em |
| 28pt | 2.3333em |
| 36pt | 3em |
| 48pt | 4em |
| 72pt | 6em |
Point to EM Converter
Convert point sizes from print specs into em units that scale with their surroundings. With a 16px parent font size, 18 points becomes 1.5em. Set the base field to the font size of the element's parent to get an exact match.
Formula
em = pt × (96 ÷ 72) ÷ parent font size
With the default 16px parent this simplifies to em = pt ÷ 12, since 12pt is exactly 16px.
| Points | EM (16px parent) | EM (20px parent) |
|---|---|---|
| 9pt | 0.75em | 0.6em |
| 10.5pt | 0.875em | 0.7em |
| 12pt | 1em | 0.8em |
| 15pt | 1.25em | 1em |
| 18pt | 1.5em | 1.2em |
| 24pt | 2em | 1.6em |
Worked example: a magazine layout on the web
A print magazine sets body copy at 12pt, pull quotes at 18pt, and footnotes at 9pt. On the web the article body inherits 16px, so the pull quote is 1.5em and the footnote 0.75em. Later the team bumps the article body to 20px for readability. Because the quote and footnote were written in em, they grow automatically to 30px and 15px – the print proportions survive without touching a single rule. That is the key advantage of em over hard-coded pixel conversions.
Tips
- Point sizes in fractions like 10.5pt convert cleanly: 10.5pt = 14px = 0.875em at a 16px parent.
- Em compounds: an element sized 1.5em inside another 1.5em element ends up 2.25 times the outer size.
- For line-height, prefer unitless numbers (such as 1.5) rather than em values.
Need a size that ignores nesting? Try Point to REM. To check the pixel output first, use Point to PX.
Frequently Asked Questions
How do I convert pt to em?
Convert points to pixels (pt × 1.3333), then divide by the parent font size. With a 16px parent, 18pt = 24px = 1.5em.
What is 12pt in em?
12pt is 16px, so it equals 1em when the parent font size is 16px. If the parent is 20px, 12pt is 0.8em.
Why does the result depend on the base size?
Points are absolute, but em is relative to the parent element's font size. The same 12pt heading is 1em inside 16px text and 0.8em inside 20px text.
Should I use em or rem for converted point sizes?
Use em when the size should scale with its surrounding component, such as icons or padding next to text. Use rem when every instance should have the same size across the page.