Tokens
Typography

Typography

Trunk’s Typography uses Inter (opens in a new tab), a readily-available typeface that appears stylistically similar to many default system fonts.

You’ll typically set typography with the TrunkTypography component.

Heading1
3.75rem
The Quick Brown Fox
Heading2
2.25rem
The Quick Brown Fox
Heading3
1.375rem
The Quick Brown Fox
Heading4
1.375rem
The Quick Brown Fox
Heading5
1.125rem
The Quick Brown Fox
CoreUI1
0.9375rem
The Quick Brown Fox
CoreUI2
0.875rem
The Quick Brown Fox
CoreUI3
0.8125rem
The Quick Brown Fox
CoreUI4
0.75rem
The Quick Brown Fox
CoreUI5
0.6875rem
The Quick Brown Fox
VerySmall1
0.5rem
The Quick Brown Fox
VerySmall2
0.375rem
The Quick Brown Fox

Further Reading