List of the default typography variables. Since typography is at the core of every design system, having consistent font styles is paramount to make sure that users scan and consume your information well.
Override variables
These are the default typographic style, which you can override them to match your own design system. See Usage for more information on how to override variables.
List of variables
Typeface
| Name | Value | |
|---|
$font | "Source Sans Pro" | This is the default font |
$font-fallback | "Arial, sans-serif" | |
Weight
| Name | Value | |
|---|
$font-regular | 400 | Regular |
$font-bold | 700 | Bold |
Styles
Headings
| Name | Value | |
|---|
$h1-size
$h1-weight
$h1-line-height | 3rem
$font-bold
1.25 | h1 |
$h2-size
$h2-weight
$h2-line-height | 2.5rem
$font-bold
1.25 | h2 |
$h3-size
$h3-weight
$h3-line-height | 2rem
$font-bold
1.25 | h3 |
$h4-size
$h4-weight
$h4-line-height | 1.75rem
$font-bold
1.25 | h4 |
$h5-size
$h5-weight
$h5-line-height | 1.5rem
$font-bold
1.25 | h5 |
$h6-size
$h6-weight
$h6-line-height | 1.25rem
$font-bold
1.25 | h6 |
Body
| Name | Value | |
|---|
$subtitle-size
$subtitle-weight
$subtitle-line-height | 1.125rem
$font-regular
1.5 | Subtitle |
$body-size
$body-weight
$body-line-height | 1rem
$font-regular
1.5 | Body |
$caption-size
$caption-weight
$caption-line-height | 0.875rem
$font-regular
1.5 | Caption |
$overline-size
$overline-weight
$overline-line-height | 0.75rem
$font-regular
1.5 | Overline |