Typography
The typography system uses LiftKit scaling principles with CSS variables for font sizes, line heights, and letter spacing. Font weights for regular and bold styles are also defined via CSS variables.
display1
Display One
Regular - FW: 400
Display One
Bold - FW: var(--text-display1-bold--font-weight)
Size:
var(--text-display1)Line Height:
var(--text-display1--line-height)Letter Spacing:
var(--text-display1--letter-spacing)Default Weight:
400Bold Weight:
var(--text-display1-bold--font-weight)display2
Display Two
Regular - FW: 400
Display Two
Bold - FW: var(--text-display2-bold--font-weight)
Size:
var(--text-display2)Line Height:
var(--text-display2--line-height)Letter Spacing:
var(--text-display2--letter-spacing)Default Weight:
400Bold Weight:
var(--text-display2-bold--font-weight)title1
Title One (L1)
Regular - FW: 400
Title One (L1)
Bold - FW: var(--text-title1-bold--font-weight)
Size:
var(--text-title1)Line Height:
var(--text-title1--line-height)Letter Spacing:
var(--text-title1--letter-spacing)Default Weight:
400Bold Weight:
var(--text-title1-bold--font-weight)title2
Title Two (L2)
Regular - FW: 400
Title Two (L2)
Bold - FW: var(--text-title2-bold--font-weight)
Size:
var(--text-title2)Line Height:
var(--text-title2--line-height)Letter Spacing:
var(--text-title2--letter-spacing)Default Weight:
400Bold Weight:
var(--text-title2-bold--font-weight)title3
Title Three (L3)
Regular - FW: 400
Title Three (L3)
Bold - FW: var(--text-title3-bold--font-weight)
Size:
var(--text-title3)Line Height:
var(--text-title3--line-height)Letter Spacing:
var(--text-title3--letter-spacing)Default Weight:
400Bold Weight:
var(--text-title3-bold--font-weight)heading
Heading (H)
Regular - FW: var(--text-heading--font-weight)
Heading (H)
Bold - FW: var(--text-heading-bold--font-weight)
Size:
var(--text-heading)Line Height:
var(--text-heading--line-height)Letter Spacing:
var(--text-heading--letter-spacing)Default Weight:
var(--text-heading--font-weight)Bold Weight:
var(--text-heading-bold--font-weight)subheading
Subheading Text
Regular - FW: 400
Subheading Text
Bold - FW: var(--text-subheading-bold--font-weight)
Size:
var(--text-subheading)Line Height:
var(--text-subheading--line-height)Letter Spacing:
var(--text-subheading--letter-spacing)Default Weight:
400Bold Weight:
var(--text-subheading-bold--font-weight)body
Body text for paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Regular - FW: 400
Body text for paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bold - FW: var(--text-body-bold--font-weight)
Size:
var(--text-body)Line Height:
var(--text-body--line-height)Letter Spacing:
var(--text-body--letter-spacing)Default Weight:
400Bold Weight:
var(--text-body-bold--font-weight)callout
Callout information here.
Regular - FW: 400
Callout information here.
Bold - FW: var(--text-callout-bold--font-weight)
Size:
var(--text-callout)Line Height:
var(--text-callout--line-height)Letter Spacing:
var(--text-callout--letter-spacing)Default Weight:
400Bold Weight:
var(--text-callout-bold--font-weight)label
Label Text
Regular - FW: var(--text-label--font-weight)
Label Text
Bold - FW: var(--text-label-bold--font-weight)
Size:
var(--text-label)Line Height:
var(--text-label--line-height)Letter Spacing:
var(--text-label--letter-spacing)Default Weight:
var(--text-label--font-weight)Bold Weight:
var(--text-label-bold--font-weight)caption
Caption for an image or chart.
Regular - FW: 400
Caption for an image or chart.
Bold - FW: var(--text-caption-bold--font-weight)
Size:
var(--text-caption)Line Height:
var(--text-caption--line-height)Letter Spacing:
var(--text-caption--letter-spacing)Default Weight:
400Bold Weight:
var(--text-caption-bold--font-weight)overline (Uppercase)
Overline Text
Regular - FW: 400
Overline Text
Bold - FW: var(--text-overline-bold--font-weight)
Size:
var(--text-overline)Line Height:
var(--text-overline--line-height)Letter Spacing:
var(--text-overline--letter-spacing)Default Weight:
400Bold Weight:
var(--text-overline-bold--font-weight)Usage Guidelines
Display styles are used for large headings and hero text.
Title styles create clear hierarchy for section headings.
Body text is optimized for readability in paragraphs and content blocks.
Caption and overline styles are for supporting text and metadata.
Apply these styles using Tailwind's arbitrary value syntax: text-[length:var(--text-body)]