A pixel is not a dot: a short history of typographic units

Picture a scene from a design studio. A designer finishes an app mockup: headings are 24 pixels, body text 16. The finished file goes to a print shop, where an impatient typesetter bounces it back, demanding the type size in points and the column width in picas. Overseeing it all is a client who, after a test print, holds an ordinary millimeter ruler up to the paper and concludes that nothing matches expectations.

All three are talking about the same thing — the size of letters and the space on the page — yet they speak entirely different languages. This apparent Tower of Babel is not a failure of standardization but the result of a fascinating evolution spanning the last five centuries. To design text for paper and screens at once, you have to understand where these different measures came from and how to convert between them precisely.

The anatomy of lead: where the point came from

To understand why documents in text editors are set in "points" by default, you have to go back to the age of lead type. Text was assembled from metal blocks — sorts — set by hand in composing sticks.

Designers often equate the physical size of a printed letter with its type size. That is a mistake rooted in the construction of old type. The type size did not describe the height of the letter itself but the height of the metal block (the body) on which the letter was cast. Besides the letter's drawing (the face), the block also had to hold clear space above and below the character, so that the ascenders (as in "b") and descenders (as in "p") of adjacent lines would not collide. As a result, two typefaces of identical type size — say 12 points — can look clearly different in print if one has a taller x-height (the height of lowercase letters) at the cost of smaller spacing.

Before standardization, foundries in Europe and America used their own arbitrary sizes. The first step toward mathematical order came in 1737 from the French engraver Pierre-Simon Fournier, who divided the French foot into points. The idea was refined in 1775 by François-Ambroise Didot, who tied the point directly to the French royal foot (pied de roi), which measured 324.84 mm. One Didot point was defined as 1/72 of a French inch, or ≈ 0.376 mm. This system became the standard across continental Europe, including Poland. In 1879 the German maker Hermann Berthold aligned it precisely to the meter, fixing 1 point at 0.37594 mm.

In parallel, the Anglo-Saxon world developed a system based on the slightly shorter English inch, in which a pica equaled 12 points and an inch held exactly 6 picas. The Anglo-American point was therefore 1/72 of an English inch, or ≈ 0.3515 mm.

The clash of these traditions threatened paralysis at the dawn of desktop publishing (DTP) in the early 1980s. The creators of the PostScript language — the technological backbone of the first Macintoshes and Apple laser printers — cut the knot radically. They discarded the fractional nuances and defined the PostScript point as exactly 1/72 of the international inch (25.4 mm), i.e. ≈ 0.3528 mm. That unit became the global digital standard. When you set a size of "12" in an editor today, you are not using the Didot point but the PostScript point — European tradition traded for the mathematical simplicity of the digital inch.

Of magpies and a Roman orator: where "pica" and "cicero" come from

When a typesetter planned a column width, working in single points was impractical. So collective units were introduced: the pica in the Anglo-Saxon world and the cicero in Europe. Both count exactly 12 points, but — because of the difference between the Didot point and the PostScript point — they have different physical sizes. The historical cicero (12 Didot points) measures about 4.51 mm, while the modern PostScript pica is exactly 1/6 of an inch, or 4.2333 mm. It is this second, digital value that the Polish name "cycero" carries in this site's typography converter: 1 cicero = 1 pica = 12 pt = 16 px = 4.2333 mm.

Both names have a colorful etymology. The Latin pica means "magpie." In fifteenth-century England the word came to denote the Directorium Sacerdotum — a church book of tables for calculating movable feasts. Its pages, densely printed in small type with many red rubrics, reminded readers of the black-and-white, mottled plumage of a magpie. Because these books were set in a type size corresponding to today's 12 points, printers began calling that size "pica."

The name "cicero" points directly to the Roman orator Marcus Tullius Cicero. In 1465 in Mainz, Peter Schöffer and Johann Fust published a printed edition of his treatise De officiis (On Duties), set in an exceptionally legible type whose size matched the later 12 Didot points. The work became so popular across Europe that printers began calling that size a "cicero." The name survived for centuries and was the basis of column planning in Poland until the twilight of hot-metal composition.

The war of standards: 72 versus 96 DPI

Personal computers raised a question: how do you render physical printing units on a screen? The Apple–Microsoft rivalry settled it.

When the Macintosh debuted in 1984, its engineers designed a 9-inch monitor with a resolution of 512 × 342 pixels, giving exactly 72 pixels per inch (PPI). The choice was brilliant in its simplicity: since an inch holds 72 PostScript points, one pixel on the Macintosh screen corresponded to one point on paper (1 pt = 1 px). The designer saw text at 1:1 scale — a line 72 pixels long printed out to exactly one inch.

Microsoft took a different tack with Windows. Early PC monitors had a similar physical density (about 70–75 PPI), but small 10-point office fonts were nearly illegible on them — there were not enough pixels to render the serifs. So Microsoft introduced a logical resolution of 96 DPI, one-third higher than the real one. The system artificially enlarged the interface: a 10 pt font that the Mac drew with 10 pixels got a budget of about 13 pixels in Windows. At the cost of physical fidelity, it gained legibility.

When the W3C drafted the CSS specification for the growing web in the late 1990s, it had to pick one convention — and it adopted Microsoft's. That is how 96 DPI became permanently embedded in the architecture of the internet, with the ratio of the logical inch to the CSS pixel locked at 1:96. This is exactly why 1 inch = 96 px, 1 pt = 4/3 px, and 1 mm = 96/25.4 ≈ 3.7795 px.

