Screen faces must stay distinguishable at small sizes
Aliases: hinted text face · small-size type · UI typeface
What it is
A face that looks open and elegant at 48 pixels on a poster, dropped to 14 or 16 pixels of phone body, fills its counters with ink. 1, l, I, 0, O collapse into similar sticks; Han 「口」「日」「目」 merge strokes. A screen typeface still has to open its structure at the target reading size: counters large enough, strokes that stand on the grid, confusion pairs that keep a grip. Choosing type from a display specimen is not choosing body.
This is not the same layer as “legibility as a construct.” That asks what it is to tell characters apart. This asks whether this drawing, at this small screen size, can still produce that distinction.
Why it happens
Small sizes hand the drawing to a pixel grid. When a stroke is thinner than a pixel, rasterisation either drops it or fattens it into a blob. Designs with small counters — high contrast, fine serifs, condensed widths — die first at this scale: serifs glue to stems, the apertures of c and e vanish, Han horizontals in a row become one black bar. A small Latin x-height is another silent size drop: less usable detail at the same CSS pixel.
Faces cut for screens usually do three things: raise x-height, open counters, and, at low pixel sizes, hint or instruct key strokes onto whole pixels. Without those, a high-contrast print serif in screen body looks “refined and unreadable.” Chinese also has to be judged on interior white of frequent characters at small size: already dense glyphs (「矗」「鑫」) have more detail than the grid can hold, and a hairline cut turns them into a speck of noise.
Anti-aliasing and greyscale rendering steal contrast again. Light grey thin type on white is fuzzier than the black vectors on the artboard. Specimens have to use the target ground and the target rasteriser, not the outline.
Studying it
Set candidate faces at the product’s body size and run confusion pairs: Latin Il1| O0Q rn m, Han 「口日目、未末、己已巳、土士」。Independents: face, size, weight, background. Dependents: forced-choice accuracy, latency, rated “blur.” Tinker-style print-legibility work compared faces on page-reading speed; small screen sizes also need this confusion matrix, because characters start impersonating each other before speed has obviously dropped.
Do not run the test at display size. Pairs that separate at 48px may have merged at 14. Embed the specimen in real measure and leading; an isolated alphabet overestimates distinguishability.
Where it stops holding
Brand display and marketing numerals can take high-contrast hairline faces; they were never asked to host 14px body. Monospaced code faces put 0O and 1lI first, aesthetics second. Print, e-ink, and projection each have their own grid; a face that passes on a phone may die again on a low-dpi projector. After the user enlarges type, counters that were too tight get a second chance — so “distinguishable at small size” is a gate at the default and minimum rungs, not a gate after enlargement.
Applying it
- When choosing a body face, open the specimen only at the product’s smallest reading size. Do not start from the poster title.
- Screenshot confusion pairs and a real mixed Chinese–English paragraph on the target device. Do not read them on a vector canvas.
- Keep high-contrast serifs, thin Hei, and display scripts out of 14–16px body; they can stay on title rungs.
- Crop
Il1,O0, and 「日目」 at the smallest rung, hide the family name, and ask someone to name each character. Any pair that is misread disqualifies that face as body.