Text

Text alias tokens are used for styling text.

Token
Value
Description
Font Family
--vortex-typography-heading-2xl-mobile-font-family
var(--vortex-font-family-heading)
h1 - Mobile
Aa
--vortex-typography-heading-2xl-mobile-font-size
var(--vortex-font-size-375)
h1 - Mobile
Line Height
--vortex-typography-heading-2xl-mobile-font-line-height
var(--vortex-font-line-height-200)
h1 - Mobile
Font Weight
--vortex-typography-heading-2xl-mobile-font-weight
var(--vortex-font-weight-medium)
h1 - Mobile
Letter Spacing
--vortex-typography-heading-2xl-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h1 - Mobile
Font Family
--vortex-typography-heading-2xl-desktop-font-family
var(--vortex-font-family-heading)
h1 - Desktop
Aa
--vortex-typography-heading-2xl-desktop-font-size
var(--vortex-font-size-450)
h1 - Desktop
Line Height
--vortex-typography-heading-2xl-desktop-font-line-height
var(--vortex-font-line-height-200)
h1 - Desktop
Font Weight
--vortex-typography-heading-2xl-desktop-font-weight
var(--vortex-font-weight-medium)
h1 - Desktop
Letter Spacing
--vortex-typography-heading-2xl-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h1 - Desktop
Font Family
--vortex-typography-heading-xl-mobile-font-family
var(--vortex-font-family-heading)
h2 - Mobile
Aa
--vortex-typography-heading-xl-mobile-font-size
var(--vortex-font-size-350)
h2 - Mobile
Font Weight
--vortex-typography-heading-xl-mobile-font-weight
var(--vortex-font-weight-medium)
h2 - Mobile
Line Height
--vortex-typography-heading-xl-mobile-font-line-height
var(--vortex-font-line-height-200)
h2 - Mobile
Letter Spacing
--vortex-typography-heading-xl-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h2 - Mobile
Font Family
--vortex-typography-heading-xl-desktop-font-family
var(--vortex-font-family-heading)
h2 - Desktop
Aa
--vortex-typography-heading-xl-desktop-font-size
var(--vortex-font-size-425)
h2 - Desktop
Font Weight
--vortex-typography-heading-xl-desktop-font-weight
var(--vortex-font-weight-medium)
h2 - Desktop
Line Height
--vortex-typography-heading-xl-desktop-font-line-height
var(--vortex-font-line-height-200)
h2 - Desktop
Letter Spacing
--vortex-typography-heading-xl-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h2 - Desktop
Font Family
--vortex-typography-heading-lg-mobile-font-family
var(--vortex-font-family-heading)
h3 - Mobile
Aa
--vortex-typography-heading-lg-mobile-font-size
var(--vortex-font-size-300)
h3 - Mobile
Font Weight
--vortex-typography-heading-lg-mobile-font-weight
var(--vortex-font-weight-medium)
h3 - Mobile
Line Height
--vortex-typography-heading-lg-mobile-font-line-height
var(--vortex-font-line-height-350)
h3 - Mobile
Letter Spacing
--vortex-typography-heading-lg-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h3 - Mobile
Font Family
--vortex-typography-heading-lg-desktop-font-family
var(--vortex-font-family-heading)
h3 - Desktop
Aa
--vortex-typography-heading-lg-desktop-font-size
var(--vortex-font-size-400)
h3 - Desktop
Font Weight
--vortex-typography-heading-lg-desktop-font-weight
var(--vortex-font-weight-medium)
h3 - Desktop
Line Height
--vortex-typography-heading-lg-desktop-font-line-height
var(--vortex-font-line-height-200)
h3 - Desktop
Letter Spacing
--vortex-typography-heading-lg-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h3 - Desktop
Font Family
--vortex-typography-heading-md-mobile-font-family
var(--vortex-font-family-heading)
h4 - Mobile
Aa
--vortex-typography-heading-md-mobile-font-size
var(--vortex-font-size-275)
h4 - Mobile
Font Weight
--vortex-typography-heading-md-mobile-font-weight
var(--vortex-font-weight-medium)
h4 - Mobile
Line Height
--vortex-typography-heading-md-mobile-font-line-height
var(--vortex-font-line-height-350)
h4 - Mobile
Letter Spacing
--vortex-typography-heading-md-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h4 - Mobile
Font Family
--vortex-typography-heading-md-desktop-font-family
var(--vortex-font-family-heading)
h4 - Desktop
Aa
--vortex-typography-heading-md-desktop-font-size
var(--vortex-font-size-375)
h4 - Desktop
Font Weight
--vortex-typography-heading-md-desktop-font-weight
var(--vortex-font-weight-medium)
h4 - Desktop
Line Height
--vortex-typography-heading-md-desktop-font-line-height
var(--vortex-font-line-height-350)
h4 - Desktop
Letter Spacing
--vortex-typography-heading-md-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h4 - Desktop
Font Family
--vortex-typography-heading-sm-mobile-font-family
var(--vortex-font-family-heading)
h5 - Mobile
Aa
--vortex-typography-heading-sm-mobile-font-size
var(--vortex-font-size-250)
h5 - Mobile
Font Weight
--vortex-typography-heading-sm-mobile-font-weight
var(--vortex-font-weight-medium)
h5 - Mobile
Line Height
--vortex-typography-heading-sm-mobile-font-line-height
var(--vortex-font-line-height-350)
h5 - Mobile
Letter Spacing
--vortex-typography-heading-sm-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h5 - Mobile
Font Family
--vortex-typography-heading-sm-desktop-font-family
var(--vortex-font-family-heading)
h5 - Desktop
Aa
--vortex-typography-heading-sm-desktop-font-size
var(--vortex-font-size-325)
h5 - Desktop
Font Weight
--vortex-typography-heading-sm-desktop-font-weight
var(--vortex-font-weight-medium)
H5 - Desktop
Line Height
--vortex-typography-heading-sm-desktop-font-line-height
var(--vortex-font-line-height-300)
h5 - Desktop
Letter Spacing
--vortex-typography-heading-sm-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h5 - Desktop
Font Family
--vortex-typography-heading-xs-mobile-font-family
var(--vortex-font-family-heading)
h6 - Mobile
Aa
--vortex-typography-heading-xs-mobile-font-size
var(--vortex-font-size-200)
h6 - Mobile
Font Weight
--vortex-typography-heading-xs-mobile-font-weight
var(--vortex-font-weight-medium)
h6 - Mobile
Line Height
--vortex-typography-heading-xs-mobile-font-line-height
var(--vortex-font-line-height-350)
h6 - Mobile
Letter Spacing
--vortex-typography-heading-xs-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h6 - Mobile
Font Family
--vortex-typography-heading-xs-desktop-font-family
var(--vortex-font-family-heading)
h6 - Desktop
Aa
--vortex-typography-heading-xs-desktop-font-size
var(--vortex-font-size-275)
h6 - Desktop
Font Weight
--vortex-typography-heading-xs-desktop-font-weight
var(--vortex-font-weight-medium)
h6 - Desktop
Line Height
--vortex-typography-heading-xs-desktop-font-line-height
var(--vortex-font-line-height-350)
h6 - Desktop
Letter Spacing
--vortex-typography-heading-xs-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-denser)
h6 - Desktop
Font Family
--vortex-typography-body-xl-medium-mobile-font-family
var(--vortex-font-family-body)
body - Xl Medium
Aa
--vortex-typography-body-xl-medium-mobile-font-size
var(--vortex-font-size-150)
body - Xl Medium
Font Weight
--vortex-typography-body-xl-medium-mobile-font-weight
var(--vortex-font-weight-medium)
body - Xl Medium
Line Height
--vortex-typography-body-xl-medium-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Xl Medium
Letter Spacing
--vortex-typography-body-xl-medium-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xl Medium
Font Family
--vortex-typography-body-xl-medium-desktop-font-family
var(--vortex-font-family-body)
body - Xl Medium
Aa
--vortex-typography-body-xl-medium-desktop-font-size
var(--vortex-font-size-175)
body - Xl Medium
Font Weight
--vortex-typography-body-xl-medium-desktop-font-weight
var(--vortex-font-weight-medium)
body - Xl Medium
Line Height
--vortex-typography-body-xl-medium-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Xl Medium
Letter Spacing
--vortex-typography-body-xl-medium-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xl Medium
Font Family
--vortex-typography-body-xl-regular-mobile-font-family
var(--vortex-font-family-body)
body - Xl Regular
Aa
--vortex-typography-body-xl-regular-mobile-font-size
var(--vortex-font-size-150)
body - Xl Regular
Font Weight
--vortex-typography-body-xl-regular-mobile-font-weight
var(--vortex-font-weight-regular)
body - Xl Regular
Line Height
--vortex-typography-body-xl-regular-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Xl Regular
Letter Spacing
--vortex-typography-body-xl-regular-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xl Regular
Font Family
--vortex-typography-body-xl-regular-desktop-font-family
var(--vortex-font-family-body)
body - Xl Regular
Aa
--vortex-typography-body-xl-regular-desktop-font-size
var(--vortex-font-size-175)
body - Xl Regular
Font Weight
--vortex-typography-body-xl-regular-desktop-font-weight
var(--vortex-font-weight-regular)
body - Xl Regular
Line Height
--vortex-typography-body-xl-regular-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Xl Regular
Letter Spacing
--vortex-typography-body-xl-regular-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xl Regular
Font Family
--vortex-typography-body-lg-regular-mobile-font-family
var(--vortex-font-family-body)
body - Lg Regular
Aa
--vortex-typography-body-lg-regular-mobile-font-size
var(--vortex-font-size-125)
body - Lg Regular
Font Weight
--vortex-typography-body-lg-regular-mobile-font-weight
var(--vortex-font-weight-regular)
body - Lg Regular
Line Height
--vortex-typography-body-lg-regular-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Lg Regular
Letter Spacing
--vortex-typography-body-lg-regular-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Lg Regular
Font Family
--vortex-typography-body-lg-regular-desktop-font-family
var(--vortex-font-family-body)
body - Lg Regular
Aa
--vortex-typography-body-lg-regular-desktop-font-size
var(--vortex-font-size-150)
body - Lg Regular
Font Weight
--vortex-typography-body-lg-regular-desktop-font-weight
var(--vortex-font-weight-regular)
body - Lg Regular
Line Height
--vortex-typography-body-lg-regular-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Lg Regular
Letter Spacing
--vortex-typography-body-lg-regular-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Lg Regular
Font Family
--vortex-typography-body-lg-medium-mobile-font-family
var(--vortex-font-family-body)
body - Lg Medium
Aa
--vortex-typography-body-lg-medium-mobile-font-size
var(--vortex-font-size-125)
body - Lg Medium
Font Weight
--vortex-typography-body-lg-medium-mobile-font-weight
var(--vortex-font-weight-medium)
body - Lg Medium
Line Height
--vortex-typography-body-lg-medium-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Lg Medium
Letter Spacing
--vortex-typography-body-lg-medium-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Lg Medium
Font Family
--vortex-typography-body-lg-medium-desktop-font-family
var(--vortex-font-family-body)
body - Lg Medium
Aa
--vortex-typography-body-lg-medium-desktop-font-size
var(--vortex-font-size-150)
body - Lg Medium
Font Weight
--vortex-typography-body-lg-medium-desktop-font-weight
var(--vortex-font-weight-medium)
body - Lg Medium
Line Height
--vortex-typography-body-lg-medium-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Lg Medium
Letter Spacing
--vortex-typography-body-lg-medium-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Lg Medium
Font Family
--vortex-typography-body-md-regular-mobile-font-family
var(--vortex-font-family-body)
body - Md Regular
Aa
--vortex-typography-body-md-regular-mobile-font-size
var(--vortex-font-size-100)
body - Md Regular
Font Weight
--vortex-typography-body-md-regular-mobile-font-weight
var(--vortex-font-weight-regular)
body - Md Regular
Line Height
--vortex-typography-body-md-regular-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Md Regular
Letter Spacing
--vortex-typography-body-md-regular-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Md Regular
Font Family
--vortex-typography-body-md-regular-desktop-font-family
var(--vortex-font-family-body)
body - Md Regular
Aa
--vortex-typography-body-md-regular-desktop-font-size
var(--vortex-font-size-125)
body - Md Regular
Font Weight
--vortex-typography-body-md-regular-desktop-font-weight
var(--vortex-font-weight-regular)
body - Md Regular
Line Height
--vortex-typography-body-md-regular-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Md Regular
Letter Spacing
--vortex-typography-body-md-regular-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Md Regular
Font Family
--vortex-typography-body-md-medium-mobile-font-family
var(--vortex-font-family-body)
body - Md Medium
Aa
--vortex-typography-body-md-medium-mobile-font-size
var(--vortex-font-size-100)
body - Md Medium
Font Weight
--vortex-typography-body-md-medium-mobile-font-weight
var(--vortex-font-weight-medium)
body - Md Medium
Line Height
--vortex-typography-body-md-medium-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Md Medium
Letter Spacing
--vortex-typography-body-md-medium-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Md Medium
Font Family
--vortex-typography-body-md-medium-desktop-font-family
var(--vortex-font-family-body)
body - Md Medium
Aa
--vortex-typography-body-md-medium-desktop-font-size
var(--vortex-font-size-125)
body - Md Medium
Font Weight
--vortex-typography-body-md-medium-desktop-font-weight
var(--vortex-font-weight-medium)
body - Md Medium
Line Height
--vortex-typography-body-md-medium-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Md Medium
Letter Spacing
--vortex-typography-body-md-medium-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Md Medium
Font Family
--vortex-typography-body-sm-regular-mobile-font-family
var(--vortex-font-family-body)
body - Sm Regular
Aa
--vortex-typography-body-sm-regular-mobile-font-size
var(--vortex-font-size-100)
body - Sm Regular
Font Weight
--vortex-typography-body-sm-regular-mobile-font-weight
var(--vortex-font-weight-regular)
body - Sm Regular
Line Height
--vortex-typography-body-sm-regular-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Sm Regular
Letter Spacing
--vortex-typography-body-sm-regular-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Sm Regular
Font Family
--vortex-typography-body-sm-regular-desktop-font-family
var(--vortex-font-family-body)
body - Sm Regular
Aa
--vortex-typography-body-sm-regular-desktop-font-size
var(--vortex-font-size-100)
body - Sm Regular
Font Weight
--vortex-typography-body-sm-regular-desktop-font-weight
var(--vortex-font-weight-regular)
body - Sm Regular
Line Height
--vortex-typography-body-sm-regular-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Sm Regular
Letter Spacing
--vortex-typography-body-sm-regular-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Sm Regular
Font Family
--vortex-typography-body-sm-medium-mobile-font-family
var(--vortex-font-family-body)
body - Sm Medium
Aa
--vortex-typography-body-sm-medium-mobile-font-size
var(--vortex-font-size-100)
body - Sm Medium
Font Weight
--vortex-typography-body-sm-medium-mobile-font-weight
var(--vortex-font-weight-medium)
body - Sm Medium
Line Height
--vortex-typography-body-sm-medium-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Sm Medium
Letter Spacing
--vortex-typography-body-sm-medium-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Sm Medium
Font Family
--vortex-typography-body-sm-medium-desktop-font-family
var(--vortex-font-family-body)
body - Sm Medium
Aa
--vortex-typography-body-sm-medium-desktop-font-size
var(--vortex-font-size-100)
body - Sm Medium
Font Weight
--vortex-typography-body-sm-medium-desktop-font-weight
var(--vortex-font-weight-medium)
body - Sm Medium
Line Height
--vortex-typography-body-sm-medium-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Sm Medium
Letter Spacing
--vortex-typography-body-sm-medium-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Sm Medium
Font Family
--vortex-typography-body-xs-regular-mobile-font-family
var(--vortex-font-family-body)
body - Xs Regular
Aa
--vortex-typography-body-xs-regular-mobile-font-size
var(--vortex-font-size-75)
body - Xs Regular
Font Weight
--vortex-typography-body-xs-regular-mobile-font-weight
var(--vortex-font-weight-regular)
body - Xs Regular
Line Height
--vortex-typography-body-xs-regular-mobile-font-line-height
var(--vortex-font-line-height-400)
body - Xs Regular
Letter Spacing
--vortex-typography-body-xs-regular-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xs Regular
Font Family
--vortex-typography-body-xs-regular-desktop-font-family
var(--vortex-font-family-body)
body - Xs Regular
Aa
--vortex-typography-body-xs-regular-desktop-font-size
var(--vortex-font-size-75)
body - Xs Regular
Font Weight
--vortex-typography-body-xs-regular-desktop-font-weight
var(--vortex-font-weight-regular)
body - Xs Regular
Line Height
--vortex-typography-body-xs-regular-desktop-font-line-height
var(--vortex-font-line-height-400)
body - Xs Regular
Letter Spacing
--vortex-typography-body-xs-regular-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xs Regular
Font Family
--vortex-typography-body-xs-medium-mobile-font-family
var(--vortex-font-family-body)
body - Xs Medium
Aa
--vortex-typography-body-xs-medium-mobile-font-size
var(--vortex-font-size-75)
body - Xs Medium
Font Weight
--vortex-typography-body-xs-medium-mobile-font-weight
var(--vortex-font-weight-medium)
body - Xs Medium
Line Height
--vortex-typography-body-xs-medium-mobile-font-line-height
var(--vortex-font-line-height-600)
body - Xs Medium
Letter Spacing
--vortex-typography-body-xs-medium-mobile-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xs Medium
Font Family
--vortex-typography-body-xs-medium-desktop-font-family
var(--vortex-font-family-body)
body - Xs Medium
Aa
--vortex-typography-body-xs-medium-desktop-font-size
var(--vortex-font-size-75)
body - Xs Medium
Font Weight
--vortex-typography-body-xs-medium-desktop-font-weight
var(--vortex-font-weight-medium)
body - Xs Medium
Line Height
--vortex-typography-body-xs-medium-desktop-font-line-height
var(--vortex-font-line-height-600)
body - Xs Medium
Letter Spacing
--vortex-typography-body-xs-medium-desktop-font-letter-spacing
var(--vortex-font-letter-spacing-normal)
body - Xs Medium
Text Tokens — Vortex Design System