FitText

FitText shrinks or grows headline copy to fill its container width. Drop it inside a hero band, stat callout, or narrow sidebar where a fixed Title size would either overflow or leave dead space.

A hidden reference layer plus CSS container sizing scale the display copy to the parent width. maxFontSize caps how large the fit may grow — without it, short strings in wide containers can become enormous. Wrap Title or Text as children; the FitText root is a div, so pair heading semantics on the inner Title when the line belongs in the document outline.

Give the parent a defined width. Flex children need min-width: 0 or an explicit width constraint, or the fit cannot resolve. For ordinary paragraphs, stay on Text with foundation fluid sizing instead.

When to useCopy Anchor Link

• KPI numbers, short hero words, or labels that must fill a known band width
• Sidebars and tiles where a fixed Title step would overflow or look sparse
• Display lines that need a maximum size cap via maxFontSize

When not to useCopy Anchor Link

• Normal body or helper paragraphs → Text
• Headings with a fixed typescale step and semantic tag → Title
• Truncation to a row count instead of scaling → ClampText

RelatedCopy Anchor Link

• Title — fixed heading and display presets
• Text — body-scale running copy
• ClampText — ellipsis by row count

Common examplesCopy Anchor Link

Resize the frameCopy Anchor Link

Drag the sandbox edge. The title fills the available width and scales with the frame — that is FitText’s job. No maxFontSize here on purpose: short words grow huge in a wide frame.

Cap the growthCopy Anchor Link

Same KPI fill, but maxFontSize stops the digit from outgrowing the layout when the frame is wide. Drag the sandbox to compare.

Ask your agentCopy Anchor Link

Make the KPI number in this tile scale down to fit the width while the unit suffix stays small muted text below.