What Does Typography System Consist Of?
Odd Questions on Design and Typography
Sometimes asking an oddly obvious question helps clarify things for me. Here is one: What does typography system consist of?
Typography system consists of typography and system. Let’s start with typography.
Point Type is defined by these following characteristics:
font family
font weight
font style (roman or italic)
letter case (UPPERCASE, lowercase, Capital Case, Sentence case, “small cap”)
font size
color
letter space (also called tracking)
Area Type is defined by above characteristics plus:
line space (defined line height)
line length (paragraph width)
When setting type, eventually typographers have to and will make decisions on all of these characteristics above. However, typography system does NOT need to define each of these characteristics to be exact numbers. “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications,” says Marco Suarez, a design system expert. To accommodate “any number of applications”, there must be room reserved for the typographers to make decisions based on the scenario.
A typical design system should define exactly on:
font family
font weight
font style
letter case
letter space
line space
And give a recommended range on:
font size — provide a typographic scale
color — provide a text color palette
Line length is something designer should always pay attention to on their own based on typography best practices.
The system is the guideline that documents where and how to use the styles. Providing a pool of typography styles without such guidance creates infinite ways to misuse these styles. Design system is not just a pile of reusable components and styles. The documentation of guidelines is what separates design systems from pattern libraries.
Most design systems have a separate section for Color outside of Typography system; therefore color is not specified for Typography, giving design system users the impression that they are free to pick any color from Color section’s palate to apply on the text. However, it is in my opinion important to bind text styles with color recommendations, because color is essential to typography and sometimes crucial to the success of typography.
When text is set in different color themes, for example, light theme vs. dark theme, the same font weight could look completely different. Text looks much heavier when setting in light color on dark background. In this case, a lighter weight is needed for the dark theme of the design system. Text color also needs to maintain a certain level of contrast compared to the background color. The color palette included colors for all elements such as background and graphics. Not all of them is suitable for text color. Typography section should include color palettes and guidelines for text.
