Typography in UI
Interface text — labels, captions, buttons, helper text — operates at a different scale and register than body text. It must communicate function, not just meaning.
Interfaces are not documents. The typography that governs a long-form article is not the same typography that governs a form, a dashboard, or a navigation bar. UI typography must communicate function — what is this element, what does it do, what does the user need to know to act — often in very few characters at very small sizes. The editorial register of body typography does not apply.
The registers of UI text
A single interface typically contains several distinct text registers: labels (naming form fields, buttons, navigation items), body or description text (explaining what something does), helper or error text (providing contextual feedback), captions and metadata (supporting information at reduced emphasis), and code or data (content requiring monospace for horizontal alignment or technical signal).
Each register has different requirements. Labels must be identifiable at a glance and read at small sizes with high clarity. Body text within an interface can use the same principles as editorial body text. Helper text must communicate clearly at small sizes and often at reduced contrast — which creates an accessibility tension that must be managed carefully. Code requires a monospace typeface to preserve alignment.
Sizing for UI components
UI text often operates at sizes below body text: 12px and 13px labels, 11px captions. At these sizes, the reading experience changes. Tracking should not be adjusted unless the typeface is demonstrably struggling. Contrast must be higher than at larger sizes because letterforms are smaller and less distinct. Line height should remain proportional.
The temptation at small sizes is to reduce line height to save space. Resist this. A label with 1.5 line height and two lines reads better than the same label with 1.2 line height, even though the difference in pixel height is small. Compressed text at small sizes is difficult to parse quickly, which defeats the purpose of a UI label.
The density problem
Interface typography frequently faces a density constraint: more information must fit in less space than editorial typography allows. The response to this constraint should be typographic precision — using the scale, hierarchy, and spacing correctly — not visual compression. Tight tracking, minimal leading, and reduced font sizes pushed below comfortable thresholds all make the interface feel smaller but harder to use.
The correct response to density is hierarchy. Not all information has equal priority. What does the user need first? What can be secondary? What can be hidden until needed? Hierarchy solves density better than compression. See Display Type for the opposite problem — where large scale requires different adjustments — and Accessible and Responsive Type for the accessibility implications of small UI type.