CodesBeautify

EM to Point Converter

Turn em type sizes into points for print stylesheets, PDF exports and design handoffs.

EM
Points
Runs locally in your browser

About the EM to Point Converter

Points come from typography and still rule anything destined for paper: print stylesheets, PDF generators, word processors and most type specimen sheets. Screens work in em and pixels. This converter bridges the two so a web component can be specified for a printed invoice or a report template without guesswork.

CSS pins the relationship by declaring one inch equal to 96 pixels and one point equal to one seventy second of an inch, which makes a point exactly 1.3333 pixels. With the usual 16px base, one em is 16 pixels and therefore 12 points, so 1.5em becomes 18pt and 0.75em becomes 9pt. Change the base font size field if your document root is set to something other than 16 and the whole table recalculates.

Two things trip people up. First, an em is relative to the parent element, so the same em value in two different places can produce different point sizes once the cascade is applied. Convert against the base that actually applies to that element. Second, printers sometimes work in PostScript points at 72 to the inch and sometimes in older printer points at about 72.27, though CSS and every modern PDF pipeline use the 72 figure this tool applies. For the reverse direction see Point to EM.

How to use

  1. List the em sizes you want in points, one per line.
  2. Set Base font size to the font size that the element inherits.
  3. Copy the point values into the print stylesheet.
  4. Keep the table handy for the sizes your design system repeats.

Common questions

How many points is 1em?
12pt when the applicable font size is the standard 16px.
Why is a point 1.3333 pixels?
CSS defines an inch as 96px and a point as one seventy second of an inch, so 96 divided by 72 gives 1.3333.
Should print stylesheets use points?
Points are a reasonable choice for print media queries because paper has a fixed physical size, unlike a screen.
My element sits inside another sized element. What base do I use?
Use the computed font size of the parent in pixels, since em multiplies that value rather than the root.