Why 10pt is fine in print and terrible on screen

The resolution gap

A commercial press lays ink at something like 2,400 dots per inch. A standard-density screen has 96 pixels per inch, and a high-density phone has the equivalent of two or three hundred.

So a 10-point letter in print is built from hundreds of dots in each direction and can carry fine serifs, hairline strokes and delicate curves. The same letter at 10 pixels on a 1x screen has about ten pixels of total height, of which perhaps five are the x-height. There is no room for a hairline. There is barely room for a stem and a counter.

That is the whole reason screen minimums are larger than print minimums, and it is why advice imported from print typography — 9pt captions, high-contrast faces, tight leading — produces unreadable web pages.

Working minimums: 16px for body text on screen, 12px absolute floor for anything, against 9 to 10pt comfortably readable in print and 7pt as the floor for legal small print.

The iOS zoom trap

A concrete consequence that catches people constantly. On iOS, Safari automatically zooms the page when a user taps into a form input whose font size is below 16px. The layout jumps, the user loses their place, and zooming back out is manual.

The fix is to set inputs at 16px or larger. Not a rounding error — exactly 16 or above:

input, select, textarea { font-size: 16px; }

This single rule removes an irritation that appears on a large share of forms on the web.

Hinting and antialiasing

Hinting is a set of instructions inside the font telling the rasteriser how to snap stems onto the pixel grid at small sizes, so that two stems that should be the same width do not end up one pixel and two. It mattered enormously at 96dpi. At device pixel ratios of 2 and 3 it matters much less, because there are enough pixels that a slight misalignment is invisible.

Antialiasing fills the edge pixels with intermediate values so curves do not look like staircases. Two kinds exist: greyscale, and subpixel, which uses the separate red, green and blue elements within each pixel to gain three times the horizontal resolution. Subpixel rendering produced visibly sharper text at 1x and produced colour fringing if the screen's subpixel order differed or the screen was rotated. Apple removed subpixel antialiasing from macOS in Mojave, because high-density displays made it unnecessary.

One practical note. The declaration -webkit-font-smoothing: antialiased is widely copied into stylesheets as a fix. What it actually does on macOS is force greyscale antialiasing, which makes text visibly thinner than the default. On a light background that often looks worse, not better. On a dark background it partly offsets the halation thickening from the colour block, which is sometimes a genuine reason to use it — but apply it knowing that it is a weight change, not a sharpening.

What you cannot control

A longer list than most designers expect:

• The operating system's rendering engine, which differs between Windows, macOS, Android and Linux.
• Whether the user has increased their default font size, which they are entitled to do and which your layout must survive.
• Browser zoom level.
• Screen density and subpixel arrangement.
• Whether a web font loaded at all, and what the fallback did to the layout while it did not.

The design conclusion is to build with margin rather than with precision. A layout that only works at exactly 16px with exactly one typeface at exactly 100% zoom is a layout that breaks for a substantial number of real readers.

The font loading moment

One last screen-specific concern. While a web font downloads, the browser shows either nothing or the fallback face. font-display: swap shows the fallback immediately and swaps when the font arrives, which is almost always the right choice — invisible text is worse than text that changes.

The swap produces a visible reflow if the fallback has different metrics, and that jump is exactly what size-adjust and font-size-adjust in an @font-face block exist to reduce. Matching the fallback's x-height to the web font's makes the swap nearly invisible, which is the x-height arithmetic from the type block doing practical work.