Typography

Typography design tokens define the font family, size, weight, and other properties of text in a user interface.

font-family

• 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  $t-a-typography-font-family-default

  'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  Default Font family for SN

• 'Merriweather', serif

  $t-a-typography-font-family-long-text

  'Merriweather', serif

  Font family for SN, long text

• 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  $t-a-typography-heading-font-family

  'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  Font family for headings

font-size

• Aa

  $t-a-typography-font-size-xxs

  .75rem

  XXS Font size for SN

• Aa

  $t-a-typography-font-size-xs

  .875rem

  XS Font size for SN

• Aa

  $t-a-typography-font-size-s

  1rem

  S Font size for SN

• Aa

  $t-a-typography-font-size-default

  1.125rem

  Default Font size for SN

• Aa

  $t-a-typography-font-size-md

  1.25rem

  MD Font size for SN

• Aa

  $t-a-typography-font-size-l

  1.5rem

  L Font size for SN

• Aa

  $t-a-typography-font-size-xl

  1.75rem

  XL Font size for SN

• Aa

  $t-a-typography-font-size-xxl

  2rem

  XXL Font size for SN

• Aa

  $t-a-typography-font-size-hl

  2.1875rem

  Heading Large HL Font size for SN

• Aa

  $t-a-typography-font-size-hxl

  2.25rem

  Heading Extra Large HXL Font size for SN

• Aa

  $t-a-typography-font-size-fluid-default

  clamp(1rem, 4vw, 1.125rem)

  Fluid default font size

• Aa

  $t-a-typography-heading-level-1-default-font-size

  2.25rem

  Font size for level 1 headings

• Aa

  $t-a-typography-heading-level-1-fluid-font-size

  clamp(1.75rem, 4vw, 2.25rem)

  Fluid font size for level 1 headings

• Aa

  $t-a-typography-heading-level-2-default-font-size

  1.75rem

  Font size for level 2 headings

• Aa

  $t-a-typography-heading-level-2-fluid-font-size

  clamp(1.5rem, 4vw, 1.75rem)

  Fluid font size for level 2 headings

• Aa

  $t-a-typography-heading-level-3-default-font-size

  1.5rem

  Font size for level 3 headings

• Aa

  $t-a-typography-heading-level-3-fluid-font-size

  clamp(1.25rem, 4vw, 1.5rem)

  Fluid font size for level 3 headings

• Aa

  $t-a-typography-heading-level-4-default-font-size

  1.25rem

  Font size for level 4 headings

• Aa

  $t-a-typography-heading-level-5-default-font-size

  1.125rem

  Font size for level 5 headings

• Aa

  $t-a-typography-heading-level-6-default-font-size

  1.125rem

  Font size for level 6 headings

font-weight

• 300

  $t-a-typography-font-weight-light

  300

  Font weight light for SN

• 400

  $t-a-typography-font-weight-normal

  400

  Font weight normal for SN

• 700

  $t-a-typography-font-weight-bold

  700

  Font weight bold for SN

• 700

  $t-a-typography-heading-font-weight

  700

  Font weight for headings

line-height

• $t-a-typography-line-height-tighter

  1.2

  Tighter line height

• $t-a-typography-line-height-tight

  1.4

  Tight line height

• $t-a-typography-line-height-md

  1.5

  MD line height

• $t-a-typography-line-height-base

  1.8

  Base line height

• $t-a-typography-heading-line-height

  1.2

  Line height for headings

letter-spacing

• $t-a-typography-heading-letter-spacing

  0.2rem

  Letter spacing for headings