EM to Points Converter
Convert em units to typographic points using a chosen base font size. The tool also shows pixels, rem-style comparison values and reverse conversion for layout notes, print handoff and style sheets.
Type Unit Input
Converted Type Size
1.25em at a 16 px base equals 20 px, which is 15 pt using the CSS 96 px per inch relationship.
This result is context-dependent. The same em value changes when the base font size changes, so the converter keeps pixels, points, rem comparison and reverse em beside each other.
EM, Pixels and Points
EM
An em is relative. If the parent or current font size is 16 px, 1em is 16 px and 1.25em is 20 px.
Points
A point is a print-style length unit. In CSS conversion, 1 pt is 1/72 inch and 1 px is treated as 1/96 inch.
Context
The same em value can convert to different point sizes when the base font size changes. Always record the base.
How to Use the Converter
Enter the em value and the base font size in pixels. If a component says 1.25em and its parent font size is 16 px, the size is 20 px. Using the CSS relationship between px and pt, 20 px equals 15 pt. If the parent font size is 18 px, the same 1.25em becomes 22.5 px, or 16.875 pt.
Use the reference root size when you want to compare the result with rem values. Em follows the local context, while rem follows the root font size. A size can be 1.25em in a component but 1.5rem relative to a different root, so the converter keeps both visible.
The “treat px and pt as equal” option is included for rough legacy notes, but it is not the CSS conversion. Use CSS conversion for web style sheets, browser-based proofs and design token tables that need a clear unit relationship.
Formula and Method
pixels = em value x base font size in pixels
points = pixels x 72 / 96
points = pixels x 0.75
rem equivalent = pixels / root font size
reverse em = reverse points / 0.75 / base font size
The conversion assumes the CSS absolute-unit relationship. Physical printed output can still differ because of print scaling, PDF export settings, printer drivers and viewing software.
Common EM to Point Values at 16 px Base
| EM | Pixels | Points | Typical use | Note |
|---|---|---|---|---|
| 0.75em | 12 px | 9 pt | Fine print, helper text and dense labels. | Check readability before using for long text. |
| 0.875em | 14 px | 10.5 pt | Small interface text and compact tables. | Common for secondary text. |
| 1em | 16 px | 12 pt | Base paragraph size in many systems. | Only true when the base is 16 px. |
| 1.25em | 20 px | 15 pt | Small headings and lead labels. | Scales with parent size. |
| 1.5em | 24 px | 18 pt | Section headings and larger controls. | May wrap in narrow containers. |
| 2em | 32 px | 24 pt | Display headings. | Use with responsive layout checks. |
Practical Notes
- Record the base: “1.25em” without a base is incomplete for point conversion.
- Check nested components: Em compounds when a child inherits a changed parent size.
- Use points carefully: Points are familiar in print, but web layout should usually keep CSS units.
- Watch line-height: Converting font size alone does not convert line-height, spacing or measure.
- Test real text: Long words, uppercase labels and numbers can need different sizing than sample text.
Worked Example
A style note lists a card heading as 1.25em inside a component whose base text is 16 px. The pixel size is 1.25 x 16 = 20 px. CSS point conversion gives 20 x 0.75 = 15 pt. If the same component is placed inside a 14 px context, the heading becomes 17.5 px and 13.125 pt.
This is why the converter asks for base size. Em is powerful because it follows context, but that also means a single em value does not have one fixed point value.
Where This Conversion Helps
Use this converter when a web style, email template, PDF proof or brand note mixes relative CSS units with print-style point sizes. A designer may describe body copy as 11 pt, while a front-end style sheet uses 0.9375em. The bridge is the base pixel size. Once the base is known, the point value can be checked without guessing or copying a number from a different component.
It is also useful for design tokens. If a token table says small text is 0.875em at a 16 px base, the converter shows 14 px and 10.5 pt. If the same token is used inside a component that sets the parent to 18 px, the output changes to 15.75 px and 11.8125 pt. That difference is not an error; it is how em units are meant to behave.
Handoff Checklist
Record the base font size beside every em-to-point conversion. State whether the point value uses the CSS 96 px per inch relationship or an app-specific export rule. Check headings, labels, tables and form controls with real copy, because line breaks can change when point sizes are rounded. For print files, export a PDF and check the final scale, since printer settings can override the size that looked correct on screen.
For shared documents, include the original em value, the base pixel size, the calculated pixel value and the point value in the same row. That small audit trail makes later reviews much easier when a component base size changes or a printed proof uses a different export setting.
FAQ
Is 1em always 12 pt?
No. It is 12 pt only when the base font size is 16 px and the CSS 0.75 point conversion is used.
Why does my design app differ?
Apps may use different assumptions, zoom, export scaling or point handling. Check the unit system used by the app.
Should I use em or rem?
Use em when sizing should follow the local text context. Use rem when sizing should follow the root text size.
Can I use this for printed PDFs?
Yes as a unit check, but verify the exported PDF scale because print settings and app rules can alter physical output.
Why is the base font size required?
Em is relative. Without the base pixel size, there is no single point value to convert to.
Sources
- World Wide Web Consortium (2023) ‘CSS Values and Units Module Level 4‘. W3C.
- World Wide Web Consortium (2024) ‘CSS Fonts Module Level 4‘. W3C.
- International Organization for Standardization (1975) ISO 216: Writing paper and certain classes of printed matter. ISO.