Typography Systems for Product Interfaces
By Mykhailo Boichuk · Co-founder & Vice-President
In short
A typographic system for an interface is a small, consistent set of text styles built on a deliberate scale, with line length, line height, and spacing chosen for readability. The aim is a limited number of reusable roles rather than ad hoc sizes, so that text is legible, hierarchy is clear, and the system stays maintainable as the product grows.
A system, not a collection of sizes
Typography in software fails most often not because of a poor typeface but because of inconsistency. When every screen invents its own sizes and weights, the result is visual noise and a hierarchy the user cannot read. A typographic system replaces these one-off choices with a small set of named roles, such as page title, section heading, body, and caption, each defined once and reused everywhere.
The benefit is twofold. The interface becomes more legible because hierarchy is consistent, and the codebase becomes more maintainable because changing a role updates every place it is used.
Build on a scale
The sizes in the system should relate to one another by a deliberate ratio rather than being chosen arbitrarily. A modular scale, where each step multiplies the previous by a fixed ratio, produces sizes that feel harmonious and clearly distinct, which is what makes hierarchy readable at a glance.
- Pick a base size for body text and derive the rest from a consistent ratio.
- Keep the number of distinct sizes small; a handful of roles covers most interfaces.
- Use weight and color, not only size, to express hierarchy.
Readability fundamentals
A few measurable factors govern whether running text is comfortable to read. Line length matters: lines that are too long make it hard to find the start of the next line, and lines that are too short break the reading rhythm. Line height needs enough room for the eye to track between lines. And contrast must be sufficient for the text to be read at all.
Respect the platform and the user
Interface typography lives inside a platform with its own conventions and accessibility settings, and a good system works with them. On Apple platforms the system typeface and the Dynamic Type mechanism let text scale to the user’s preferred size, and a system that hard-codes pixel sizes breaks that accommodation.
Designing the typographic roles to respond to the user’s text-size preference means the same hierarchy holds whether the user reads at the default size or a much larger one. The system should express relationships between styles, so that scaling one scales all of them coherently, rather than fixing every size in place.
Key takeaways
- Define a small set of named text roles and reuse them instead of ad hoc sizes.
- Build sizes on a deliberate modular scale so hierarchy reads clearly.
- Use weight and color in addition to size to express hierarchy.
- Choose line length, line height, and contrast for reading comfort.
- Respect platform typography and the user’s text-size preferences so the system scales coherently.
Frequently asked questions
- What is a typographic scale?
- A set of text sizes related by a consistent ratio rather than chosen arbitrarily, which produces sizes that feel harmonious and make hierarchy easy to read.
- What is a good line length for body text?
- Roughly 50 to 75 characters is a commonly cited comfortable range. It is a guideline rather than a strict rule, but lines far outside it tend to reduce reading comfort.
- Why use named text roles instead of fixed sizes?
- Named roles such as title, heading, and body keep hierarchy consistent across screens and make the system maintainable, since changing a role updates every place it is used.
References
About the author
Mykhailo Boichuk
Co-founder & Vice-President
Mykhailo is an engineer who builds native applications and the systems behind them. He concentrates on macOS and iOS performance, local-first data architecture, and the synchronization problems that come with offline-capable software.