The type scale includes a range of contrasting type-sizes that support the needs of our product and content. Aiming to simplify and unify our product surfaces, we have one consistent type scale that is optimized to provide the best legibility across all screen sizes. The type scale follows t-shirt sizing for a clear and applicable naming structure that does not limit or confuse application.
A single variant is shorthand for a set of typography-specific tokens (font-size, line-height, letter-spacing).
{ "xxxl": { "fontSize": "102px", "lineHeight": "108px", "letterSpacing": "-0.01em" }, "xxl": { "fontSize": "60px", "lineHeight": "70px", "letterSpacing": "-0.01em" }, "xl": { "fontSize": "40px", "lineHeight": "48px", "letterSpacing": "-0.01em" }, "lg": { "fontSize": "26px", "lineHeight": "40px", "letterSpacing": "-0.01em" }, "lg-display": { "fontSize": "26px", "lineHeight": "32px", "letterSpacing": "-0.01em" }, "md": { "fontSize": "20px", "lineHeight": "32px" }, "sm": { "fontSize": "16px", "lineHeight": "26px" }, "sm-display": { "fontSize": "16px", "lineHeight": "20px" }, "xs": { "fontSize": "13px", "lineHeight": "20px" }, "bq": { "fontSize": "50px", "lineHeight": "60px", "letterSpacing": "-0.01em" } }