Typography
Creates hierarchies, organizes information, and guides users through a product or experience.
Token
CSS Variable
Value
Preview
$font-weight-regular
--sl-font-weight-regular
400
$font-weight-medium
--sl-font-weight-medium
500
$font-weight-semibold
--sl-font-weight-semibold
600
$font-size-1
--sl-font-size-1
0.75rem
$font-size-2
--sl-font-size-2
0.875rem
$font-size-3
--sl-font-size-3
1rem
$font-size-4
--sl-font-size-4
1.25rem
$font-size-5
--sl-font-size-5
1.5rem
$letter-spacing-1
--sl-letter-spacing-1
0rem
$letter-spacing-2
--sl-letter-spacing-2
-0.00875rem
$letter-spacing-3
--sl-letter-spacing-3
-0.02rem
$letter-spacing-4
--sl-letter-spacing-4
-0.04rem
$line-height-1
--sl-line-height-1
1rem
$line-height-2
--sl-line-height-2
1.25rem
$line-height-3
--sl-line-height-3
1.5rem
$line-height-4
--sl-line-height-4
1.75rem
$line-height-5
--sl-line-height-5
2rem
$text-caption-1
--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);
$text-caption-2
--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);
$text-action
--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);
$text-emphasis
--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);
$text-body
--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);
$text-display-1
--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);
$text-display-2
--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);
$text-display-3
--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);
$text-display-4
--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);