PT to EM Converter
Convert between Points (pt) and EM CSS units with customizable parent font size and DPI
Live Font Size Preview
Hello
Conversion Formula
How Points and EM relate to each other
PT → EM
em = pt × (dpi ÷ 72) ÷ parentSize
e.g. 12 × (96 ÷ 72) ÷ 16 = 1em
EM → PT
pt = em × parentSize × (72 ÷ dpi)
e.g. 1 × 16 × (72 ÷ 96) = 12pt
At the standard web DPI of 96: 12pt with a 16px parent = 1em. At print DPI of 72: 16pt = 1em.
CSS Style Properties
Points value
h1 {
font-size: 12pt;
}EM value
h1 {
font-size: 0em;
}PT to EM Conversion Table
Parent font size: 16px, DPI: 96
| Points (pt) | EM | Pixels (px) |
|---|---|---|
| 3pt | 0.25em | 4px |
| 6pt | 0.5em | 8px |
| 9pt | 0.75em | 12px |
| 12pt | 1em | 16px |
| 15pt | 1.25em | 20px |
| 18pt | 1.5em | 24px |
| 21pt | 1.75em | 28px |
| 24pt | 2em | 32px |
| 27pt | 2.25em | 36px |
| 30pt | 2.5em | 40px |
| 33pt | 2.75em | 44px |
| 36pt | 3em | 48px |
| 39pt | 3.25em | 52px |
| 42pt | 3.5em | 56px |
| 45pt | 3.75em | 60px |
| 48pt | 4em | 64px |
| 51pt | 4.25em | 68px |
| 54pt | 4.5em | 72px |
| 57pt | 4.75em | 76px |
| 60pt | 5em | 80px |
About PT to EM Conversion
What is PT (Points)?
PT (Points) is a typographic unit from print design — 1 point = 1/72 of an inch. At 96 DPI (the CSS reference pixel standard), 1pt = 1.333px. Points are used in print stylesheets, PDF generation, and design tools such as Figma, Sketch, and Adobe products.
What is EM?
EM is a relative CSS unit. For font-size,
1em equals the parent element's font size. EM scales with both the parent element and user browser
preferences, making it a flexible choice for accessible, responsive web typography.
The Conversion Formula
em = pt × (dpi ÷ 72) ÷ parentFontSize
Step 1: convert points to pixels (px = pt × dpi ÷ 72).
Step 2: convert pixels to EM (em = px ÷ parentFontSize).
At 96 DPI with a 16px parent: 12pt = 16px = 1em.
When to Convert PT to EM
- Migrating print or design tool specifications to responsive web CSS.
- Converting designer-supplied pt values to EM for component implementation.
- Moving from a
@media printstylesheet to a unified web stylesheet. - Translating email client pt font sizes to modern EM-based web typography.
Common Conversions (parent = 16px, DPI = 96)
6pt
0.5em
8pt
0.6667em
9pt
0.75em
10pt
0.8333em
11pt
0.9167em
12pt
1em
14pt
1.1667em
16pt
1.3333em
How to Use the PT to EM Converter
- 1
Enter your value
Type the points (or EM) value you want to convert into the "From Value" input field.
- 2
Select the unit direction
Choose pt or em in both dropdowns. Use the swap button to reverse direction instantly.
- 3
Adjust settings if needed
Click Show Settings to change the parent font size and screen DPI. Use 96 DPI for screen output and 72 DPI for print.
- 4
Read the result and copy
The converted value appears instantly. Click Copy to copy it to your clipboard.
- 5
Check the live preview and table
The Live Font Size Preview shows how the result renders visually. The table lists common pt values with their EM and pixel equivalents.
Tip: At 96 DPI (standard screen) with a 16px parent, 12pt = 1em. This is the most important reference point when migrating from print typography to web CSS.
Common Use Cases
Design Tool to Web CSS
- • Convert Figma or Sketch pt font sizes to EM for web implementation
- • Translate Adobe XD point values to responsive CSS EM units
- • Match InDesign body copy pt sizes to their web EM equivalents
Print to Web Migration
- • Convert
@media printpt font sizes to EM for a unified stylesheet - • Migrate legacy pt-based typography to responsive EM for modern browsers
- • Adapt brand print guidelines to web-safe relative units
Email Template Development
- • Convert Outlook-specific pt font sizes to EM for web fallback styles
- • Translate pt values from email design mockups to CSS
- • Verify that pt sizes in HTML email match the intended EM scale
PDF Generation Workflows
- • Match wkhtmltopdf or Puppeteer pt font sizes to web EM values
- • Ensure invoice and report PDFs use the correct typographic scale
- • Reconcile pt-based PDF styles with the web stylesheet EM values
Accessibility & Scaling
- • Replace fixed pt font sizes with EM to respect user browser zoom preferences
- • Convert WCAG-recommended minimum pt sizes to EM equivalents
- • Audit pt-based font sizes and migrate to scalable relative units
Learning & Teaching CSS
- • Understand the relationship between absolute (pt) and relative (em) units
- • Demonstrate how DPI affects pt-to-em conversion
- • Use the live preview to visualise font size changes interactively
Frequently Asked Questions
What is the formula to convert points to EM?
Two steps: first convert pt to pixels (px = pt × dpi ÷ 72), then pixels to EM (em = px ÷ parentFontSize). Combined: em = pt × (dpi ÷ 72) ÷ parentFontSize. At 96 DPI with a 16px parent: 12pt = 1em.
Why does 12pt equal 1em at standard settings?
At 96 DPI, 1pt = 96/72 = 1.333px. So 12pt = 16px. With a 16px parent font size, 16px = 1em. This is why 12pt — the standard body text size in print — maps to exactly 1em in default browser settings.
What DPI should I use?
Use 96 DPI for standard web screens (the CSS reference pixel). Use 72 DPI for traditional print or macOS-native point sizing. Note that CSS pt values on screen are anchored to the CSS reference pixel, so physical DPI of the display does not change the CSS computation.
Should I use PT in web CSS?
Generally no. PT is an absolute physical unit that behaves unpredictably across screen DPIs. For web, prefer px, em, or rem. Use pt only in @media print stylesheets where physical sizing matters.
How do I convert EM back to points?
Use the swap button, or apply: pt = em × parentFontSize × (72 ÷ dpi). For 1em at 96 DPI with a 16px parent: 1 × 16 × 0.75 = 12pt.
Does changing the parent font size affect the result?
Yes. EM is relative to the parent, so the same pt value produces a different EM result depending on the parent size. 12pt with a 16px parent = 1em, but with a 20px parent = 0.8em. Use the Settings panel to set your specific context.
Is my data safe? Does this tool send data to a server?
No data leaves your browser. All calculations happen entirely client-side using JavaScript. Nothing you enter is uploaded or stored anywhere.
What is the difference between EM and REM?
EM is relative to the nearest parent element's font size and can compound in nested elements. REM (Root EM) always references the root html element's font size, making it predictable at any nesting depth. For consistent global typography, REM is preferred.