Typography Converters — px, pt, em, rem
Last updated:
Typography conversions span four dominant units that together cover every modern web-and-print typography context: pixels (px) for screen-and-web typography, points (pt) for print-typography, and em-and-rem for relative scaling in CSS. The pixel (px) is the universal modern web-typography base unit, defined under CSS specifications as the CSS reference pixel — a logical unit nominally equal to 1/96 inch at the reference viewing distance, scaled by device-pixel-ratio for high-DPI ("Retina") displays. The point (pt) is the universal modern print-typography unit, defined as exactly 1/72 inch under PostScript-and-CSS conventions since the 1984 Adobe PostScript specification. The em is a cascading-relative-to-current-font-size CSS unit, with 1 em equal to the computed font-size of the current element (typically 16 px under the 16-px-default browser convention). The rem (root em) is an absolute-relative-to-root-font-size CSS unit, with 1 rem equal to the computed font-size of the root html element (universally 16 px under the 16-px-default browser convention). All conversions assume the 96-dpi web convention (1 inch = 96 px = 72 pt) and the 16-px-default browser font-size for em-and-rem references — these are the universal modern conventions, but can be overridden by user accessibility settings or page-specific CSS reset rules. Typography conversion runs constantly in cross-medium design work where digital web-pixel source assets must be specified in print-points for layout, and in CSS-design-system work where pixel-based design tokens must be expressed in rem-based scales for accessibility-zoom adaptation.
Units in this category
Pixels (px)
In modern web typography under CSS specifications, the pixel (px) is the CSS reference pixel — a logical unit nominally equal to 1/96 inch (about 0.2646 mm) at the CSS reference viewing distance. The unit scales by device-pixel-ratio for high-DPI displays: a "Retina" display with 2x device-pixel-ratio renders one CSS pixel as a 2×2 grid of physical hardware pixels, preserving the visual size while doubling the rendering resolution. The CSS pixel relationship to other typography units is fixed under the 96-dpi convention: 1 inch = 96 px, 1 cm = 37.795 px, 1 mm = 3.7795 px, 1 pt = 4/3 px ≈ 1.3333 px, 1 pc = 16 px (with the pica equal to 12 points).
Points (pt)
The typographic point (pt) is defined under modern PostScript-and-CSS conventions as exactly 1/72 inch (0.352777778 mm). The relationship is fixed by the 1984 Adobe PostScript specification and preserved in modern CSS, PDF, and print-design conventions. The pica is 12 points (1 pc = 12 pt = 1/6 inch ≈ 4.233 mm).
Em (em)
In modern CSS the em (em) is a relative-typography unit equal to the computed font-size of the current element. Under the standard 16-px-default browser font-size on the html-and-body root elements, 1 em = 16 px in the document body context. But the unit is element-relative: a child element with font-size: 14px has 1 em equal to 14 px in that element's context, with em-units in nested padding-margin-line-height specifications scaling relative to that 14 px.
Rem (rem)
In modern CSS the rem (rem) is an absolute-relative typography unit equal to the computed font-size of the root html element. Under the standard 16-px-default browser font-size, 1 rem = 16 px universally across the document, regardless of nesting depth or local font-size overrides. The unit avoids the cascading-multiplication behaviour of em — a "1 rem" value in a deeply-nested element always equals the same physical size as a "1 rem" value at the root element.
History of typography measurement
Typographic measurement traces from early-modern European printing through twentieth-century PostScript-and-CSS standardisation to modern responsive-and-accessibility-aware web typography. The first formal typographic point system was Pierre Simon Fournier's 1737 Manuel typographique, refined by François-Ambroise Didot in the 1780s into the Didot point (~0.376 mm) that became the European typographic standard. The Anglo-American or "pica point" emerged in the late 1800s at exactly 1/72.27 inch, surviving through the early-twentieth-century Anglo-American printing era. The 1984 Adobe PostScript specification formalised the modern DTP point at exactly 1/72 inch (0.352778 mm) for cleaner integer-fraction relationships, and this point has become the universal modern typographic point under CSS, PDF, and Adobe-product conventions. The CSS pixel emerged in 1996 with CSS1, with the CSS reference pixel defined as 1/96 inch under the standard 96-dpi web convention. CSS1 also introduced the cascading-relative em unit (1 em = computed font-size), drawing on the metal-type-printing tradition where one em was the width of the capital "M" in the typeface. CSS3 (around 2010) introduced the absolute-relative rem (root em) unit to support consistent application-wide scaling without cascading multiplication. The em-and-rem-and-px-and-pt quadruplet is the universal modern typography-unit system across web-and-print design work.
Where typography conversions matter
Typography conversions appear across every modern web-and-print-and-mobile-and-email-design context. Web typography globally — CSS font-size, line-height, padding, margin, border-radius, and component-dimension specifications use pixels, em, and rem on every modern web browser. CSS frameworks (Tailwind CSS, Bootstrap 5+, Material-UI, Ant Design, Chakra UI, Carbon Design System) use rem extensively for application-wide spacing-and-typography scales, with em used for component-internal proportional scaling. Print-typography globally — every modern print-design pipeline (Adobe InDesign, Illustrator, Photoshop print-layout, QuarkXPress, Affinity Publisher) uses points as the canonical font-size, line-height, leading, letter-spacing, and margin-and-padding unit. Word processors (Microsoft Word, Google Docs, Apple Pages, LibreOffice Writer) use points for font-size specifications, with typical document-body text at 11-12 pt. PDF-typography uses points internally. Mobile-app typography on iOS uses points (which on iOS are implementation-detail-equivalent to CSS pixels at the reference scale) and Android uses density-independent-pixels (dp/dip) which are similarly reference-scaled. Email-template typography uses pixels for cross-client compatibility (Outlook, Gmail, Apple Mail), with occasional pt-based specifications for Outlook's Word-rendering-engine quirks. Cross-medium design work routinely converts pixel-based digital-source assets to point-based print-output specifications at the 4/3 factor, and converts pixel-based component specifications to rem-based CSS-design-system tokens at the 1/16 factor under 16-px-default. The conversion runs at every cross-medium design documentation boundary in modern web-and-print design work.
How to convert typography units
Typography-unit conversion runs against the 96-dpi web convention (1 inch = 96 px = 72 pt) and the 16-px-default browser font-size for em-and-rem references. Pixel-and-point conversion: 1 px = 0.75 pt = 3/4 pt exactly, 1 pt = 1.3333 px = 4/3 px exactly, derived from the 96-dpi-versus-72-dpi ratio. Pixel-and-em conversion under 16-px-default: 1 em = 16 px, 1 px = 0.0625 em = 1/16 em. Pixel-and-rem conversion under 16-px-default: 1 rem = 16 px, 1 px = 0.0625 rem. Point-and-em-and-rem follow from the pixel-conversions: 1 em = 12 pt (16 × 3/4), 1 rem = 12 pt, 1 pt = 0.0833 em = 1/12 em, 1 pt = 0.0833 rem. The 96-dpi-and-16-px-default conventions are the universal modern web reference but can be overridden by user accessibility settings (browser-zoom, larger-text accessibility-features) or page-specific CSS reset rules. Designers should verify the assumptions at the conversion boundary and document them explicitly in design-system documentation to avoid ambiguity. The em-versus-rem distinction is critical: em cascades through DOM nesting (multiplying scale at each font-size override), while rem is always relative to the root html font-size regardless of nesting depth.
All typography conversions
Frequently asked questions
How many pixels are in 1 pt?
One typographic point equals 4/3 pixels (1.3333 px) under the standard 96-dpi web convention, derived from 1 inch = 96 px = 72 pt and the 96/72 = 4/3 ratio. The factor is exact under the standard convention. The "1 pt = 1.333 px" reference is universal in modern web-and-print typography conversion, with print-design points-to-screen-pixels conversion running on this factor globally.
How many pixels are in 1 em?
One em equals 16 pixels under the standard 16-px-default browser font-size on the html-and-body root elements, with the relationship 1 em = computed-font-size of the current element. The 16-px-default convention is the universal modern web reference, but the em is element-relative: a child element with font-size: 14px has 1 em = 14 px in that element's context. For application-wide consistent scaling use rem instead of em.
How many pixels are in 1 rem?
One rem equals 16 pixels under the standard 16-px-default browser font-size on the html root element. Unlike em, rem is always absolute-relative-to-root-font-size regardless of DOM nesting depth, providing consistent application-wide scaling. The 16-px-default convention is universal across modern browsers (Chrome, Firefox, Safari, Edge), but can be overridden by user accessibility settings or page-specific CSS reset rules.
What is the difference between em and rem?
Em is cascading-relative-to-current-font-size — 1 em equals the computed font-size of the current element, with nested font-size overrides multiplying scale at each level. Rem is absolute-relative-to-root-font-size — 1 rem always equals the root html font-size regardless of DOM nesting depth. Use rem for application-wide consistent scaling (typography-scales, spacing-scales, breakpoints) and em for component-internal proportional scaling (button-padding, card-padding that should scale with the component's local font-size).
Why is the standard web font-size 16 px?
The 16-px-default browser font-size convention emerged in the early CSS specifications (around 1996 with CSS1) and has been preserved across every major browser (Chrome, Firefox, Safari, Edge) ever since. The 16 px figure was chosen as a comfortable default reading size on typical desktop monitors at the standard reference viewing distance. Users can override the default via browser-zoom or larger-text accessibility-features, which is why rem-based responsive design supports accessibility better than absolute-pixel-based design.
How do I convert print points to web pixels?
Multiply the point figure by 4/3 (1.3333) to get the pixel figure under the standard 96-dpi web convention. A 12 pt print font-size translates to 16 px in CSS reference; a 24 pt print heading translates to 32 px in CSS. The reverse: divide the pixel figure by 4/3 (multiply by 3/4 = 0.75) to get the point figure. The 4/3 factor is exact under the 96-dpi-and-72-dpi convention and is universal in cross-medium web-to-print design work.
How precise should typography conversions be for design work?
For design work the typography conversion factors are exact under the standard conventions (1 pt = 4/3 px exactly under 96-dpi, 1 em = 1 rem = 16 px under 16-px-default), with the precision allowance coming from rounding to integer pixel values for crisp screen rendering. Most design-system documentation rounds to integer pixels (12 px, 14 px, 16 px) rather than fractional values to avoid sub-pixel rendering inconsistencies. Higher-precision applications (PDF-and-print-typography) preserve fractional point values.