Typography Units: Points, Pixels, Ems, and Picas

Introduction

Typography units span five centuries of design practice. The point and pica emerged from the constraints of physical typesetting with lead type. Pixels were born from cathode ray tubes. Ems have roots in early printing but took on new meaning in CSS. Today, a designer might work with all of these in a single afternoon — specifying a print layout in points, a web stylesheet in rems, and optimizing for screen resolution in pixels per inch.

Understanding these units — where they come from, how they convert, and when to use each — prevents costly mistakes in print production and helps you write CSS that scales gracefully across device sizes.

The Print Units: Points and Picas

The Point (pt)

The point is the fundamental unit of typographic measurement, with roots in 18th-century French printing. The problem historically was that there was no universal standard — different countries and type foundries used different point sizes.

In the 20th century, two main standards emerged:

• Anglo-American point: 1 pt = 1/72.27 inch = 0.3528 mm (traditional, used in physical typesetting)
• DTP point (desktop publishing): 1 pt = 1/72 inch = 0.3528 mm (rounded, used by PostScript, macOS, Adobe software)

The DTP point — exactly 1/72 of an inch — became universal when PostScript was introduced by Adobe in 1985. Today, when anyone says "point" in a design context, they mean the DTP point:

1 pt = 1/72 inch = 0.3528 mm 72 pt = 1 inch = 25.4 mm

Points are the standard unit for specifying font sizes in print design, CSS print stylesheets, Microsoft Word, and PDF documents.

The Pica (pc)

The pica is a larger print unit:

1 pica = 12 points = 1/6 inch = 4.233 mm 6 picas = 1 inch = 72 points

Picas are used to measure column widths, margins, and layout dimensions in print design. A standard newspaper column might be 14 picas wide. A magazine gutter might be 1 pica. InDesign and QuarkXPress both support picas as a primary measurement unit.

In CSS, the pc unit is defined as exactly 12 CSS points, making it consistent with the DTP standard.

The Twip

A twip (twentieth of a point) is 1/20 of a point = 1/1440 of an inch = 0.01764 mm. Twips appear in Microsoft Office file formats (DOCX, RTF) for internal measurements, and in legacy Windows GDI programming. You rarely encounter them unless working with Office automation or legacy printing APIs.

1 twip = 1/20 pt 1440 twips = 1 inch

Screen Units: Pixels

The CSS Pixel vs. the Device Pixel

In web design, "pixel" refers to the CSS pixel (also called a reference pixel or logical pixel), not a physical device pixel. The CSS pixel is defined by the W3C as the visual angle of one pixel on a device held at arm's length — approximately 0.0213° or about 1/96 of an inch at typical viewing distance.

1 CSS px = 1/96 inch = 0.2646 mm 96 px = 1 inch 1 pt = 1.333 px (because 1 pt = 1/72 inch, 1 px = 1/96 inch; ratio = 96/72 = 4/3)

This means the relationship between points and CSS pixels is fixed:

1 pt = 4/3 px ≈ 1.333 px 1 px = 3/4 pt = 0.75 pt

Device Pixels and Device Pixel Ratio

Modern high-density (Retina, HiDPI) screens pack more physical pixels per CSS pixel. Apple's Retina displays typically have a device pixel ratio (DPR) of 2 on MacBooks and 3 on iPhones. This means:

• A CSS width: 100px element occupies 100 CSS pixels but is rendered with 200 physical pixels on a 2× display.
• An icon specified as 1× = 32px gets a 64px physical rendering on Retina.

This is why web images require @2x and @3x versions, why SVG (resolution-independent vector) is preferred for icons, and why width and height in <img> tags refer to CSS pixels, not device pixels.

CSS Units: Absolute vs. Relative

CSS offers both absolute and relative length units. Understanding which to use in which context is fundamental to scalable design.

Absolute CSS Units

Absolute units have a fixed physical or logical meaning:

Use px for screen layouts, pt for print stylesheets, mm/cm/in for print dimensions where physical size matters.

Relative CSS Units: em and rem

The em and rem units are relative — they change based on font size context, making them powerful for accessible, scalable design.

em is relative to the font size of the current element:

