How to give name while creating Typography in Design Systems?

Question

How to give name while creating Typography in Design Systems?

which of the following is most common when naming typography?


1. System default typography naming. (or)
2. Create your own set of naming.


While going with the system default, that time we need 2 to 4(Android, iOS, PC, etc…) sets of different naming in our design system, and hard for the development team to handle.



If you use the second option, it seems you'd run into cases where platform-related rules don't fit. But we can use a common name inside of our design system and easy to handle for a development team.



Suggest how to set a common name in Typography in Design Systems.

Like in web H1 H2... in iOS HUGETITLE, TITLE1, TITLE2... in android DISPLAY1, DISPLAY2.... As we have different names in different platform, I thought to unify in design system for easy understanding purposes

Answer 1

This would depend on how the design system has been structured to support your current products and services. You'll need to work out what the various hierarchy is when it comes to font variations (e.g. web/native apps, device and screen size/resolution, content structure, UI components). Look at Apple and Google for examples of how they do this within their design systems.

The best naming scheme is one that can be applied logically, consistently and extensible. If it is logical then it can be applied consistently, and if it is applied consistently then it will be extensible.

Having said that, you don't want to manage a very complex set of fonts and its variations because it would become difficult to apply them consistently in the interface. Define contexts that can be used to create combinations that cover most of the frequent use cases, and document where there might be some exceptions or be prepared to stick to the rules.