ui-component-typographylisted

# UI component typography Interface text is scanned and acted on, not read continuously. Different failure modes from body copy, and different rules. ## 1. When to invoke - Typography inside buttons, labels, inputs, nav, tables, badges, tooltips. - Numbers misaligning or jittering in tables or dashboards. - Labels wrapping, truncating, or overflowing. - Dense product UI where vertical space is contested. **Do not** invoke for running prose (`body-text-and-reading`) or editorial layout (`editorial-web-typography`). ## 2. Required context - The **densest** screen the component appears on. - **Longest realistic string** for every label — in every supported language. - Whether text is **user-generated** (unbounded length). - Whether numbers are **compared vertically** (tables, ledgers) or read singly. - Touch vs. pointer, and the minimum touch target. - Whether the platform provides **Dynamic Type / OS text scaling**. ## 3. Invariant principles - **UI text is scanned, not read.** Optimise for recognition speed and unambiguity, not reading comfort over long passages. - **Tabular figures are mandatory wherever numbers align vertically.** Proportional figures have varying widths, so digits won't form columns. Lining + tabular is the combination for tables. (Lupton, Hochuli, Santa Maria) - **`1 l I` and `0 O` must be distinguishable** in any interface showing codes, IDs, quantities, or currency. - **Every label must survive its longest translation.** German and Finnis