p {
  font-size: 16px;
  padding: 1em; /* = 16px */
}
p span {
  font-size: 0.875em; /* = 14px (0.875 × 16) */
  margin: 1em;        /* = 14px (relative to THIS element's font-size) */
}

The em unit compounds through nested elements, which can cause "em cascade" problems — a deeply nested element with font-size: 0.8em inside three levels of 0.8em has an effective size of 0.8³ = 0.512 of the root size.

rem (root em) solves this by always being relative to the root (<html>) font size:

html {
  font-size: 16px; /* sets the root */
}
p {
  font-size: 1rem;     /* = 16px always */
  padding: 1.5rem;     /* = 24px always */
}
p span {
  font-size: 0.875rem; /* = 14px, regardless of nesting */
}

When to Use em vs. rem

Viewport Units

• vw: 1% of the viewport width. font-size: 5vw scales text with the browser window.
• vh: 1% of the viewport height.
• vmin/vmax: 1% of the smaller/larger viewport dimension.
• svh/dvh/lvh: Small/dynamic/large viewport height (handles mobile browser chrome).

DPI and PPI: Resolution for Print and Screen

DPI (dots per inch) is a print term for how many ink dots a printer places per inch. PPI (pixels per inch) is the equivalent measure for screens — how many physical pixels fit in one inch of display.

Print Resolution

• 72 DPI: Historical screen resolution (Macintosh 1984), still the convention for web images.
• 150 DPI: Minimum acceptable for print. Text may show jagged edges.
• 300 DPI: Standard for quality print (books, magazines, commercial printing).
• 600 DPI: High-quality print (fine art reproduction, detailed technical drawings).
• 1200+ DPI: Laser printers and professional pre-press.

A 6×4-inch print at 300 DPI requires an image of 1,800 × 1,200 pixels minimum.

Screen Resolution

Higher PPI screens require higher-resolution image assets to look sharp. A 32px icon looks fine on an 81 PPI monitor but blurry on a 460 PPI phone if you haven't provided a 96px (3×) version.

Historical Context: From Lead Type to CSS

The em unit has a history worth knowing. In traditional typography, an "em" was the width of the letter "M" — used as the basic unit for typesetting spacing. An em dash (—) is as wide as an em; an en dash (–) is half an em.

When digital typesetting arrived, the em was redefined as equal to the current font size in points. A 12pt font has an em of 12pt. In CSS, this relationship carried over: in a 16px context, 1em = 16px.

The "pica" comes from the Latin word for a type of bird (the magpie), though historians debate the exact etymology. Picas were so important in print layout that the term gave us "pica pole" — a 12-inch ruler marked in picas, used by typesetters to measure column widths and leading.

Font Size Best Practices

For Web/Screen

• Set root font-size at 100% (let the browser honor user preferences, which default to 16px): css html { font-size: 100%; }
• Use rem for font sizes so all text scales proportionally if the user changes their browser's default font size.
• Body text: 1rem (16px default). Minimum accessible size: 0.875rem (14px).
• Mobile body text often benefits from 17–18px for improved readability on small screens.

For Print

• Body text: 10–12pt is standard for books and documents.
• Captions and footnotes: 8–9pt.
• Headlines: 14–36pt depending on hierarchy level.
• Line spacing (leading): 120–145% of font size for optimal readability (14.4–17.4pt for 12pt body text).

The 62.5% Trick (Deprecated Pattern)

A once-popular pattern set html { font-size: 62.5%; } to make 1rem = 10px (convenient math: 1.6rem = 16px). This has fallen out of favor because it overrides user browser settings and forces authors to manually track what 62.5% of different base sizes means. Prefer font-size: 100% on the root.

Quick Conversion Reference

Conclusion

Typography units form two distinct families: the print units (points, picas, twips) measured in fixed physical dimensions, and the screen units (px, em, rem, viewport units) that adapt to output context. The CSS pixel is the bridge between them — defined at 96 per inch to create a logical reference that works across display densities. For accessible, scalable web typography, rem units tied to a 100% root size are the modern best practice. For print work, 12pt body text at 300 DPI remains the reliable standard.

Understanding DPI, PPI, and device pixel ratio prevents the common mistake of providing screen-resolution images for print or full-resolution print assets for web. When you know the units, you know exactly what your design needs at every output.