Member-only story
How to create typography guidelines for a product that does not follow a design system
Improve design consistency and efficiency by overcoming typography chaos

When product designers are working on a product that doesn’t have a design system, they can find that the system is chaotic. You can see it in the interface (there is a lack of consistency in the app). Another issue is that it makes the design process more challenging since there are no clear guidelines.
As a result, the designer finds it difficult to understand how to make decisions. Say you want to design a card with a title and subtitle and need a clear typographic hierarchy, but the system has many typography font sizes from 10 to 28. ( 11,12,13,14,15,16,17,18… all the way up to 28px).
How do you pick a font size that’s harmonious with other components?
If this is the case, you can push the product team to build a clear design system so you can work more effectively.
The first step, in my opinion, is to create a typography system since that’s not the most difficult phase. Building the component system (buttons, checkboxes, etc.) can be more challenging because it includes more logic. You can start with typography and then build a clear process and confidence to continue…