Text

Orbital typography gives you scale presets for consistent hierarchy. Page and shell titles: Title3–Title1. Content section and card titles: Subtitle1. Form clusters and TOC rail labels: SectionTitle. Body copy: Body1/Body2. Metadata: Caption1/Caption2. Named section labels must not render below Body1 (14px). Start with a preset, then drop to Text for explicit size, weight, font, or decoration. For forms, use FormLabel and FormHint inside a Field.
Default

Prefer a typography preset for hierarchy; use Text when you need explicit size, weight, or tag control.

Use Body1 for body copy, or Text when you need explicit size and weight.
Typography scale

Typography presets from Display through Caption2 — use named components instead of manual size/weight props for consistent hierarchy.

DisplayLargeTitleTitle1Title2Title3Subtitle1Subtitle2Subtitle2StrongerBody1Body1StrongBody1StrongerBody2Caption1Caption1StrongCaption1StrongerCaption2Caption2Strong
Form helpers

FormLabel, FormHint, and SectionTitle presets for accessible field labels and grouped settings headings.

We'll never share your email.Account settings
Size

TextSize tokens from 100 (smallest) to 1000 (largest) — pick a step on the typography scale instead of raw font-size values.

1002003004005006007008009001000
Weight

Font weight presets from Regular through Bold — combine with size tokens for emphasis without custom CSS.

RegularMediumSemiboldBold
Font

Base, Numeric (tabular figures), and Monospace font families — use Numeric for aligned counters and Monospace for code snippets.

Base fontNumeric font (tabular nums): 0123456789Monospace font
Semantic tags

Render Text as native HTML elements (h1–h3, p, strong, code, pre) for accessible document structure and SEO.

Heading 1

Heading 2

Heading 3

Paragraph text

Inline spanStrong textEmphasized textInline code
Preformatted block
Italic, underline, and strikethrough

Text decoration props for emphasis, links, and deleted-state copy — combine underline and strikethrough when needed.

Italic textUnderlined textStrikethrough textUnderlined and struck through
Truncate

Single-line ellipsis when copy exceeds a fixed-width container — pair with block=true inside a bounded wrapper div. Truncated text may be unreadable to screen readers unless the full content is available elsewhere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alignment

Block-level text alignment from start through justify — use justify for multi-line paragraphs that should fill the line box.

Aligned to startAligned to centerAligned to endLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Wrap

Control line breaking in narrow containers — nowrap keeps a single line (may overflow), wrap breaks across lines.

This nowrap text stays on a single line and may overflow.This wrapping text breaks across multiple lines when space is limited.