Type in product design plays a crucial role in establishing hierarchy and legibility.
Tokens
64/102
64/102
64/102
64/102
64/102
56/90
56/90
56/90
56/90
56/90
48/77
48/77
48/77
48/77
48/77
40/64
40/64
40/64
40/64
40/64
2xl/black
28/45
2xl/extrabold
28/45
2xl/bold
28/45
2xl/medium
28/45
2xl/regular
28/45
xl/black
24/38
xl/extrabold
24/38
xl/bold
24/38
xl/medium
24/38
xl/regular
24/38
lg/black
20/32
lg/extrabold
20/32
lg/bold
20/32
lg/medium
20/32
lg/regular
20/32
base/black
16/26
base/extrabold
16/26
base/bold
16/26
base/medium
16/26
base/regular
16/26
sm/black
14/22
sm/extrabold
14/22
sm/bold
14/22
sm/medium
14/22
sm/regular
14/22
xs/black
12/19
xs/extrabold
12/19
xs/bold
12/19
xs/medium
12/19
xs/regular
12/19
2xs/black
10/14
2xs/extrabold
10/14
2xs/bold
10/14
2xs/medium
10/14
2xs/regular
10/14
We currently handoff our tyles using Tokens Studio, which generates tokens for fontFamily, fontWeight, lineHeight, fontSize, letterSpacing, paragraphSpacing, paragraphIndent, textCase and textDecoration. This allows us maximal control and flexibility. For instance, we are able to swap an entire font family from a single token, which can be pushed across all Figma files on one side, and to Github on the code size where the developer accepts the change across all code files in the products. It's true end-to-end synchronicity.
Here's an example of the 6xl/black token in code, referencing the other tokens it inherits from.
There are other great tools out there offering a similar thing such as Specify, but at the time of building, Tokens Studio was the best tool for our tech stack – a mobile app in Flutter and a web app in React.