Typography Desktop

Typography tokens are predefined values used to maintain consistent text styles across different components within a design project. They provide a standardised system for typography, ensuring uniformity and harmony in font sizes, weights, line heights, and letter spacing.

Display

text-style
token-name
value
class
text-preview
Display Hero Large
--text-display-lg-font-size
font-family: Onest;
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 140%;
letter-spacing: -2%;
.text-display-lg
Building a More Accessible and Efficient Web
Display Hero Medium
--text-display-md-font-size
font-family: Onest;
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 140%;
letter-spacing: -2%;
.text-display-md
Building a More Accessible and Efficient Web

Headings

Heading 1 Large
--text-heading-h1-lg-font-size
font-family: Onest;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: -1%;
.text-heading-h1-lg
Building a More Accessible and Efficient Web
Heading 2 Medium
--text-heading-h2-md-font-size
font-family: Onest;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: -1%;
.text-heading-h2-md
Building a More Accessible and Efficient Web
Heading 3 Small
--text-heading-h3-sm-font-size
font-family: Onest;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: 0;
.text-heading-h3-sm
Building a More Accessible and Efficient Web
Heading 4 Extra Small
--text-heading-h4-xs-font-size
font-family: Onest;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 120%;
letter-spacing: 0;
.text-heading-h4-xs
Building a More Accessible and Efficient Web
Heading 5 2xs
--text-heading-h5-2xs-font-size
font-family: Onest;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 120%;
letter-spacing: 0;
.text-heading-h5-2xs
Building a More Accessible and Efficient Web

Body

Body Large
--text-body-lg-font-size
font-family: Onest;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
.text-body-lg
Building a More Accessible and Efficient Web
Body Large 500
--text-body-lg-500-font-size
font-family: Onest;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
.text-body-lg-500
Building a More Accessible and Efficient Web
Body Medium
--text-body-md-font-size
font-family: Onest;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
.text-body-md
Building a More Accessible and Efficient Web
Body Medium 500
--text-body-md-500-font-size
font-family: Onest;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
.text-body-md-500
Building a More Accessible and Efficient Web
Body Small
--text-body-sm-font-size
font-family: Onest;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0;
.text-body-sm
Building a More Accessible and Efficient Web
Body Small 500
--text-body-sm-500-font-size
font-family: Onest;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0;
.text-body-sm-500
Building a More Accessible and Efficient Web

Caption

Caption Medium
--text-caption-md-font-size
font-family: Onest;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: 0;
.text-caption-md
Building a More Accessible and Efficient Web
Caption Medium 500
--text-caption-md-500-font-size
font-family: Onest;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 130%;
letter-spacing: 0;
.text-caption-md-500
Building a More Accessible and Efficient Web
Caption Small
--text-caption-sm-font-size
font-family: Onest;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: 0;
.text-caption-sm
Building a More Accessible and Efficient Web