Typography
Creates hierarchies, organizes information, and guides users through a product or experience.
Token
Value
Preview
--sl-font-weight-regular
400
--sl-font-weight-medium
500
--sl-font-weight-semibold
600
--sl-font-size-1
0.75rem
--sl-font-size-2
0.875rem
--sl-font-size-3
1rem
--sl-font-size-4
1.25rem
--sl-font-size-5
1.5rem
--sl-letter-spacing-1
0rem
--sl-letter-spacing-2
-0.00875rem
--sl-letter-spacing-3
-0.02rem
--sl-letter-spacing-4
-0.04rem
--sl-line-height-1
1rem
--sl-line-height-2
1.25rem
--sl-line-height-3
1.5rem
--sl-line-height-4
1.75rem
--sl-line-height-5
2rem
--sl-text-caption-1
font: var(--sl-font-weight-medium) var(--sl-font-size-1) / var(--sl-line-height-1) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-1);
--sl-text-caption-2
font: var(--sl-font-weight-regular) var(--sl-font-size-1) / var(--sl-line-height-1) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-1);
--sl-text-action
font: var(--sl-font-weight-semibold) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-2);
--sl-text-emphasis
font: var(--sl-font-weight-medium) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-2);
--sl-text-body
font: var(--sl-font-weight-regular) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-2);
--sl-text-display-1
font: var(--sl-font-weight-semibold) var(--sl-font-size-5) / var(--sl-line-height-5) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-4);
--sl-text-display-2
font: var(--sl-font-weight-semibold) var(--sl-font-size-4) / var(--sl-line-height-4) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-4);
--sl-text-display-3
font: var(--sl-font-weight-semibold) var(--sl-font-size-3) / var(--sl-line-height-3) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-3);
--sl-text-display-4
font: var(--sl-font-weight-regular) var(--sl-font-size-3) / var(--sl-line-height-3) var(--sl-font-family-sans);
letter-spacing: var(--sl-letter-spacing-3);
Want to know more about design tokens? Read the documentation (opens in a new tab).