Refresh
Scheme Violet Ocean Amber
Light / Dark
Typography
Typography
Size900 — the quick brown fox Size700 — jumps over the lazy dog Size500 — portez ce vieux whisky Size400 — au juge blond qui fume
Body text uses FluentUI's base font token and renders at TextSize.Size300. Inline <code> samples a monospace slice of the token system.
Muted text uses Color.Disabled for secondary captions, hints, and legal fine-print.
Bold, italic, and underline all inherit the foreground token cascade.
Usage
<FluentText Size="TextSize.Size900" Weight="TextWeight.Bold">Heading</FluentText>
<FluentText Block="true">Body text uses FluentUI's base font token.</FluentText>
<FluentText Color="Color.Disabled">Muted text uses Color.Disabled.</FluentText>
Caption component
FctCaption wraps the type scale above into a single component: pick a FctCaptionType step and it renders that step's font-size/weight token pair plus a trailing "space after" margin, so call sites no longer need a bare FluentText Size="..." Weight="..." Block="true" plus a manual FluentSpacer. Each row below sits directly against the next with VerticalGap="0" — the gap you see between them is FctCaption's own margin, not a stack gap.
PageTitle — Foundations
HXXL — 1,284
HXL — 1,284
H1 — jumps over the lazy dog
H2 — jumps over the lazy dog
H3 — portez ce vieux whisky
H4 — au juge blond qui fume
SubTitle — au juge blond qui fume
SectionTitle — surfaces & lines
Caption — metadata / secondary text
Usage
<FctCaption Type="FctCaptionType.PageTitle">Foundations</FctCaption>
<FctCaption Type="FctCaptionType.H2">Section heading</FctCaption>
<FctCaption Type="FctCaptionType.H4">Subsection heading</FctCaption>
<FctCaption Type="FctCaptionType.SubTitle">Supporting subtitle text</FctCaption>
<FctCaption Type="FctCaptionType.SectionTitle">Group label</FctCaption>
<FctCaption>Caption / metadata text</FctCaption>