Converters
EM to Point Converter
Convert EM units to points (pt) for print styling and cross-media design.
Default browser font size is 16px
The EM to Point converter is a tool that helps web developers and designers convert EM units to point (pt) values for CSS styling. This conversion is particularly useful when working with print stylesheets or when transitioning between web and print design.
What are EM Units?
EM is a relative unit in CSS that is based on the font-size of the parent element. 1em equals the font-size of the parent element. If the parent element has a font-size of 16px (browser default), then 1em = 16px.
What are Point Units?
Point (pt) is an absolute unit of measurement used in print design. In CSS, 1pt is equal to 1/72 of an inch. Points are commonly used in print stylesheets and when precise control over font sizes is needed for printing.
Conversion Formula
The conversion between EM and points involves first converting EM to pixels, then pixels to points:
2. px to pt: pt = px × 0.75
Combined: pt = em × baseFontSize × 0.75
For example, with the default base font size of 16px:
- 1em = 12pt (1 × 16 × 0.75)
- 2em = 24pt (2 × 16 × 0.75)
- 0.5em = 6pt (0.5 × 16 × 0.75)
Common EM to Point Conversions
EM Value | Point Value (16px base) | Common Use |
---|---|---|
0.75em | 9pt | Small text |
1em | 12pt | Normal text (base size) |
1.25em | 15pt | Slightly larger text |
1.5em | 18pt | Subheadings |
2em | 24pt | Headings |
3em | 36pt | Large headings |
When to Use EM vs Point
EM and point units serve different purposes in web design:
- EM: Best for responsive web design where text sizes need to scale relative to parent elements. EM units are preferred for screen display.
- Point: Better for print stylesheets and when precise control over physical size is needed. Points are commonly used in print design and PDF generation.
Print Stylesheet Example
Here's an example of using point units in a print stylesheet:
Browser Support
Both EM and point units are supported in all modern browsers. However, point units may render differently across browsers when used for screen display, which is why they're primarily recommended for print stylesheets.