Text

Text is the default running-copy primitive on the body typescale. Reach for it for helper lines, descriptions, labels, and any sentence that is not a heading.

size and tone cover most look choices; weight, lineHeight, tracking, align, maxWidth, wrap, and whiteSpace handle layout. Default wrap is pretty (orphan-aware). Prefer wrap="balance" on short multi-line blurbs that need even line lengths; prefer whiteSpace="nowrap" for single-line metrics. Default root is span — pass render when the copy needs a p, label, code, or other element while keeping Text styling. Prefer tone over a literal color so theme changes stay centralized. Use tracking instead of CSS letter-spacing on the same Text root.

For headings, use Title instead of bumping Text size. Fluid viewport clamp and the foundation typography gate are covered on Typography.

When to useCopy Anchor Link

• Supporting copy under a section or control
• Body paragraphs, captions, and inline labels that share the body scale
• Mono snippets or data lines via family when the line is not a heading
• Semantic roots (p, label, code) that still need Text styling

When not to useCopy Anchor Link

• Page or section headings → Title
• Copy that must fill a tile width → FitText
• Overflow that should ellipsize to a fixed row count → ClampText
• Long-form heading and block rhythm → Prose

RelatedCopy Anchor Link

• Title — heading and display presets
• ClampText — multi-line truncation
• FitText — container-filling display type
• Prose — heading-aware article rhythm
• Typography — scale, fluid gate, and tokens

Common examplesCopy Anchor Link

Muted helper lineCopy Anchor Link

Muted supporting copy under a section heading is the baseline Text pattern. Keep the line on the body scale; do not fake a heading with oversized Text.

Semantic block rootCopy Anchor Link

Default Text is a span. Pass render when the outline or form needs a p or label while the same size, tone, and weight still apply.

Nested tonesCopy Anchor Link

Nest Text to retone a phrase without restating size. Inner copies inherit the outer body size unless you set one.

Line heightCopy Anchor Link

lineHeight picks a foundation leading token (none | xs | s | m | l). Root Text defaults to m; omit it on nested Text so leading inherits from the outer copy.

Letter spacingCopy Anchor Link

Set letter-spacing with tracking — a CSS length such as 0.12em. Prefer this prop over CSS letter-spacing on the same Text root. Pair wide tracking with transform="uppercase" for section labels.

Ask your agentCopy Anchor Link

Under each section heading on this settings screen, add one sentence of muted helper copy — keep lines readable around 60 characters wide. Use paragraphs where the outline needs them; do not fake headings with oversized body text.