🔤

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.

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.