A pixel is not a dot on the screen

Many beginners intuitively assume that one pixel in CSS code (1px) corresponds to one physical diode on the panel. It does not. The CSS pixel is an abstract unit, defined by the W3C as the reference pixel.

According to the CSS Values and Units specification, the reference pixel is not a hardware element but an angular measure: the visual angle of one pixel on a device of 96 DPI viewed at arm's length (a nominal 28 inches, about 71 cm, is assumed). That angle is roughly 0.0213°. Under those conditions the physical size of a pixel is about 0.26 mm, i.e. exactly 1/96 of an inch. The key point is that the reference size scales with the typical viewing distance — it shrinks for a phone held close, grows for a TV watched from the couch. That way text at 16 px keeps a similar perceived size on a watch, a phone, a laptop, and a large television.

If browsers mapped CSS pixels directly onto physical diodes at a 1:1 ratio, the high-density-display revolution (Retina, AMOLED) would have destroyed the web's legibility — a 220 PPI screen would show standard 16 px text as a microscopic smudge under two millimeters tall. The solution is the device pixel ratio, DPR — the ratio of physical pixels to logical ones. On a screen with DPR = 2, one CSS pixel is rendered by a 2 × 2 grid, i.e. 4 physical diodes; on flagship phones DPR can be 3, so one code pixel is made of 9 diodes. The CSS pixel guards proportion and legibility; the physical diode is responsible only for edge sharpness.

How important this distinction is shows in the WCAG 2.2 accessibility standards. Success Criterion 1.4.10 (Reflow) requires that content can be enlarged and fit within a width of 320 CSS pixels without horizontal scrolling — the wording refers directly to CSS pixels as units independent of hardware density.

em and rem: flexibility as the foundation of accessibility

Another trap is the belief that 1em always equals 16 px. True, the default font size in most browsers is 16 px — but equating em with a fixed number squanders its greatest strength: relativity.

The em unit comes from metal typography, where it denoted a square whose side equaled the type size (roughly the width of a capital "M"). In CSS, em is a relative unit computed against the current font size of the given element. If a paragraph has font-size: 20px, then for it 1em = 20 px, and margin-bottom: 1.5em yields a 30 px gap. This cascading behavior can be awkward: when a nested list inherits 0.8em from a list at 0.8em, the text shrinks to 0.8 × 0.8 = 0.64 of the base size.

The solution is rem (root em), which always refers to the font size of the document's root element (html). If the root is 16 px, then 1.5rem is always 24 px, regardless of nesting. Designing in relative units is a foundation of accessibility: low-vision users often raise the default font size in their settings (say from 16 to 24 px). A layout built on rem then scales harmoniously — columns, margins, and headings all grow proportionally. Hard pixel values enlarge only the text itself, which starts to overlap neighboring elements and spill out of its containers.

The mathematical bridge: a conversion table

The values below assume the common baseline: a 96 DPI screen and a default root font size of 16 px. This site's typography converter converts between all of these units.

Reading these numbers reveals an elegant bridge between old typesetting and the modern internet: the browser's standard 16 px corresponds exactly to 12 points (one pica), which dominated typesetting for decades. That is how the move from the age of lead to digital design preserved a continuity of proportions.

Three myths under the lens of fact

Myth 1: "A pixel is a physical dot on the screen." False. The CSS pixel is a logical, reference unit defined by the eye's visual angle. On Hi-DPI screens one CSS pixel is rendered by a grid of several physical diodes (2 × 2, even 3 × 3). The CSS pixel guards proportional consistency; the diode guards sharpness.

Myth 2: "The typographic point is the same everywhere." Software unified the point to the PostScript standard (1/72 inch = 0.3528 mm), but the historical Didot point, used for centuries in continental Europe and Poland, has a different size — about 0.376 mm. You still meet it in traditional presses and classic typesetting standards.

Myth 3: "1 em always equals 16 px." 1em is a dynamic unit describing the font size of exactly the element on which it is used. 16 px is merely the browsers' factory default. Change the parent's font size to 24 px, and in that context 1em becomes 24 px.

Every measure has its own world

Understanding these relationships lets you design compositions that hold together on paper and on screen. For physical print (business cards, posters, books), absolute units — points (pt) and millimeters (mm) — remain irreplaceable, because they guarantee full control over the size on paper. In digital projects, relative units — rem and em — take the lead, letting the interface scale to the user's needs, which is a precondition of accessibility. Keep the CSS pixel mainly for thin borders, subtle shadows, and precise integration with bitmap graphics.

Abandoning rigid pixel structures for dynamic scaling is not just a coding convenience. It is a nod toward inclusivity — and a recognition that the designer, the typesetter, and the client were not really speaking different languages. They were talking about the same letter, each simply measuring it with the tool of their era.

Further reading

• Robert Bringhurst, The Elements of Typographic Style — a classic on the historical evolution of type sizes and traditional column proportions.
• Josef Müller-Brockmann, Grid Systems in Graphic Design — a foundational manual on structural grids in print and on screen.
• W3C, CSS Values and Units Module Level 3 & 4 — the official specifications that precisely define how browsers interpret units.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2 — Success Criterion 1.4.10 (Reflow) and the role of CSS pixels in accessibility.