Typography converters
CSS and print type units side by side: px, rem, em, points and picas. Set the root font size and DPI once and every value follows.
Root font size (px, for rem)
Precision (significant figures)
Formula
rem = px ÷ root size
1 px = 0.0625 rem with a 16 px root font size
All typography converters
| Converter | Units | Typical use |
|---|---|---|
| Pixels to REM | px → rem | Design sizes to accessible CSS |
| REM to Pixels | rem → px | Reading design tokens and CSS |
| Pixels to Points | px → pt | Screen type sizes for documents and PDF |
| Points to Pixels | pt → px | Brand guide and Word sizes for the web |
| Points to Millimeters | pt → mm | Physical size of type and rules |
| Millimeters to Points | mm → pt | Metric specs in InDesign and Illustrator |
| Pixels to EM | px → em | Component sizes relative to their parent |
| EM to Pixels | em → px | Rendered size of nested em values |
| Pixels to VW | px → vw | Fluid type and layout from a mockup |
| VW to Pixels | vw → px | What a vw value renders at on a device |
| Picas to Points | pc → pt | Column widths from print layouts |
| Picas to Inches | pc → in | Picas in grid and column specs |
| Points to Centimeters | pt → cm | Type and rule sizes in metric |
| Centimeters to Points | cm → pt | Metric margins in point-based apps |
| Points to Inches | pt → in | Type and rules in US print specs |
| Inches to Points | in → pt | Margins, bleed and PDF page sizes |
Common situations
Why people usually need a typography conversion, and which tool answers it.
The Figma file is in pixels but your codebase uses rem.
Dividing by 16 over and over, and not every project uses 16. The risk: text that ignores the reader’s font-size setting and fails an accessibility review.
What you need
rem values that match the design at your actual root size.
The brand guide specifies 12 pt body text and 1.4 leading, and you’re building for screens.
Points belong to print; CSS pixels are a different size. The risk: type that looks noticeably off-brand next to printed material.
What you need
The pixel size and line height to use in CSS.
A mockup at 1440 px wide needs a heading that scales with the viewport.
vw depends on the screen width, so one number isn’t enough. The risk: headings that overflow on phones or shrink to nothing.
Related calculators
| Calculator | Typical use |
|---|---|
| Font Size Converter | One type size in px, rem, pt and mm |
| Line Height Calculator | Leading for readable body text |