When you need this tool
Different tools speak different font units. Figma and CSS use pixels, Word and InDesign use points, and modern CSS prefers rem. A brand guide might say “body 11 pt”, a developer needs rem, and a print shop wants millimeters. This converter shows them all at once.
How the units relate
- px: the CSS pixel, 1/96 inch.
- pt: 1/72 inch, so 1 pt = 1.3333 px and 12 pt = 16 px.
- rem: a multiple of the root (html) font size, 16 px by default.
- em and %: multiples of the parent’s font size. 1.5em = 150%.
- pc (pica): 12 points.
- mm: a physical size at the CSS reference of 96 px per inch.
A practical type scale
At a 16 px root:
- Small text: 14 px = 10.5 pt = 0.875 rem
- Body: 16 px = 12 pt = 1 rem
- Subheading: 20 px = 15 pt = 1.25 rem
- Heading: 32 px = 24 pt = 2 rem
Common mistakes
Copying point sizes into CSS as pixels. 12 pt in a document is 16 px on the web, not 12.
Setting a fixed px size on html. It blocks the user’s browser font-size preference. Leave the root alone, or use a percentage.
For single conversions, see pixels to rem and points to pixels.