🦉 UnitOwl

Points to Em

1 Point (pt) = 0.0833333Em (em)

By KAMP Inc. / UnitOwl · Last reviewed:

Result
0.0833333 em
1 pt = 0.0833333 em
Ad Slot (horizontal)

How to Convert Points to Em?

To convert points to em, divide the point value by the element's computed font size in points (typically 12pt for the browser default). With a 12pt (16px) base, 1em = 12pt, so 18pt = 1.5em and 24pt = 2em. This conversion bridges print typography (measured in points) and responsive web design (using em for flexible sizing). When a style guide provides type sizes in points and you need to implement them in em-based CSS, this conversion is essential. It also arises when migrating print designs to web, adapting email templates, or integrating with third-party tools that output specifications in points. The benefit of converting to em instead of px is that the type can still respond to local context, such as a larger component font size or a user-adjusted browser default. That makes pt-to-em especially useful when the goal is to preserve proportional relationships rather than freeze everything at one absolute screen size. It is also useful when print-derived type scales need to stay proportional inside reusable components and nested UI patterns.

How to Convert Point to Em

  1. Determine the base font size in points (default: 12pt = 16px).
  2. Divide the point value by the base font size in points to get em.
  3. The formula is: em = pt / base-font-size-in-pt.
  4. At the 12pt default: 9pt = 0.75em, 12pt = 1em, 14pt = 1.167em, 18pt = 1.5em, 24pt = 2em.
  5. Alternatively, convert pt to px first (pt x 1.333), then px to em (px / 16).

Real-World Examples

A brand guide specifies 14pt for body text. Convert to em (base: 12pt).
14 / 12 = 1.167em. The text will be about 17% larger than the default.
A heading style is 36pt in the brand guide.
36 / 12 = 3em. Three times the base font size.
Fine print is specified at 8pt.
8 / 12 = 0.667em. Small but still legible for disclaimers.
A pull quote should be 20pt.
20 / 12 = 1.667em. A noticeable increase from body text for visual emphasis.
A print-based design system uses 30pt hero text. What em value matches at a 12pt base?
30 / 12 = 2.5em. The hero type becomes two and a half times the base text size.

Quick Reference

Point (pt)Em (em)
10.0833333
20.166667
50.416667
100.833333
252.08333
504.16667
1008.33333

History of Point and Em

The conversion between points and em represents the intersection of two typographic traditions: the absolute measurement system (points, from the 18th century) and the relative measurement system (em, from CSS in the 1990s). Points provided consistency across print shops — 12pt text was the same size everywhere. Em provided flexibility across screens — 1.5em text scales with user preferences. Modern design systems increasingly use em or rem, but point-based specifications persist in brand guidelines, academic formatting standards, and print-first organizations.

Common Mistakes to Avoid

  • Dividing by 16 (pixels) instead of 12 (points). The base in the same unit as the input. If starting in pt, divide by the base in pt (typically 12). If starting in px, divide by the base in px (typically 16). The results are the same, but mixing units gives wrong answers.
  • Forgetting that em is relative to the parent, not absolute. A 1.5em specification means different pixel sizes depending on where it is applied. In a 12pt context, 1.5em = 18pt. In a 14pt context, 1.5em = 21pt.
  • Not accounting for different base sizes in different contexts. If the parent element has been set to 14pt, then 1em = 14pt in that context, and converting 21pt to em gives 21/14 = 1.5em, not 21/12 = 1.75em.
  • Converting point sizes to em and then nesting them repeatedly without checking the cascade. A print-derived 1.5em rule can drift away from the intended spec if parent elements also scale in em.
Ad Slot (auto)

Frequently Asked Questions

Is 12pt always the base for pt-to-em conversion?
Only if the context element has the default font size. Most browsers default to 16px = 12pt. If the element or its parent has a different font size, use that as the base instead.
Can I use pt in CSS instead of converting to em?
You can, but pt is a fixed unit that does not scale with user preferences. For accessible web design, em or rem is preferred. Use pt only in @media print stylesheets or when you specifically need fixed sizes.
How does this conversion work with the 62.5% trick?
If the root is set to 62.5% (10px = 7.5pt), then 1em at the root level = 7.5pt. To convert 12pt to em: 12 / 7.5 = 1.6em. But you must also ensure body font-size is set to 1.6em/1.6rem to restore readable text.
Why choose em instead of rem for point-based type specs?
Choose em when you want the converted value to stay proportional to the local component or parent text size. Choose rem when you want every converted value to reference the root only. Em is more flexible inside reusable components, while rem is more predictable across a whole site.
What is 18pt in em at a 12pt base?
Divide 18 by 12: 18pt = 1.5em at the default 12pt base. That is one of the easiest anchor values to remember when translating print headings into relative CSS.
Quick Tip

A useful shortcut for pt-to-em at the default 12pt base: divide by 12, or equivalently, multiply by 0.0833. For common sizes: 10pt = 0.833em, 11pt = 0.917em, 12pt = 1em, 14pt = 1.167em, 16pt = 1.333em, 18pt = 1.5em, 24pt = 2em, 36pt = 3em. These cover the vast majority of typographic specifications.

Sources & References