UI Coach guide
Typography for UI Design
UI typography that people can scan: scale, line length, weight, and the difference between product type and poster type.
By UI Coach Editorial ·
Product typography is a readability system. It is not a place to prove you found an interesting display face. The type has to survive dense tables, small labels, and long numbers.
Build a short scale
A handful of sizes used consistently beats a unique size on every card. Map sizes to roles: page title, section title, body, label, caption, number. If two roles look the same, merge them.
Line length and line height
Body text that spans the full desktop width is tiring. Product UI often uses shorter measures in reading regions and tighter measures in tables. Line height should match size. Tiny type with tight leading becomes a texture, not language.
Weight carries hierarchy
If everything is medium, nothing is. Reserve heavy weights for a few roles. Do not bold entire paragraphs to make them important. That is a content problem.
Licensing and performance
A UI font that cannot be licensed for the product is a dead end. Variable fonts can reduce files if you actually subset them. Pairing for a landing page is not the same problem as a 12px table in an app.
Practice this on UI Coach
Use font pairings from Inspiration as a starting point, then apply them to a challenge screen with real data. If the pairing only works at 64px, it is not a product pairing.
Sources
- Nielsen Norman Group on typography in UI