Typography

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

font-family

• -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif

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

  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif

  Default Font family for Nature

• Harding, Palatino, serif

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

  Harding, Palatino, serif

  Font family for Nature, long text

• Harding, Palatino, serif

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

  Harding, Palatino, 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-heading-level-1-default-font-size

  2rem

  Font size for level 1 headings

• Aa

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

  clamp(1.5rem, 4vw, 2rem)

  fluid Font size for level 1 headings

• Aa

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

  1.5rem

  Font size for level 2 headings

• Aa

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

  clamp(1.25rem, 4vw, 1.5rem)

  fluid Font size for level 2 headings

• Aa

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

  1.25rem

  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

line-height

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

  1.61803398875

  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

font-weight

• 700

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

  700

  Font weight for headings