Typography Converter

Typography is the art and technique of arranging type: choosing typefaces, setting sizes, adjusting line height, and controlling spacing so text is legible and visually balanced. Every headline, paragraph, and button label on the web depends on typographic decisions — even when the font itself is a system default.

This typography converter handles the measurement side of that work. Enter a value in pixels and instantly see equivalents in rem, em, points, picas, inches, millimeters, and percent — the units designers and CSS authors juggle daily. It does not replace a typeface library; it answers "what is 18px in rem?" so your stylesheet stays consistent across breakpoints and accessibility settings.

Search intent splits three ways. A typography text generator or online typography text generator often means a tool that outputs decorative Unicode characters, stacked social-media fonts, or preview text in fancy styles. A typography font generator may suggest AI pairing tools or Google Fonts browsers.

This page is a unit converter for typographic measurements — px ↔ pt ↔ rem ↔ em — not a glyph swapper. That distinction matters: when you pick a cursive or handwriting face in CSS, you still set font-size: 1.125rem or 18px. Use the calculator above for that math; use a font catalog or design app to choose the actual typeface.

If you landed here looking for an online typography text generator that rewrites letters into bold or script Unicode, try a dedicated fancy-text tool instead. If you need precise CSS sizing for any font — serif, sans, mono, script — you are in the right place.

Web typography runs on relative and absolute units:

• px (pixels): CSS reference pixels; 1px is 1/96 of an inch at the standard 96 DPI mapping.
• rem: Relative to the root html font size (browser default 16px). Scales when users change root size — preferred for accessible layouts.
• em: Relative to the parent element's font size. Nested components compound — useful for buttons inside scaled headings.
• pt (points): Print tradition: 72 pt = 1 inch in CSS. 1 px = 0.75 pt at the 96 DPI reference.

Example at 16px root: 24px = 1.5rem = 18pt = 150%. Change the root field above if your design system uses 10px or 62.5% tricks.

Cursive typography uses connected, flowing letterforms — think formal scripts, wedding invitations, or brand marks with swashes. Cursive faces (e.g. Brush Script, Pacifico, Dancing Script) often need larger body sizes than neutral sans-serifs because thin strokes and loops disappear below ~16px on screens.

When setting font-family to a cursive stack, convert your design spec with this tool: a comp labeled 22pt becomes 29.33px (22 ÷ 0.75), then 1.833rem at a 16px root. Script capitals with ascenders may need extra line-height — typographic sizing is only the first step.

Cursive is decorative; reserve it for short headlines or accents. Long paragraphs in script type fail readability tests — pair cursive display type with a plain body face sized in rem.

Handwriting typography mimics pen or marker strokes — looser than formal cursive, common in notes apps, education sites, and informal brands. Fonts like Caveat, Indie Flower, or Patrick Hand read as personal but still require explicit typographic spacing: size, line-height, and letter-spacing.

Handwriting fonts vary wildly in x-height. A 16px setting in one face may look tiny in another. Designers often spec handwriting headlines at 24–32px (1.5–2rem) while keeping body copy at 1rem in a neutral sans. Use the parent-size field when converting nested em values inside a scaled heading block.

Neither cursive nor handwriting typography changes the conversion formulas — px, rem, and pt math stays identical. The difference is optical: always preview script sizes in context, not from numbers alone.

A coherent typographic scale uses consistent ratios. A common modular scale from 16px root:

• Caption / small: 12px — 0.75rem — 9pt
• Body: 16px — 1rem — 12pt
• H3: 20px — 1.25rem — 15pt
• H2: 24px — 1.5rem — 18pt
• H1: 32px — 2rem — 24pt

Building design tokens? Convert once here, paste rem into CSS custom properties, and every component inherits the same rhythm. Percent output (relative to root) helps when migrating legacy stylesheets that used font-size: 87.5% on body.

CSS defines 1 inch = 96 px = 72 pt. Physical print DPI (150, 300) is separate — a 12pt Word font does not automatically equal 12pt in browser CSS. The DPI field above converts px to inches and millimeters using your chosen reference (default 96 for screen CSS).

rem = px ÷ rootFontSize · em = px ÷ parentFontSize · pt = px × 0.75 · pc = px × 0.0625

Picas (pc) appear in editorial and InDesign workflows: 1 pica = 12 points = 16px in CSS terms. If a print spec says 11pt body, that is 14.67px — enter 14.67 in the px field to see rem equivalents for your web companion page.

Start designs in rem, not px, when accessibility matters — users who bump browser text size should see your layout grow predictably. Keep px for hairline borders and shadows where sub-pixel precision helps.

When handing off from Figma or Sketch, note whether the file uses px or pt. Convert every text style through this typography converter before writing Tailwind classes or CSS modules. For script or handwriting display type, add 2–4px (0.125–0.25rem) over the sans equivalent after conversion — optical adjustment beats raw parity.

All calculations run locally in your browser; no font names or project values leave your device.