Text types, sizes, and font variables that control hierarchy across the product. Nothing is larger than 32px.
Typography is Text from @prepared911/ui/text plus the --text-<role>-* custom properties in @prepared911/ui/styles.css. Each TextType applies the whole bundle: font, letter-spacing, and text wrap. Emphasis is a separate role, such as TextType.SubtitleEmphasis, not a strong or medium prop. The heading element is as. The visual role does not pick h1–h6.
The 32px ceiling
The largest font size anywhere in the application is 32px. Display is 32px, for a single large figure such as a queue count or a metric value. Page is the largest heading at 24px and every other role is smaller, so a hierarchy that follows the order Display, Page, Section, Subsection, Title, Subtitle never inverts. A test in @prepared911/ui fails when a role, a font-size token, or an authored stylesheet goes above the ceiling.
Role
Size
Line height
Weight
Letter spacing
Display
32px
40px
600
-0.04em
Page
24px
32px
600
-0.04em
Section
20px
26px
600
-0.02em
Subsection
18px
24px
600
-0.01em
Title
16px
24px
400
0em
TitleEmphasis
16px
24px
600
0em
Subtitle (default)
14px
20px
400
0em
SubtitleEmphasis
14px
20px
500
0em
Body
13px
18px
400
0em
BodyEmphasis
13px
18px
500
0em
Label
13px
18px
500
0em
Caption
12px
16px
400
0em
CaptionEmphasis
12px
16px
500
0em
Code1
13px
18px
400
0em
Code2
12px
16px
400
0em
Timer
16px
24px
400
0em
Overline
12px
16px
500
0.08em
Display
One large figure that a screen is built around, such as the count on a queue card or a dashboard metric. It is not a heading: put the label beside it in a smaller role, and pass the number as value so the digits roll.
128
TextType.Display · --text-display-* · 32px · 600A single large figure. The largest text in the product.
Titles
Page, section, subsection, and title roles are the headings. Set as to the heading level the outline needs.
Page
TextType.Page · --text-page-* · 24px · 600 · h1The title of a page. The largest heading in the product.
Section
TextType.Section · --text-section-* · 20px · 600 · h2Section headings within a page.
Subsection
TextType.Subsection · --text-subsection-* · 18px · 600 · h3Subsection headings nested under a section.
Title
TextType.Title · --text-title-* · 16px · 400 · h4Subheadings supporting a title or card header. TitleEmphasis is the same size at weight 600.
Body
Designed for multiple lines of text with comfortable line height for readability.
Subtitle
TextType.Subtitle · --text-subtitle-* · 14px · 400Default paragraph text. The most commonly used text style.
Subtitle emphasis
TextType.SubtitleEmphasis · --text-subtitle-emphasis-* · 14px · 500Emphasis inside body copy and list titles.
Body
TextType.Body · --text-body-* · 13px · 400Dense body copy in tables and side panels.
Controls
Designed for single-line interactive contexts: labels and metadata.
Below the Title size (16px), emphasis stops at weight 500.
Foreground
Text takes a foreground from Foreground to express semantic meaning.
Variant
When to use
Foreground.Default
Primary content (default)
Foreground.Subtle
Secondary and supporting text
Foreground.Muted
Tertiary metadata
Foreground.Disabled
Disabled controls and inactive states
Foreground.Link
Links
Foreground.Accent
Accent text and interactive highlights
Foreground.Informative
Informational callouts
Foreground.Success
Positive confirmations
Foreground.Warning
Cautionary messages
Foreground.Destructive
Destructive or error states
Migrating from BodyLarge
TextType.BodyLarge and TextType.BodyLargeEmphasis were removed when the heading roles moved down the scale.
Before
After
TextType.BodyLarge
TextType.Subtitle
TextType.BodyLargeEmphasis
TextType.SubtitleEmphasis
var(--text-body-large-*)
var(--text-subtitle-*)
var(--text-body-large-emphasis-*)
var(--text-subtitle-emphasis-*)
Every other role keeps its name and moves down the scale: Page 36px to 24px, Section 30px to 20px, Subsection 24px to 18px, Title and TitleEmphasis 20px to 16px, and Subtitle and SubtitleEmphasis 16px to 14px. Where a screen set a Subtitle run beside a BodyLarge run to show a hierarchy, use Title for the larger run.
Usage expectations
Reach for TextType roles before composing font-size and font-weight manually, and never write a font size above 32px.
Use titles (Page to Title) only for actual headings: pair each with the as element the outline needs.
Pair Caption and Body with Foreground.Subtle for secondary content to establish clear hierarchy.
Reserve Overline for category labels and small section intros; it renders as uppercase by default.