Typography Converter

🔤

px • pt • em • rem • pica • in

Value to Convert ⓘ

From

Base / Root Font Size (px) ⓘ

🔤

Enter a value to convert

How to Use the Typography Converter

Enter a value — the size you want to convert (positive number).
Select From and To units — px, pt, em, rem, picas, inches, cm, or mm.
Set the base font size — defaults to 16px (the browser default). em and rem are multiples of this.
Read the result — plus a quick grid in px, pt, em/rem, and picas, and a live text preview at that exact size.
Use swap (⇄) — flip From and To in one click.

Why Use This Typography Converter

🎯

CSS-Accurate

Uses the official CSS reference: 1 inch = 96px, 1pt = 1/72 inch (so 1pt = 1.3333px), and 1 pica = 12pt = 16px.

👁️

Live Preview

See real text rendered at the converted size — no more guessing what "1.5rem" actually looks like.

🔒

100% Private

All conversions run in your browser — no server, no account, nothing sent anywhere.

Typography Unit Guide — px, pt, em, rem & Picas Explained

Web and print typography mix absolute units (fixed physical sizes) with relative units (sized in relation to something else). Getting them right is essential for accessible, responsive design. The CSS reference is built on a fixed relationship: 1 inch = 96 CSS pixels, and 1 point = 1/72 inch. That makes 1pt = 96 ÷ 72 = 1.3333px, and 1 pica = 12 points = 16px.

Absolute units — px, pt, pc, in, cm, mm — are fixed multiples of each other. Points and picas come from print; pixels dominate the screen. Relative units — em and rem — are multiples of a font size. rem is always relative to the root element's font size (the <html> default of 16px), while em is relative to the current element's font size. With the standard 16px base: 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. This is why designers set body text to 1rem and headings to 2rem or 2.5rem — they scale cleanly when the user changes their browser's default size.

Why rem matters for accessibility: when sizes are defined in rem, a user who increases their browser's default font size scales the entire layout proportionally. Sizes locked in px ignore that preference. The common conversions to memorize at a 16px base: 12px = 0.75rem = 9pt, 14px = 0.875rem = 10.5pt, 16px = 1rem = 12pt, 18px = 1.125rem = 13.5pt, 24px = 1.5rem = 18pt, 32px = 2rem = 24pt.

💻

Common Web Sizes

At 16px base: body 16px = 1rem. Small text 14px = 0.875rem. H1 ≈ 32–40px = 2–2.5rem. Buttons 16–18px. Captions 12px = 0.75rem. Always set the body in rem for accessibility.

🖨️

Print Points

Body copy: 10–12pt. Headlines: 18–36pt. Captions: 8–9pt. 12pt = 16px = 1 pica. Word and InDesign default body text to 11–12pt. 72pt = 1 inch tall.

📐

The Math

1in = 96px = 72pt = 6pc = 2.54cm. 1pt = 1.333px. 1pc = 16px = 12pt. 1cm = 37.8px. These are CSS reference values, independent of your screen's actual physical DPI.

♿

em vs rem

rem = relative to root (html) font size — predictable. em = relative to the parent's font size — compounds when nested. Use rem for font sizes, em for spacing that should scale with its own text.

Formula & Logic

Typographic units descend from metal type and remain in use because they are convenient at text sizes. The modern PostScript point, adopted with desktop publishing, is exactly 1/72 of an inch, which conveniently makes 72 pt equal one inch. A pica is 12 points. On screen the CSS pixel adds a further layer: it is a reference unit of 1/96 inch rather than a physical device pixel, so 16 px — the browser default text size — is exactly 12 pt. The em is different in kind: it is relative to the current font size rather than absolute, which is what makes it the right choice for scalable, accessible layouts.

1 inch = 72 pt = 6 picas = 96 CSS px = 25.4 mm1 pt = 0.3528 mm · 1 pica = 12 pt · 1 CSS px = 0.75 ptem = multiple of the current font size

where:

point: 1/72 inch (PostScript point, the modern standard)
pica: 12 points, 1/6 inch — used for column widths
CSS px: 1/96 inch reference unit, independent of screen density
em: relative to the element's computed font size

Assumptions: The historic Didot and American points differed slightly from 1/72 inch; modern software uses the PostScript point throughout. On high-density displays one CSS pixel maps to several physical pixels, which is deliberate.

Step-by-Step Example: 12 pt Type in Millimetres and Pixels

Convert a standard body text size across print and screen units.

Type size12 pt

To inches: 12 ÷ 72 = 0.1667 in.
To millimetres: 0.1667 × 25.4 = 4.233 mm.
To CSS pixels: 12 × (96 ÷ 72) = 16 px — the browser default.
To picas: 12 ÷ 12 = 1 pica exactly.
Check a heading at 24 pt: 32 px, 8.47 mm, 2 picas.
In em terms, 24 pt against a 16 px base is 2em — which scales if the user changes their base size.

Result12 pt = 4.23 mm = 16 CSS px = 1 pica

The 12 pt / 16 px equivalence is worth remembering because it links print and web conventions exactly. Setting font sizes in px rather than em or rem prevents text from scaling when a user increases their browser's default size, which is a genuine accessibility failure.

Typography Conversion FAQ

How many pixels is 12pt? ▾

12pt = 16px in CSS. The relationship is 1pt = 1/72 inch and 1 inch = 96px, so 1pt = 96 ÷ 72 = 1.3333px. Therefore 12pt × 1.3333 = 16px. This is also exactly 1 pica and, at the default 16px base, exactly 1rem. That's why 12pt print body text and 16px web body text look similar in size.

How do I convert px to rem? ▾

Divide the pixel value by the root font size (default 16). So 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem, 32px ÷ 16 = 2rem. If your site sets a different root font-size, change the "Base font size" field above to match, and the em/rem results update accordingly. Going back: multiply rem by the base, so 1.25rem × 16 = 20px.

What is the difference between em and rem? ▾

rem is always relative to the root (<html>) font size, so 1rem = 16px regardless of nesting. em is relative to the current element's font size, so it compounds: an element at 1.2em inside another 1.2em element ends up at 1.44× the grandparent size. For predictable font sizing, use rem. Use em when you want a value (like padding) to scale with the element's own text.

Is 1px always the same physical size? ▾

In CSS, 1px is a reference pixel defined as 1/96 of an inch, not necessarily one physical screen dot. On high-density (Retina) displays, one CSS px maps to multiple physical pixels, but the apparent size stays consistent. This converter uses the CSS reference (1in = 96px), which is what browsers use for layout — so the results match what you'll see in your stylesheet.

What is a pica and when is it used? ▾

A pica is a print typography unit equal to 12 points = 16px = 1/6 inch. Picas are traditionally used to measure column widths, margins, and layout dimensions in print design, while points measure font sizes. There are 6 picas in an inch and 72 points in an inch. Modern web design rarely uses picas, but they're still standard in newspaper, magazine, and book layout.