A type system is a set of text roles and rules for typeface, size, weight, line height, and spacing. It gives an interface a consistent and maintainable typographic hierarchy.
A type system is like a shared set of road signs: the same visual patterns mean the same thing wherever a person encounters them.
Define semantic roles
Create roles such as page title, section title, body, caption, and control label. Each role should solve a recurring communication need. Naming roles by purpose makes the system easier to understand than naming them only by arbitrary pixel values.
Set the supporting properties
For each role, decide on typeface, size, weight, line height, and any letter spacing. Consider color separately as part of the theme and contrast system. Keep the number of combinations small enough that contributors can choose the right style without inspecting every component.
Review the system in context
A type scale that looks elegant in a specimen may fail in a dense table, a translated form, or a small-screen dialog. Review real product screens in light and dark themes, at zoom, and with long content. A type system is successful when it supports these contexts without a growing list of exceptions.
Frequently asked questions
Key takeaways
- Define text styles by communication role.
- Keep typeface, size, weight, and line height together as a style.
- Use shared tokens rather than repeated declarations.
- Validate the system in real content and responsive layouts.