Typography

11 text styles • Fluent Design System

Fluent Type Ramp

Fluent 2 typography system using Segoe UI Variable

Hero

Font:Segoe UI Variable DisplaySize:68pxWeight:700Line:92pxSpacing:0px

Hero headers, landing pages

Title 1

Font:Segoe UI Variable DisplaySize:40pxWeight:600Line:52pxSpacing:0px

Page titles

Title 2

Font:Segoe UI Variable DisplaySize:28pxWeight:600Line:36pxSpacing:0px

Section headers

Title 3

Font:Segoe UI Variable DisplaySize:20pxWeight:600Line:28pxSpacing:0px

Card titles, subsections

Large Title

Font:Segoe UI Variable TextSize:18pxWeight:400Line:24pxSpacing:0px

Large body text

Body 1

Font:Segoe UI Variable TextSize:14pxWeight:400Line:20pxSpacing:0px

Primary body text

Body 1 Strong

Font:Segoe UI Variable TextSize:14pxWeight:600Line:20pxSpacing:0px

Emphasized body text

Body 2

Font:Segoe UI Variable TextSize:12pxWeight:400Line:16pxSpacing:0px

Secondary body text

Caption 1

Font:Segoe UI Variable TextSize:12pxWeight:400Line:16pxSpacing:0px

Captions, metadata

Caption 1 Strong

Font:Segoe UI Variable TextSize:12pxWeight:600Line:16pxSpacing:0px

Emphasized captions

Caption 2

Font:Segoe UI Variable SmallSize:10pxWeight:400Line:14pxSpacing:0px

Small text, badges