Type Scale
Engineering utility tokens for reusable font-sizes
Overview
We noticed a pattern of particular sizes being reused across text styles at lower "body" sizes, and added corresponding tokens for ease of development.
These are defined in integral-tokens/tokens/type-scale.json.
These sizes are not the entirety of the font-sizes that may be used by Product Design, but represent a distinct typographic scale.
The sizes above are the actual pixel value product design uses. In code, this numbers will be appears a rem values, where 1rem is equal 10px.
Aside from these, heading text utility styles use three distinct scales, one for each screen type: desktop, tablet, and mobile. Due to the uniqueness of these scales as three distinct typographic scales, we decided not to include them in type scale tokens.