Typography establishes the order and emphasis of information. Choose a small set of text roles for the page, then apply them consistently. A heading should identify a section, body text should support reading, and supporting text should remain legible.

Separate meaning from appearance

Liquidify Text defaults to a span with the body variant. Use as to choose the HTML element and variant to choose its visual style. Selecting title does not create a heading or determine its level.

import { Text } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function NotificationIntroduction() {
  return (
    <section aria-labelledby="notification-heading">
      <Text as="h2" id="notification-heading" variant="title2">
        Notifications
      </Text>
      <Text as="p" variant="body" lineHeight="relaxed">
        Choose how you receive updates about your account.
      </Text>
    </section>
  )
}

Choose heading levels according to the document outline, even when two headings need similar visual treatment. Reserve stronger weights and larger styles for meaningful hierarchy instead of emphasizing every line.

Use a coordinated type style

Text variants select font size, line height, and letter spacing together. The installed ramp includes largeTitle, title, title2, title3, headline, subheadline, body, callout, footnote, caption, and caption2.

The same suffix connects the corresponding --lq-line-height-* and --lq-letter-spacing-* tokens. headline also supplies a semibold weight. Text exposes supported weight, lineHeight, and tracking options for deliberate adjustments. For longer passages, evaluate relaxed or loose leading rather than assuming the default body leading suits every reading task.

Choose fonts deliberately

The installed --lq-font-family-sans stack begins with Inter and Roboto, followed by platform and generic system fallbacks. A font-family declaration does not download those fonts or guarantee the same glyph metrics on every device. The application owns font loading and language coverage.

Review the actual font in supported browsers, including fallback text. Keep the number of typefaces small and verify that chosen weights remain readable at the sizes used. The library does not bundle Apple's system fonts through this token.

Allow text to grow

The installed web size tokens use rem. They can respond to root font-size changes, but the familiar style names do not implement native Dynamic Type or automatically mirror an operating system's text-size setting.

Support browser zoom and text enlargement through flexible layout. Avoid fixed heights around paragraphs, allow controls to accommodate longer labels, and reduce columns when content becomes cramped. Use Text's supported wrapping options only when they serve the content; nowrap should not hide essential information.

Test the full message at larger sizes, including translated or unusually long content. Maintain the heading hierarchy as the layout changes. See Layout grid for reflow decisions.

Review color and emphasis

Text provides primary, secondary, tertiary, quaternary, and inherit color choices. A supplied tint overrides the color choice. De-emphasis must not make required instructions unreadable; inspect the final text and surface in both themes.

Use color="inherit" when text should take the foreground of a color-bearing parent, such as a control. Keep typographic emphasis, semantic importance, and action color consistent with their purpose.

Related implementation

• Text API and examples
• Typography tokens
• Content
• Color

Further reading

• Apple: Typography