Foundations

Typography

Segoe UI Variable is the Fluent typeface. A fixed type ramp keeps the text hierarchy clear and consistent.

Always use a style from the ramp; don't set font-size or line-height yourself. Use only Regular (400) and Semibold (600). For long-form text (Markdown, articles), tune Prose's fonts and rhythm in Typeset.

Type ramp

Display

68 / 92 · Semibold

text-display

Design that flows

Large title

40 / 52 · Semibold

text-large-title

Design that flows

Title 1

32 / 40 · Semibold

text-title1

Design that flows

Title 2

28 / 36 · Semibold

text-title2

Design that flows

Title 3

24 / 32 · Semibold

text-title3

Design that flows

Subtitle 1

20 / 28 · Semibold

text-subtitle1

Design that flows

Subtitle 2

16 / 22 · Semibold

text-subtitle2

Design that flows

Body 2

16 / 22 · Regular

text-body2

Design that flows

Body 1

14 / 20 · Regular

text-body1

Design that flows

Body 1 Strong

14 / 20 · Semibold

text-body1 font-semibold

Design that flows

Caption 1

12 / 16 · Regular

text-caption1

Design that flows

Caption 2

10 / 14 · Regular

text-caption2

Design that flows

Usage

<h1 className="text-large-title font-semibold">Page title</h1>
<h2 className="text-title3 font-semibold">Section title</h2>
<p className="text-body1 text-foreground-2">Body text.</p>
<span className="text-caption1 text-foreground-3">Updated 5 minutes ago</span>