Skip to main contentSkip to filter inputPrimer

Typography

An overview of all available typography CSS variables

Font family

SampleCSS variableOutput 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);
SampleCSS variableSource 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

Display

PropertyCSS variableOutput valueSource value
height
--text-display-lineBoxHeight
1.375{base.text.lineHeight.snug}
line-height
--text-display-lineHeight
1.375{base.text.lineHeight.snug}
font-size
--text-display-size
2.5rem{base.text.size.2xl}
font-weight
--text-display-weight
500{base.text.weight.medium}

Title large

Title large

PropertyCSS variableOutput valueSource value
line-height
--text-title-lineHeight-large
1.5{base.text.lineHeight.normal}
font-size
--text-title-size-large
2rem{base.text.size.xl}
font-weight
--text-title-weight-large
600{base.text.weight.semibold}

Title medium

Title medium

PropertyCSS variableOutput valueSource value
line-height
--text-title-lineHeight-medium
1.625{base.text.lineHeight.relaxed}
font-size
--text-title-size-medium
1.25rem{base.text.size.lg}
font-weight
--text-title-weight-medium
600{base.text.weight.semibold}

Title small

Title small

PropertyCSS variableOutput valueSource value
line-height
--text-title-lineHeight-small
1.5{base.text.lineHeight.normal}
font-size
--text-title-size-small
1rem{base.text.size.md}
font-weight
--text-title-weight-small
600{base.text.weight.semibold}

Subtitle

Subtitle

PropertyCSS variableOutput valueSource value
line-height
--text-subtitle-lineHeight
1.625{base.text.lineHeight.relaxed}
font-size
--text-subtitle-size
1.25rem{base.text.size.lg}
font-weight
--text-subtitle-weight
400{base.text.weight.normal}

Body large

Body large

PropertyCSS variableOutput valueSource value
line-height
--text-body-lineHeight-large
1.5{base.text.lineHeight.normal}
font-size
--text-body-size-large
1rem{base.text.size.md}

Body medium

Body medium

PropertyCSS variableOutput valueSource value
line-height
--text-body-lineHeight-medium
1.5{base.text.lineHeight.normal}
font-size
--text-body-size-medium
0.875rem{base.text.size.sm}

Body small

Body small

PropertyCSS variableOutput valueSource value
line-height
--text-body-lineHeight-small
1.625{base.text.lineHeight.relaxed}
font-size
--text-body-size-small
0.75rem{base.text.size.xs}

Caption

Caption

PropertyCSS variableOutput valueSource value
line-height
--text-caption-lineHeight
1.25{base.text.lineHeight.tight}
font-size
--text-caption-size
0.75rem{base.text.size.xs}
font-weight
--text-caption-weight
400{base.text.weight.normal}

Code block

Code block

PropertyCSS variableOutput valueSource value
line-height
--text-codeBlock-lineHeight
1.5{base.text.lineHeight.normal}
font-size
--text-codeBlock-size
0.8125rem13px
font-weight
--text-codeBlock-weight
400{base.text.weight.normal}

Inline code block

Inline code block

PropertyCSS variableOutput valueSource value
font-size
--text-codeInline-size
0.9285em0.9285em
font-weight
--text-codeInline-weight
400{base.text.weight.normal}

Weight

Prefer font shorthand tokens or use the individual tokens from the text styles when possible.
SampleCSS variableOutput valueSource value

light

--base-text-weight-light
300300

normal

--base-text-weight-normal
400400

medium

--base-text-weight-medium
500500

semibold

--base-text-weight-semibold
600600

Font size

Prefer font shorthand tokens or use the individual tokens from the text styles when possible.
CSS variableOutput valueSource value
--base-text-size-xs
0.75rem0.75rem
--base-text-size-sm
0.875rem0.875rem
--base-text-size-md
1rem1rem
--base-text-size-lg
1.25rem1.25rem
--base-text-size-xl
2rem2rem
--base-text-size-2xl
2.5rem2.5rem

Line height

Prefer font shorthand tokens or use the individual tokens from the text styles when possible.
CSS variableOutput valueSource value
--base-text-lineHeight-tight
1.251.25
--base-text-lineHeight-snug
1.3751.375
--base-text-lineHeight-normal
1.51.5
--base-text-lineHeight-relaxed
1.6251.625
--base-text-lineHeight-loose
1.751.75