Typography Converter

Typography Converter

Convert between pixels, points, picas, em, rem, inches, centimeters, and millimeters -- the units designers and developers encounter every day. This converter bridges the gap between print design (points, picas) and web development (px, em, rem), helping you keep font sizes consistent whether you are working in Figma, InDesign, or a CSS stylesheet.

How Typography Conversion Is Calculated

All units route through pixels (px) as the internal base, assuming a standard 96 DPI screen resolution and a 16 px root font size. The conversion works in two steps: first convert the input to pixels using its factor, then convert from pixels to the target unit.

Key conversion factors (to pixels):

• 1 pt = 1.3333 px (because 1 pt = 1/72 in, and 1 in = 96 px)
• 1 pc (pica) = 16 px (1 pc = 12 pt = 12 x 1.3333)
• 1 in = 96 px
• 1 cm = 37.795 px
• 1 mm = 3.7795 px
• 1 em = 16 px (at default 16 px root)
• 1 rem = 16 px (at default 16 px root)

Worked Examples

Scenario 1 -- Designer handing off print specs to a web developer A brand style guide specifies body text at 10 pt and headings at 24 pt. The web developer needs px equivalents. 10 pt x 1.3333 = 13.33 px (rounds to 13 px), and 24 pt x 1.3333 = 32 px. Set body font-size to 13px and h1 to 32px to match the print appearance.

Scenario 2 -- Converting a Figma design from px to rem for accessibility A Figma file uses 16 px for paragraph text, 20 px for subheadings, and 28 px for headings. Dividing each by 16 (the default root font size) gives 1 rem, 1.25 rem, and 1.75 rem. Using rem instead of px allows users who set a larger browser default font to benefit from proportionally larger text.

Scenario 3 -- Checking centimeter measurements for a PDF export A legal document template requires font sizes in centimeters. The designer uses 0.42 cm for footnotes and 0.635 cm for body text. Converting: 0.42 cm x 37.795 = 15.87 px ≈ 12 pt; 0.635 cm x 37.795 = 24 px = 18 pt. Both are standard print sizes confirming the measurements are correct.

Typography Unit Reference Table

When to Use This Tool

• Translating a print style guide (in points) into a CSS stylesheet (in px or rem) for a website redesign
• Converting Figma designs that use px into rem values to implement accessible, browser-zoom-friendly layouts
• Checking that a PDF or Word document's font sizes will match the web counterpart
• Scaling up a design: a client asks "make everything 10% bigger" -- convert to a common unit, multiply, convert back
• Verifying that body copy at 16 px matches the standard 12 pt print body text expectation

Common Mistakes

1. Using em instead of rem for global text sizes. Because em is relative to the parent element, nesting components causes compounding. A 1.2 em inside another 1.2 em element renders at 1.44x the root -- often unintended. Use rem for predictable global sizing.
2. Assuming 1 px = 1 pt. Points are larger: 1 pt = 1.333 px. Setting a CSS rule to 12px when a designer specified 12pt will produce text that is 25% smaller than intended.
3. Ignoring that em and rem change when the root font size changes. If you set html { font-size: 18px; }, then 1 rem = 18 px, not 16 px. Always state the root size assumption when sharing rem values.
4. Using pt for web CSS. Although browsers accept pt, it is a print unit that maps inconsistently across screen densities and zoom levels. Stick to px for fixed sizes and rem for scalable text on the web.

Context and Applications

Typography unit conversion comes up in three main workflows. In print-to-web migration, a brand may have decades of print assets defined in points and picas that need to transfer to a digital style system. Matching 10 pt print body text to 13.33 px web body text keeps visual consistency. In accessibility compliance, WCAG 2.1 guideline 1.4.4 requires text to be resizable up to 200% without loss of content. Using rem instead of px lets the browser honor a user's default font-size preference, which px overrides. In responsive web typography, the CSS clamp() function requires specific px or rem values for minimum and maximum sizes -- this converter helps you define those bounds based on designer point specifications.

Tips

1. The universal shortcut to memorize: 16 px = 12 pt = 1 rem = 1 em (at default browser settings)
2. Divide any px value by 16 to get its rem equivalent -- 24 px / 16 = 1.5 rem
3. Multiply any pt value by 1.333 to get px -- 18 pt x 1.333 = 24 px
4. For print documents, 1 pica = 12 points, so a 3-pica column gutter = 36 pt = 48 px
5. When building a design token system, define all sizes in rem so a single root font-size change scales the entire system
6. Use px for borders (1 px), box shadows, and fine details that should not scale with text size