Typography

An overview of all available typography CSS variables

Weight

Sample	CSS variable	Output value	Source value
light	`--base-text-weight-light`	300	300
normal	`--base-text-weight-normal`	400	400
medium	`--base-text-weight-medium`	500	500
semibold	`--base-text-weight-semibold`	600	600

Font family

View in Storybook

Sample	CSS variable	Output value
monospace	`--fontStack-monospace`	ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace
sansSerif	`--fontStack-sansSerif`	-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'
sansSerifDisplay	`--fontStack-sansSerifDisplay`	-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'
system	`--fontStack-system`	-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Font shorthand

Use the font declaration to set all font properties at once (font-weight, font-size, line-height, and font-family).

font: var(--text-display-shorthand);

View in Storybook

Sample	CSS variable	Source value
body	`--text-body-shorthand-large`	font-weight: `{text.body.weight}` font-size: `{text.body.size.large}` font-family: `{fontStack.sansSerif}` line-height: `{text.body.lineHeight.large}`
body	`--text-body-shorthand-medium`	font-weight: `{text.body.weight}` font-size: `{text.body.size.medium}` font-family: `{fontStack.sansSerif}` line-height: `{text.body.lineHeight.medium}`
body	`--text-body-shorthand-small`	font-weight: `{text.body.weight}` font-size: `{text.body.size.small}` font-family: `{fontStack.sansSerif}` line-height: `{text.body.lineHeight.small}`
caption	`--text-caption-shorthand`	font-weight: `{text.caption.weight}` font-size: `{text.caption.size}` font-family: `{fontStack.sansSerif}` line-height: `{text.caption.lineHeight}`
codeBlock	`--text-codeBlock-shorthand`	font-weight: `{text.codeBlock.weight}` font-size: `{text.codeBlock.size}` font-family: `{fontStack.monospace}` line-height: `{text.codeBlock.lineHeight}`
codeInline	`--text-codeInline-shorthand`	font-weight: `{text.codeInline.weight}` font-size: `{text.codeInline.size}` font-family: `{fontStack.monospace}`
display	`--text-display-shorthand`	font-weight: `{text.display.weight}` font-size: `{text.display.size}` font-family: `{fontStack.sansSerifDisplay}` line-height: `{text.display.lineHeight}`
subtitle	`--text-subtitle-shorthand`	font-weight: `{text.subtitle.weight}` font-size: `{text.subtitle.size}` font-family: `{fontStack.sansSerifDisplay}` line-height: `{text.subtitle.lineHeight}`
title	`--text-title-shorthand-large`	font-weight: `{text.title.weight.large}` font-size: `{text.title.size.large}` font-family: `{fontStack.sansSerifDisplay}` line-height: `{text.title.lineHeight.large}`
title	`--text-title-shorthand-medium`	font-weight: `{text.title.weight.medium}` font-size: `{text.title.size.medium}` font-family: `{fontStack.sansSerifDisplay}` line-height: `{text.title.lineHeight.medium}`
title	`--text-title-shorthand-small`	font-weight: `{text.title.weight.small}` font-size: `{text.title.size.small}` font-family: `{fontStack.sansSerif}` line-height: `{text.title.lineHeight.small}`

Display

View in Storybook

Display

Property	CSS variable	Output value	Source value
`height`	`--text-display-lineBoxHeight`	1.4	1.4
`line-height`	`--text-display-lineHeight`	1.4	1.4
`font-size`	`--text-display-size`	2.5rem	40px
`font-weight`	`--text-display-weight`	500	{base.text.weight.medium}

Title large

View in Storybook

Title large

Property	CSS variable	Output value	Source value
`line-height`	`--text-title-lineHeight-large`	1.5	1.5
`font-size`	`--text-title-size-large`	2rem	32px
`font-weight`	`--text-title-weight-large`	600	{base.text.weight.semibold}

Title medium

View in Storybook

Title medium

Property	CSS variable	Output value	Source value
`line-height`	`--text-title-lineHeight-medium`	1.6	1.6
`font-size`	`--text-title-size-medium`	1.25rem	20px
`font-weight`	`--text-title-weight-medium`	600	{base.text.weight.semibold}

Title small

View in Storybook

Title small

Property	CSS variable	Output value	Source value
`line-height`	`--text-title-lineHeight-small`	1.5	1.5
`font-size`	`--text-title-size-small`	1rem	16px
`font-weight`	`--text-title-weight-small`	600	{base.text.weight.semibold}

Subtitle

View in Storybook

Subtitle

Property	CSS variable	Output value	Source value
`line-height`	`--text-subtitle-lineHeight`	1.6	1.6
`font-size`	`--text-subtitle-size`	1.25rem	20px
`font-weight`	`--text-subtitle-weight`	400	{base.text.weight.normal}

Body large

View in Storybook

Body large

Property	CSS variable	Output value	Source value
`line-height`	`--text-body-lineHeight-large`	1.5	1.5
`font-size`	`--text-body-size-large`	1rem	16px

Body medium

View in Storybook

Body medium

Property	CSS variable	Output value	Source value
`line-height`	`--text-body-lineHeight-medium`	1.4285	1.4285
`font-size`	`--text-body-size-medium`	0.875rem	14px

Body small

View in Storybook

Body small

Property	CSS variable	Output value	Source value
`line-height`	`--text-body-lineHeight-small`	1.6666	1.6666
`font-size`	`--text-body-size-small`	0.75rem	12px

Caption

View in Storybook

Caption

Property	CSS variable	Output value	Source value
`line-height`	`--text-caption-lineHeight`	1.3333	1.3333
`font-size`	`--text-caption-size`	0.75rem	12px
`font-weight`	`--text-caption-weight`	400	{base.text.weight.normal}

Code block

View in Storybook

Code block

Property	CSS variable	Output value	Source value
`line-height`	`--text-codeBlock-lineHeight`	1.5385	1.5385
`font-size`	`--text-codeBlock-size`	0.8125rem	13px
`font-weight`	`--text-codeBlock-weight`	400	{base.text.weight.normal}

Inline code block

View in Storybook

Inline code block

Property	CSS variable	Output value	Source value
`font-size`	`--text-codeInline-size`	0.9285em	0.9285em
`font-weight`	`--text-codeInline-weight`	400	{base.text.weight.normal}