Typography
Typography tokens are used for styling text.
| Token | Value | Description | |
|---|---|---|---|
Font Family | var(--vortex-font-family-heading) | h1 - mobile | |
Aa | var(--vortex-font-size-375) | h1 - mobile | |
Line Height | var(--vortex-font-line-height-200) | h1 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h1 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h1 - mobile | |
Font Family | var(--vortex-font-family-heading) | h1 - desktop | |
Aa | var(--vortex-font-size-450) | h1 - desktop | |
Line Height | var(--vortex-font-line-height-200) | h1 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h1 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h1 - desktop | |
Font Family | var(--vortex-font-family-heading) | h2 - mobile | |
Aa | var(--vortex-font-size-350) | h2 - mobile | |
Line Height | var(--vortex-font-line-height-200) | h2 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h2 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h2 - mobile | |
Font Family | var(--vortex-font-family-heading) | h2 - desktop | |
Aa | var(--vortex-font-size-425) | h2 - desktop | |
Line Height | var(--vortex-font-line-height-200) | h2 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h2 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h2 - desktop | |
Font Family | var(--vortex-font-family-heading) | h3 - mobile | |
Aa | var(--vortex-font-size-300) | h3 - mobile | |
Line Height | var(--vortex-font-line-height-350) | h3 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h3 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h3 - mobile | |
Font Family | var(--vortex-font-family-heading) | h3 - desktop | |
Aa | var(--vortex-font-size-400) | h3 - desktop | |
Line Height | var(--vortex-font-line-height-200) | h3 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h3 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h3 - desktop | |
Font Family | var(--vortex-font-family-heading) | h4 - mobile | |
Aa | var(--vortex-font-size-275) | h4 - mobile | |
Line Height | var(--vortex-font-line-height-350) | h4 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h4 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h4 - mobile | |
Font Family | var(--vortex-font-family-heading) | h4 - desktop | |
Aa | var(--vortex-font-size-375) | h4 - desktop | |
Line Height | var(--vortex-font-line-height-350) | h4 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h4 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h4 - desktop | |
Font Family | var(--vortex-font-family-heading) | h5 - mobile | |
Aa | var(--vortex-font-size-250) | h5 - mobile | |
Line Height | var(--vortex-font-line-height-350) | h5 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h5 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h5 - mobile | |
Font Family | var(--vortex-font-family-heading) | h5 - desktop | |
Aa | var(--vortex-font-size-325) | h5 - desktop | |
Line Height | var(--vortex-font-line-height-300) | h5 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h5 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h5 - desktop | |
Font Family | var(--vortex-font-family-heading) | h6 - mobile | |
Aa | var(--vortex-font-size-200) | h6 - mobile | |
Line Height | var(--vortex-font-line-height-350) | h6 - mobile | |
Font Weight | var(--vortex-font-weight-medium) | h6 - mobile | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h6 - mobile | |
Font Family | var(--vortex-font-family-heading) | h6 - desktop | |
Aa | var(--vortex-font-size-275) | h6 - desktop | |
Line Height | var(--vortex-font-line-height-350) | h6 - desktop | |
Font Weight | var(--vortex-font-weight-medium) | h6 - desktop | |
Letter Spacing | var(--vortex-font-letter-spacing-denser) | h6 - desktop | |
Font Family | var(--vortex-font-family-body) | body xl - medium | |
Aa | var(--vortex-font-size-150) | body xl - medium | |
Line Height | var(--vortex-font-line-height-600) | body xl - medium | |
Font Weight | var(--vortex-font-weight-medium) | body xl - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xl - medium | |
Font Family | var(--vortex-font-family-body) | body xl - medium | |
Aa | var(--vortex-font-size-175) | body xl - medium | |
Line Height | var(--vortex-font-line-height-600) | body xl - medium | |
Font Weight | var(--vortex-font-weight-medium) | body xl - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xl - medium | |
Font Family | var(--vortex-font-family-body) | body xl - regular | |
Aa | var(--vortex-font-size-150) | body xl - regular | |
Line Height | var(--vortex-font-line-height-600) | body xl - regular | |
Font Weight | var(--vortex-font-weight-regular) | body xl - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xl - regular | |
Font Family | var(--vortex-font-family-body) | body xl - regular | |
Aa | var(--vortex-font-size-175) | body xl - regular | |
Line Height | var(--vortex-font-line-height-600) | body xl - regular | |
Font Weight | var(--vortex-font-weight-regular) | body xl - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xl - regular | |
Font Family | var(--vortex-font-family-body) | body lg - medium | |
Aa | var(--vortex-font-size-125) | body lg - medium | |
Line Height | var(--vortex-font-line-height-600) | body lg - medium | |
Font Weight | var(--vortex-font-weight-medium) | body lg - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body lg - medium | |
Font Family | var(--vortex-font-family-body) | body lg - medium | |
Aa | var(--vortex-font-size-150) | body lg - medium | |
Line Height | var(--vortex-font-line-height-600) | body lg - medium | |
Font Weight | var(--vortex-font-weight-medium) | body lg - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body lg - medium | |
Font Family | var(--vortex-font-family-body) | body lg - regular | |
Aa | var(--vortex-font-size-125) | body lg - regular | |
Line Height | var(--vortex-font-line-height-600) | body lg - regular | |
Font Weight | var(--vortex-font-weight-regular) | body lg - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body lg - regular | |
Font Family | var(--vortex-font-family-body) | body lg - regular | |
Aa | var(--vortex-font-size-150) | body lg - regular | |
Line Height | var(--vortex-font-line-height-600) | body lg - regular | |
Font Weight | var(--vortex-font-weight-regular) | body lg - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body lg - regular | |
Font Family | var(--vortex-font-family-body) | body md - medium | |
Aa | var(--vortex-font-size-100) | body md - medium | |
Line Height | var(--vortex-font-line-height-600) | body md - medium | |
Font Weight | var(--vortex-font-weight-medium) | body md - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body md - medium | |
Font Family | var(--vortex-font-family-body) | body md - medium | |
Aa | var(--vortex-font-size-125) | body md - medium | |
Line Height | var(--vortex-font-line-height-600) | body md - medium | |
Font Weight | var(--vortex-font-weight-medium) | body md - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body md - medium | |
Font Family | var(--vortex-font-family-body) | body md - regular | |
Aa | var(--vortex-font-size-100) | body md - regular | |
Line Height | var(--vortex-font-line-height-600) | body md - regular | |
Font Weight | var(--vortex-font-weight-regular) | body md - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body md - regular | |
Font Family | var(--vortex-font-family-body) | body md - regular | |
Aa | var(--vortex-font-size-125) | body md - regular | |
Line Height | var(--vortex-font-line-height-600) | body md - regular | |
Font Weight | var(--vortex-font-weight-regular) | body md - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body md - regular | |
Font Family | var(--vortex-font-family-body) | body sm - medium | |
Aa | var(--vortex-font-size-100) | body sm - medium | |
Line Height | var(--vortex-font-line-height-600) | body sm - medium | |
Font Weight | var(--vortex-font-weight-medium) | body sm - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body sm - medium | |
Font Family | var(--vortex-font-family-body) | body sm - medium | |
Aa | var(--vortex-font-size-100) | body sm - medium | |
Line Height | var(--vortex-font-line-height-600) | body sm - medium | |
Font Weight | var(--vortex-font-weight-medium) | body sm - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body sm - medium | |
Font Family | var(--vortex-font-family-body) | body sm - regular | |
Aa | var(--vortex-font-size-100) | body sm - regular | |
Line Height | var(--vortex-font-line-height-600) | body sm - regular | |
Font Weight | var(--vortex-font-weight-regular) | body sm - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body sm - regular | |
Font Family | var(--vortex-font-family-body) | body sm - regular | |
Aa | var(--vortex-font-size-100) | body sm - regular | |
Line Height | var(--vortex-font-line-height-600) | body sm - regular | |
Font Weight | var(--vortex-font-weight-regular) | body sm - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body sm - regular | |
Font Family | var(--vortex-font-family-body) | body xs - medium | |
Aa | var(--vortex-font-size-75) | body xs - medium | |
Line Height | var(--vortex-font-line-height-600) | body xs - medium | |
Font Weight | var(--vortex-font-weight-regular) | body xs - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xs - medium | |
Font Family | var(--vortex-font-family-body) | body xs - medium | |
Aa | var(--vortex-font-size-75) | body xs - medium | |
Line Height | var(--vortex-font-line-height-600) | body xs - medium | |
Font Weight | var(--vortex-font-weight-medium) | body xs - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xs - medium | |
Font Family | var(--vortex-font-family-body) | body xs - regular | |
Aa | var(--vortex-font-size-75) | body xs - regular | |
Line Height | var(--vortex-font-line-height-600) | body xs - regular | |
Font Weight | var(--vortex-font-weight-regular) | body xs - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xs - regular | |
Font Family | var(--vortex-font-family-body) | body xs - regular | |
Aa | var(--vortex-font-size-75) | body xs - regular | |
Line Height | var(--vortex-font-line-height-600) | body xs - regular | |
Font Weight | var(--vortex-font-weight-medium) | body xs - regular | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | body xs - regular | |
Font Family | var(--vortex-font-family-heading) | link lg - medium | |
Aa | var(--vortex-font-size-150) | link lg - medium | |
Line Height | var(--vortex-font-line-height-100) | link lg - medium | |
Font Weight | var(--vortex-font-weight-medium) | link lg - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link lg - medium | |
Font Family | var(--vortex-font-family-heading) | link lg - medium | |
Aa | var(--vortex-font-size-150) | link lg - medium | |
Line Height | var(--vortex-font-line-height-100) | link lg - medium | |
Font Weight | var(--vortex-font-weight-medium) | link lg - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link lg - medium | |
Font Family | var(--vortex-font-family-heading) | link md - medium | |
Aa | var(--vortex-font-size-125) | link md - medium | |
Line Height | var(--vortex-font-line-height-100) | link md - medium | |
Font Weight | var(--vortex-font-weight-medium) | link md - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link md - medium | |
Font Family | var(--vortex-font-family-heading) | link md - medium | |
Aa | var(--vortex-font-size-125) | link md - medium | |
Line Height | var(--vortex-font-line-height-100) | link md - medium | |
Font Weight | var(--vortex-font-weight-medium) | link md - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link md - medium | |
Font Family | var(--vortex-font-family-heading) | link sm - medium | |
Aa | var(--vortex-font-size-100) | link sm - medium | |
Line Height | var(--vortex-font-line-height-100) | link sm - medium | |
Font Weight | var(--vortex-font-weight-medium) | link sm - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link sm - medium | |
Font Family | var(--vortex-font-family-heading) | link sm - medium | |
Aa | var(--vortex-font-size-100) | link sm - medium | |
Line Height | var(--vortex-font-line-height-100) | link sm - medium | |
Font Weight | var(--vortex-font-weight-medium) | link sm - medium | |
Letter Spacing | var(--vortex-font-letter-spacing-normal) | link sm - medium |