Typography

Use Liquidify's type scale, weights, line heights, and tracking tokens.

Liquidify's type vocabulary separates size, weight, line height, and letter spacing so application text can share the component scale without inheriting component markup.

Code
.page-title {
  font-family: var(--lq-font-family-sans);
  font-size: var(--lq-font-size-large-title);
  font-weight: var(--lq-font-weight-bold);
  line-height: var(--lq-line-height-large-title);
  letter-spacing: var(--lq-letter-spacing-large-title);
}

The generated size families run from caption2 through large-title. Match a token to the text's information hierarchy; do not choose a title token merely to make text larger.

Component text

Use the Text component when you want Liquidify's semantic typography API and element selection. Use CSS variables when styling application-owned HTML.

Code
import { Text } from "@liquidify/react"

<Text as="h2" variant="title2" weight="semibold">Account</Text>

Use as to select the semantic element directly, including h1–h6, p, and strong. The typography variant controls appearance independently of the document outline. All text uses Liquidify’s shared font tokens.