Typography

Choose the hierarchy

Start with the reading order, then choose the smallest role that expresses it. Use displayLg only for a dominant brand or campaign statement and display for other rare page-level statements. Use heading roles for nested sections, body or bodySm for reading, caption for supporting detail, and label for short identifiers.

Text roles

Line length and localization

Keep paragraphs narrow enough to scan and let labels grow. Korean and Japanese may wrap at different points from English; do not reserve width from the English string or force explanatory text onto one line. Use uppercase tracking only for short Latin labels, not Korean or Japanese prose.

Applied hierarchy

Font loading responsibility

Core declares the family name "IBM Plex Sans" for the body and heading tokens, and "IBM Plex Mono" for the mono token. It does not ship or load font files. The consuming app must load the required faces and locale subsets; this documentation app loads IBM Plex Sans plus its Korean and Japanese families, and IBM Plex Mono.

Load IBM Plex Mono wherever you render code, TRCode, TRCodeBlock, or TRFileTree. The mono token falls back to the generic monospace family, so those surfaces stay fixed-width even before the webfont arrives.

Implementation and reference

@import "@tinyrack/ui/core.css";
.rack-title { font: var(--tinyrack-weight-heading) var(--tinyrack-text-2xl) / var(--tinyrack-leading-sm) var(--tinyrack-font-heading); }

See the Tailwind typography mappings.