Type System
Complete typography scale with 15 text styles, interactive tester, and hierarchy demos.
15 styles2 fonts11–57px
Typography stats
15
Styles
2
Families
11–57
Size range
400–500
Weights
Primary font
Roboto
Scale Overview
57
45
36
32
28
24
22
16
14
16
14
12
14
12
11
Display
Hero text and large promotional content. Reserved for short, impactful text.
Display
Visual Scale
57px
Display Large
45px
Display Medium
36px
Display Small
Font:
RobotoSize:57pxWeight:400Line:64pxSpacing:-0.25pxHero text, large headlines
Font:
RobotoSize:45pxWeight:400Line:52pxSpacing:0pxMain headlines, section titles
Font:
RobotoSize:36pxWeight:400Line:44pxSpacing:0pxSecondary headlines
Headline
High-emphasis text for page and section titles that mark content regions.
Headline
Visual Scale
32px
Headline Large
28px
Headline Medium
24px
Headline Small
Font:
RobotoSize:32pxWeight:400Line:40pxSpacing:0pxPage titles
Font:
RobotoSize:28pxWeight:400Line:36pxSpacing:0pxSection headers
Font:
RobotoSize:24pxWeight:400Line:32pxSpacing:0pxCard titles
Title
Medium-emphasis titles for smaller content areas, cards, and dialogs.
Title
Visual Scale
22px
Title Large
16px
Title Medium
14px
Title Small
Font:
RobotoSize:22pxWeight:400Line:28pxSpacing:0pxComponent titles
Font:
Roboto MediumSize:16pxWeight:500Line:24pxSpacing:0.15pxCard headers, tabs
Font:
Roboto MediumSize:14pxWeight:500Line:20pxSpacing:0.1pxSubheaders
Body
Readable paragraph text for long-form content. Optimized for legibility.
Body
Visual Scale
16px
Body Large
14px
Body Medium
12px
Body Small
Font:
RobotoSize:16pxWeight:400Line:24pxSpacing:0.5pxPrimary body text
Font:
RobotoSize:14pxWeight:400Line:20pxSpacing:0.25pxStandard body text
Font:
RobotoSize:12pxWeight:400Line:16pxSpacing:0.4pxCaptions, annotations
Label
Utility text for buttons, tabs, chips, and form labels. Compact and scannable.
Label
Visual Scale
14px
Label Large
12px
Label Medium
11px
Label Small
Font:
Roboto MediumSize:14pxWeight:500Line:20pxSpacing:0.1pxButtons, navigation
Font:
Roboto MediumSize:12pxWeight:500Line:16pxSpacing:0.5pxTabs, badges
Font:
Roboto MediumSize:11pxWeight:500Line:16pxSpacing:0.5pxChips, small labels