Type System
Complete typography scale with 126 text styles, interactive tester, and hierarchy demos.
126 styles9 fonts10–76px
Typography stats
126
Styles
9
Families
10–76
Size range
100–900
Weights
Primary font
SF Pro Display
Scale Overview
34
28
22
20
17
17
16
15
13
12
11
26
22
17
15
13
13
12
11
10
10
10
36
34
28
22
16
16
15
14
76
57
48
38
31
29
26
23
20
56
44
36
28
24
21
21
19
17
15
13
34
28
22
20
17
17
16
15
13
12
11
44
48
52
56
60
28
33
40
47
53
17
14
12
10
14
14
36
22
16
16
14
36
22
17
17
17
17
17
17
17
17
17
17
10
17
15
17
17
17
13
17
13
20
17
15
13
13
12
21
17
17
13
11
12
17
22
28
34
34
28
22
20
17
17
12
iOS Typography Scale
Standard text styles for iOS applications using San Francisco font
Visual Scale
34px
Large Title
28px
Title 1
22px
Title 2
20px
Title 3
17px
Headline
17px
Body
16px
Callout
15px
Subheadline
13px
Footnote
12px
Caption 1
11px
Caption 2
Font:
SF Pro DisplaySize:34pxWeight:700Line:41pxSpacing:0.37pxNavigation bar titles, primary headings
Font:
SF Pro DisplaySize:28pxWeight:700Line:34pxSpacing:0.36pxSection titles, prominent headers
Font:
SF Pro DisplaySize:22pxWeight:700Line:28pxSpacing:0.35pxSecondary titles, card headers
Font:
SF Pro DisplaySize:20pxWeight:600Line:25pxSpacing:0.38pxTertiary titles, list headers
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxEmphasized body text, table row labels
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxPrimary body text, paragraphs
Font:
SF Pro TextSize:16pxWeight:400Line:21pxSpacing:-0.32pxSecondary body text, annotations
Font:
SF Pro TextSize:15pxWeight:400Line:20pxSpacing:-0.24pxSupporting text, metadata
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:-0.08pxSecondary labels, timestamps
Font:
SF Pro TextSize:12pxWeight:400Line:16pxSpacing:0pxImage captions, form hints
Font:
SF Pro TextSize:11pxWeight:400Line:13pxSpacing:0.07pxSmall captions, badges
macOS Typography Scale
Text styles for macOS applications using San Francisco font
Visual Scale
26px
Large Title
22px
Title 1
17px
Title 2
15px
Title 3
13px
Headline
13px
Body
12px
Callout
11px
Subheadline
10px
Footnote
10px
Caption 1
10px
Caption 2
Font:
SF Pro DisplaySize:26pxWeight:700Line:32pxSpacing:0.36pxWindow titles, major section headers
Font:
SF Pro DisplaySize:22pxWeight:700Line:26pxSpacing:0.35pxSection titles, prominent headers
Font:
SF Pro DisplaySize:17pxWeight:700Line:22pxSpacing:-0.41pxSecondary titles, sidebar headers
Font:
SF Pro DisplaySize:15pxWeight:600Line:20pxSpacing:-0.24pxTertiary titles, group headers
Font:
SF Pro TextSize:13pxWeight:700Line:16pxSpacing:-0.08pxEmphasized labels, toolbar items
Font:
SF Pro TextSize:13pxWeight:400Line:16pxSpacing:-0.08pxPrimary body text, paragraphs
Font:
SF Pro TextSize:12pxWeight:400Line:15pxSpacing:0pxSecondary body text, annotations
Font:
SF Pro TextSize:11pxWeight:400Line:14pxSpacing:0.07pxSupporting text, metadata
Font:
SF Pro TextSize:10pxWeight:400Line:13pxSpacing:0.12pxSecondary labels, timestamps
Font:
SF Pro TextSize:10pxWeight:400Line:13pxSpacing:0.12pxImage captions, form hints
Font:
SF Pro TextSize:10pxWeight:300Line:13pxSpacing:0.12pxSmall captions, fine print
watchOS Typography Scale
Text styles optimized for Apple Watch displays
Visual Scale
36px
Large Title
34px
Title 1
28px
Title 2
22px
Title 3
16px
Headline
16px
Body
15px
Caption 1
14px
Caption 2
Font:
SF Pro RoundedSize:36pxWeight:300Line:43pxSpacing:0.41pxTime display, major metrics
Font:
SF Pro RoundedSize:34pxWeight:300Line:41pxSpacing:0.37pxPrimary titles, workout stats
Font:
SF Pro RoundedSize:28pxWeight:400Line:34pxSpacing:0.36pxSecondary titles, complication values
Font:
SF Pro RoundedSize:22pxWeight:400Line:28pxSpacing:0.35pxTertiary titles, list headers
Font:
SF Pro TextSize:16pxWeight:600Line:21pxSpacing:-0.32pxEmphasized text, button labels
Font:
SF Pro TextSize:16pxWeight:400Line:21pxSpacing:-0.32pxPrimary body text, notifications
Font:
SF Pro TextSize:15pxWeight:400Line:20pxSpacing:-0.24pxCaptions, secondary info
Font:
SF Pro TextSize:14pxWeight:400Line:18pxSpacing:-0.16pxSmall text, timestamps
tvOS Typography Scale
Text styles for Apple TV optimized for 10-foot viewing distance
Visual Scale
76px
Large Title
57px
Title 1
48px
Title 2
38px
Title 3
31px
Headline
29px
Body
26px
Callout
23px
Caption 1
20px
Caption 2
Font:
SF Pro DisplaySize:76pxWeight:700Line:86pxSpacing:-1.0pxHero titles, movie titles
Font:
SF Pro DisplaySize:57pxWeight:600Line:68pxSpacing:-0.5pxSection titles, app names
Font:
SF Pro DisplaySize:48pxWeight:600Line:58pxSpacing:0pxSecondary titles
Font:
SF Pro DisplaySize:38pxWeight:500Line:48pxSpacing:0pxTertiary titles, focused items
Font:
SF Pro TextSize:31pxWeight:600Line:40pxSpacing:0.34pxEmphasized labels
Font:
SF Pro TextSize:29pxWeight:400Line:38pxSpacing:0.32pxPrimary body text
Font:
SF Pro TextSize:26pxWeight:400Line:34pxSpacing:0.28pxSecondary body text
Font:
SF Pro TextSize:23pxWeight:400Line:30pxSpacing:0.25pxCaptions, metadata
Font:
SF Pro TextSize:20pxWeight:400Line:26pxSpacing:0.22pxSmall labels, timestamps
visionOS Typography Scale
Text styles for Apple Vision Pro spatial computing
Visual Scale
56px
Extra Large Title
44px
Large Title
36px
Title 1
28px
Title 2
24px
Title 3
21px
Headline
21px
Body
19px
Callout
17px
Subheadline
15px
Footnote
13px
Caption
Font:
SF Pro DisplaySize:56pxWeight:700Line:68pxSpacing:-0.5pxImmersive titles, window headers
Font:
SF Pro DisplaySize:44pxWeight:700Line:54pxSpacing:0pxPrimary titles, app names
Font:
SF Pro DisplaySize:36pxWeight:600Line:44pxSpacing:0pxSection titles
Font:
SF Pro DisplaySize:28pxWeight:600Line:36pxSpacing:0.36pxSecondary titles
Font:
SF Pro DisplaySize:24pxWeight:500Line:32pxSpacing:0.38pxTertiary titles
Font:
SF Pro TextSize:21pxWeight:600Line:28pxSpacing:-0.32pxEmphasized labels
Font:
SF Pro TextSize:21pxWeight:400Line:28pxSpacing:-0.32pxPrimary body text
Font:
SF Pro TextSize:19pxWeight:400Line:25pxSpacing:-0.24pxSecondary body text
Font:
SF Pro TextSize:17pxWeight:400Line:24pxSpacing:-0.16pxSupporting text
Font:
SF Pro TextSize:15pxWeight:400Line:21pxSpacing:-0.08pxSecondary labels
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:0pxCaptions, fine print
iPadOS Typography Scale
Text styles optimized for iPad's larger display
Visual Scale
34px
Large Title
28px
Title 1
22px
Title 2
20px
Title 3
17px
Headline
17px
Body
16px
Callout
15px
Subheadline
13px
Footnote
12px
Caption 1
11px
Caption 2
Font:
SF Pro DisplaySize:34pxWeight:700Line:41pxSpacing:0.37pxNavigation bar titles, primary headings
Font:
SF Pro DisplaySize:28pxWeight:700Line:34pxSpacing:0.36pxSection titles, prominent headers
Font:
SF Pro DisplaySize:22pxWeight:700Line:28pxSpacing:0.35pxSecondary titles, sidebar headers
Font:
SF Pro DisplaySize:20pxWeight:600Line:25pxSpacing:0.38pxTertiary titles, group headers
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxEmphasized body text
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxPrimary body text
Font:
SF Pro TextSize:16pxWeight:400Line:21pxSpacing:-0.32pxSecondary body text
Font:
SF Pro TextSize:15pxWeight:400Line:20pxSpacing:-0.24pxSupporting text
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:-0.08pxSecondary labels
Font:
SF Pro TextSize:12pxWeight:400Line:16pxSpacing:0pxImage captions
Font:
SF Pro TextSize:11pxWeight:400Line:13pxSpacing:0.07pxSmall captions
Dynamic Type - Accessibility Sizes
Larger text sizes for users with accessibility needs (iOS)
Visual Scale
44px
AX1 (Large Title)
48px
AX2 (Large Title)
52px
AX3 (Large Title)
56px
AX4 (Large Title)
60px
AX5 (Large Title)
28px
AX1 (Body)
33px
AX2 (Body)
40px
AX3 (Body)
47px
AX4 (Body)
53px
AX5 (Body)
Font:
SF Pro DisplaySize:44pxWeight:700Line:52pxSpacing:0.35pxFirst accessibility size level
Font:
SF Pro DisplaySize:48pxWeight:700Line:57pxSpacing:0.33pxSecond accessibility size level
Font:
SF Pro DisplaySize:52pxWeight:700Line:61pxSpacing:0.31pxThird accessibility size level
Font:
SF Pro DisplaySize:56pxWeight:700Line:66pxSpacing:0.29pxFourth accessibility size level
Font:
SF Pro DisplaySize:60pxWeight:700Line:70pxSpacing:0.27pxFifth accessibility size level
Font:
SF Pro TextSize:28pxWeight:400Line:34pxSpacing:0.36pxBody text accessibility size 1
Font:
SF Pro TextSize:33pxWeight:400Line:40pxSpacing:0.35pxBody text accessibility size 2
Font:
SF Pro TextSize:40pxWeight:400Line:48pxSpacing:0.34pxBody text accessibility size 3
Font:
SF Pro TextSize:47pxWeight:400Line:56pxSpacing:0.33pxBody text accessibility size 4
Font:
SF Pro TextSize:53pxWeight:400Line:62pxSpacing:0.32pxBody text accessibility size 5 (maximum)
SF Mono - Code & Technical
Monospace font for code, technical content, and tabular data
Visual Scale
17px
Code Large
14px
Code Medium
12px
Code Small
10px
Code XSmall
14px
Code Bold
14px
Tabular Numbers
Font:
SF MonoSize:17pxWeight:400Line:24pxSpacing:0pxCode blocks, technical documentation
Font:
SF MonoSize:14pxWeight:400Line:20pxSpacing:0pxInline code, file paths
Font:
SF MonoSize:12pxWeight:400Line:17pxSpacing:0pxTerminal output, dense code
Font:
SF MonoSize:10pxWeight:400Line:14pxSpacing:0pxLine numbers, minimap
Font:
SF MonoSize:14pxWeight:700Line:20pxSpacing:0pxEmphasized code, keywords
Font:
SF MonoSize:14pxWeight:400Line:20pxSpacing:0pxTables, data columns, counters
SF Compact - watchOS Native
Compact font optimized for Apple Watch display
Visual Scale
36px
Compact Large Title
22px
Compact Title
16px
Compact Headline
16px
Compact Body
14px
Compact Caption
36px
Compact Rounded Large
22px
Compact Rounded Title
Font:
SF Compact DisplaySize:36pxWeight:400Line:43pxSpacing:0.41pxTime display, large metrics
Font:
SF Compact DisplaySize:22pxWeight:600Line:28pxSpacing:0.35pxApp titles, section headers
Font:
SF Compact TextSize:16pxWeight:600Line:21pxSpacing:-0.32pxButton labels, emphasized text
Font:
SF Compact TextSize:16pxWeight:400Line:21pxSpacing:-0.32pxPrimary body text
Font:
SF Compact TextSize:14pxWeight:400Line:18pxSpacing:-0.16pxCaptions, timestamps
Font:
SF Compact RoundedSize:36pxWeight:300Line:43pxSpacing:0.41pxActivity metrics, friendly numerals
Font:
SF Compact RoundedSize:22pxWeight:500Line:28pxSpacing:0.35pxWorkout stats, rounded headings
Font Weights Reference
All available font weights in the San Francisco family
Visual Scale
17px
Ultralight
17px
Thin
17px
Light
17px
Regular
17px
Medium
17px
Semibold
17px
Bold
17px
Heavy
17px
Black
Font:
SF ProSize:17pxWeight:100Line:22pxSpacing:-0.41pxDecorative, display purposes only
Font:
SF ProSize:17pxWeight:200Line:22pxSpacing:-0.41pxLarge display text, subtle emphasis
Font:
SF ProSize:17pxWeight:300Line:22pxSpacing:-0.41pxDisplay headings, elegant text
Font:
SF ProSize:17pxWeight:400Line:22pxSpacing:-0.41pxBody text, default weight
Font:
SF ProSize:17pxWeight:500Line:22pxSpacing:-0.41pxSubtle emphasis, subheadings
Font:
SF ProSize:17pxWeight:600Line:22pxSpacing:-0.41pxHeadlines, emphasized text
Font:
SF ProSize:17pxWeight:700Line:22pxSpacing:-0.41pxTitles, strong emphasis
Font:
SF ProSize:17pxWeight:800Line:22pxSpacing:-0.41pxImpact text, maximum emphasis
Font:
SF ProSize:17pxWeight:900Line:22pxSpacing:-0.41pxDisplay only, extreme emphasis
Semantic Text Styles
Text styles for specific UI contexts and components
Visual Scale
17px
Navigation Title
10px
Tab Bar Label
17px
Button Label
15px
Small Button Label
17px
Text Field
17px
Text Field Placeholder
17px
Alert Title
13px
Alert Message
17px
Alert Button
13px
Action Sheet Title
20px
Action Sheet Button
17px
List Row Title
15px
List Row Subtitle
13px
List Section Header
13px
List Section Footer
12px
Badge Text
21px
Picker Item
17px
Date Picker
17px
Search Field
13px
Segmented Control
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxNavigation bar title (inline mode)
Font:
SF Pro TextSize:10pxWeight:500Line:12pxSpacing:0.12pxTab bar item labels
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxPrimary button text
Font:
SF Pro TextSize:15pxWeight:600Line:20pxSpacing:-0.24pxSecondary button text
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxText input content
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxPlaceholder text (tertiary color)
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxAlert dialog title
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:-0.08pxAlert dialog message body
Font:
SF Pro TextSize:17pxWeight:600Line:22pxSpacing:-0.41pxAlert action buttons
Font:
SF Pro TextSize:13pxWeight:600Line:18pxSpacing:-0.08pxAction sheet header
Font:
SF Pro TextSize:20pxWeight:400Line:25pxSpacing:0.38pxAction sheet options
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxTable/list cell primary text
Font:
SF Pro TextSize:15pxWeight:400Line:20pxSpacing:-0.24pxTable/list cell secondary text
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:-0.08pxGrouped list section titles
Font:
SF Pro TextSize:13pxWeight:400Line:18pxSpacing:-0.08pxGrouped list section footers
Font:
SF Pro TextSize:12pxWeight:500Line:14pxSpacing:0pxNotification badge numbers
Font:
SF Pro DisplaySize:21pxWeight:400Line:26pxSpacing:0.38pxPicker wheel items
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxDate/time picker values
Font:
SF Pro TextSize:17pxWeight:400Line:22pxSpacing:-0.41pxSearch bar text
Font:
SF Pro TextSize:13pxWeight:500Line:18pxSpacing:-0.08pxSegmented control labels
SF Symbols Text Integration
Symbol sizing to match text styles
Visual Scale
11px
Symbol XSmall
12px
Symbol Small
17px
Symbol Body
22px
Symbol Large
28px
Symbol XLarge
34px
Symbol XXLarge
Font:
SF ProSize:11pxWeight:400Line:13pxSpacing:0.07pxInline with Caption 2 text
Font:
SF ProSize:12pxWeight:400Line:16pxSpacing:0pxInline with Caption 1 text
Font:
SF ProSize:17pxWeight:400Line:22pxSpacing:-0.41pxInline with Body text
Font:
SF ProSize:22pxWeight:400Line:28pxSpacing:0.35pxInline with Title 2 text
Font:
SF ProSize:28pxWeight:400Line:34pxSpacing:0.36pxInline with Title 1 text
Font:
SF ProSize:34pxWeight:400Line:41pxSpacing:0.37pxInline with Large Title text
New York Serif
Serif font for reading and editorial content
Visual Scale
34px
NY Large Title
28px
NY Title 1
22px
NY Title 2
20px
NY Title 3
17px
NY Headline
17px
NY Body
12px
NY Caption
Font:
New YorkSize:34pxWeight:700Line:41pxSpacing:0.37pxEditorial headings, book titles
Font:
New YorkSize:28pxWeight:700Line:34pxSpacing:0.36pxArticle titles, chapter headings
Font:
New YorkSize:22pxWeight:700Line:28pxSpacing:0.35pxSection headings
Font:
New YorkSize:20pxWeight:600Line:25pxSpacing:0.38pxSubsection headings
Font:
New YorkSize:17pxWeight:600Line:22pxSpacing:-0.41pxEmphasized reading text
Font:
New YorkSize:17pxWeight:400Line:25pxSpacing:-0.41pxLong-form reading content
Font:
New YorkSize:12pxWeight:400Line:16pxSpacing:0pxImage captions, footnotes