Typography

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 3"`	Default body font
`$font-headings`	`"Source Sans 3"`	Default headings font
`$font-fallback`	`"Arial, sans-serif"`	Fallback font stack
`$font-code`	`monospace`	Font for code blocks

Weight

Name	Value
`$weight-regular`	`400`	Regular
`$weight-bold`	`700`	Bold
`$weight-headings-regular`	`400`	Regular weight for headings
`$weight-headings-bold`	`700`	Bold weight for headings

Styles

Headings

Name	Value
`$h1-size` `$h1-weight` `$h1-leading` `$h1-family` `$h1-transform`	`3rem` `$weight-bold` `1.25` `$font-headings` `initial`	h1
`$h2-size` `$h2-weight` `$h2-leading` `$h2-family` `$h2-transform`	`2.5rem` `$weight-bold` `1.25` `$font-headings` `initial`	h2
`$h3-size` `$h3-weight` `$h3-leading` `$h3-family` `$h3-transform`	`2rem` `$weight-bold` `1.25` `$font-headings` `initial`	h3
`$h4-size` `$h4-weight` `$h4-leading` `$h4-family` `$h4-transform`	`1.75rem` `$weight-bold` `1.25` `$font-headings` `initial`	h4
`$h5-size` `$h5-weight` `$h5-leading` `$h5-family` `$h5-transform`	`1.5rem` `$weight-bold` `1.25` `$font-headings` `initial`	h5
`$h6-size` `$h6-weight` `$h6-leading` `$h6-family` `$h6-transform`	`1.25rem` `$weight-bold` `1.5` `$font` `initial`	h6

Body

Name	Value
`$subtitle-size` `$subtitle-weight` `$subtitle-leading`	`1.125rem` `$weight-regular` `1.5`	Subtitle
`$body-size` `$body-weight` `$body-leading`	`1rem` `$weight-regular` `1.5`	Body
`$caption-size` `$caption-weight` `$caption-leading`	`0.875rem` `$weight-regular` `1.5`	Caption
`$overline-size` `$overline-weight` `$overline-leading`	`0.75rem` `$weight-regular` `1.5`	Overline

Button

Name	Value
`$button-family`	`$font`	Button font family
`$button-size`	`1rem`	Default button font size
`$button-xs-size`	`0.75rem`	Extra small button font size
`$button-sm-size`	`0.875rem`	Small button font size
`$button-lg-size`	`1.25rem`	Large button font size
`$button-weight`	`$weight-bold`	Button font weight
`$button-transform`	`uppercase`	Button text transform

Override variables​

List of variables​

Typeface​

Weight​

Styles​

Headings​

Body​

Button​