About the Point to EM Converter
Type specifications from print designers, brand guidelines and word processing templates arrive in points. Stylesheets want a relative unit. This converter takes the point list and returns em values against whatever base font size applies, so a brand type scale can be transplanted into CSS in one pass.
The arithmetic runs through pixels. CSS treats an inch as 96 pixels and a point as one seventy second of an inch, so a point is 1.3333 pixels. Dividing by the base font size then gives em. At the standard 16 pixel base, 12pt becomes 1em, 18pt becomes 1.5em and 9pt becomes 0.75em, which is a tidy set to work with.
Print type scales do not always translate comfortably. A 10pt body size is normal on paper but renders at about 13 pixels on screen, which many teams find too small for comfortable reading, so the web version is often nudged up. Odd point sizes also produce long em decimals such as 11pt giving 0.9166666667em, and rounding that to three places is visually indistinguishable. Where you would rather size against the document root than the parent, use Point to REM instead.
How to use
- Paste the point sizes from the type spec, one per line.
- Set Base font size to the inherited pixel size.
- Read the em values and round them if you prefer.
- Drop them into your font-size declarations.
Common questions
- What is 12pt in em?
- Exactly 1em when the base font size is 16 pixels.
- How many pixels is a point?
- 1.3333 pixels, from 96 pixels per inch divided by 72 points per inch.
- Should print body sizes be reused on screen?
- Not directly. A 10pt print size is about 13 pixels, which most teams increase for screen reading comfort.
- Can I round the em values?
- Yes. Three decimal places is more than enough, and the difference is well under one pixel.