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.

.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.

import { Text } from "@liquidify/react"

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

Keep document semantics in the as element and visual hierarchy in the token or variant. This allows an h2 to retain the correct outline even when its visual role changes.