DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Microsoft
Fluent Design System

Type System

Complete typography scale with 11 text styles, interactive tester, and hierarchy demos.

11 styles3 fonts10–68px
Typography stats
11
Styles
3
Families
10–68
Size range
400–700
Weights
Primary font
Segoe UI Variable Display
All Design Systems

Fluent Design System

OverviewColorsTypographySpacingComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
Scale Overview
68
40
28
20
18
14
14
12
12
12
10

Fluent Type Ramp

Fluent 2 typography system using Segoe UI Variable

Visual Scale

68px
Hero
40px
Title 1
28px
Title 2
20px
Title 3
18px
Large Title
14px
Body 1
14px
Body 1 Strong
12px
Body 2
12px
Caption 1
12px
Caption 1 Strong
10px
Caption 2
Font:Segoe UI Variable DisplaySize:68pxWeight:700Line:92pxSpacing:0px

Hero headers, landing pages

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

Page titles

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

Section headers

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

Card titles, subsections

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

Large body text

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

Primary body text

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

Emphasized body text

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

Secondary body text

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

Captions, metadata

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

Emphasized captions

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

Small text, badges