引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》
San Francisco (SF)是IOS中的系统字体。系统对这种字体进行了优化,给你的文字无法比拟的易读性,清晰性和一致性。

IOS使用San Francisco作为Latin,Greek,Cyrillic alphabets以及其它描述文字字体
强调重要信息(Emphasize important information.)使用字体粗细、大小和颜色来突出应用程序中最重要的信息。
如果可能的话,只使用一种类型字体(If possible, use a single typeface.)混合几种不同的字体会使你的应用程序看起来支离破碎。尽可能的只使用一种字体和以及叫少量的字体变化和大小。
尽可能使用内置的文本样式(Use built-in text styles whenever possible.)内置的文本风格可以使你的应用在保持各种不同内容展示的基础上,同时保留最佳的易读性。这些样式是基于系统本身的各种优势性特征实现的,如动态类型,它可以自动调整每个字体的大小。IOS包含以下文本样式:
Title 1 | Callout |
Title 2 | Subhead |
Title 3 | Footnote |
Headline | Caption 1 |
Body | Caption 2 |
确保自定义字体易读的(Make sure custom fonts are legible. )iOS支持自定义字体,但这些通常很难阅读。除非你的应用程序对自定义字体有强烈的需求,比如为了品牌的目的,或者为了创造一种身临其境的游戏体验,否则的话最好还是坚持使用系统字体。如果您使用自定义字体,请确保它很容易阅读,即使是小尺寸的字体。
实现自定义字体的辅助功能(Implement accessibility features for custom fonts.)系统字体自动响应诸如粗体文本和较大类型的可访问特性。使用自定义字体的应用程序应该实现相同的行为,检查是否启用了可访问性功能,并在变更时及时通知。
动态字体大小
San Francisco字体的设计无论在大小还是在尺寸上都是高度易读的。动态字体则提供了额外的灵活性,读者可以选择自己喜欢的文本大小。
在响应文本大小更改时将内容优先化(Prioritize content when responding to text-size changes)并非所有内容都同等重要。当有人选择更大的尺寸时,他们希望使他们关心的内容更容易阅读;他们并不总是希望屏幕上的每一个字都更大。
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 25pt | 31pt | 14pt |
Title 2 | Regular | 19pt | 23pt | -26pt |
Title 3 | Regular | 17pt | 21pt | -24pt |
Title 1 (iPhone SE) | Regular | 25pt | 31pt | 14pt |
Title 2 (iPhone SE) | Regular | 19pt | 23pt | -26pt |
Title 3 (iPhone SE) | Regular | 17pt | 21pt | -24pt |
Headline | Semi-Bold | 14pt | 19pt | -11pt |
Body | Regular | 14pt | 19pt | -11pt |
Callout | Regular | 13pt | 18pt | -6pt |
Subhead | Regular | 12pt | 16pt | 0pt |
Footnote | Regular | 12pt | 16pt | 0pt |
Caption 1 | Regular | 11pt | 13pt | 6pt |
Caption 2 | Regular | 11pt | 13pt | 6pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 26pt | 32pt | 14pt |
Title 2 | Regular | 20pt | 24pt | 19pt |
Title 3 | Regular | 18pt | 22pt | -25pt |
Title 1 (iPhone SE) | Regular | 26pt | 32pt | 14pt |
Title 2 (iPhone SE) | Regular | 20pt | 24pt | 19pt |
Title 3 (iPhone SE) | Regular | 18pt | 22pt | -25pt |
Headline | Semi-Bold | 15pt | 20pt | -16pt |
Body | Regular | 15pt | 20pt | -16pt |
Callout | Regular | 14pt | 19pt | -11pt |
Subhead | Regular | 13pt | 18pt | -6pt |
Footnote | Regular | 12pt | 16pt | 0pt |
Caption 1 | Regular | 11pt | 13pt | 6pt |
Caption 2 | Regular | 11pt | 13pt | 6pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 27pt | 33pt | 13pt |
Title 2 | Regular | 21pt | 26pt | 17pt |
Title 3 | Regular | 19pt | 23pt | -26pt |
Title 1 (iPhone SE) | Regular | 26pt | 32pt | 14pt |
Title 2 (iPhone SE) | Regular | 20pt | 24pt | 19pt |
Title 3 (iPhone SE) | Regular | 19pt | 23pt | -26pt |
Headline | Semi-Bold | 16pt | 21pt | -20pt |
Body | Regular | 16pt | 21pt | -20pt |
Callout | Regular | 15pt | 20pt | -16pt |
Subhead | Regular | 14pt | 19pt | -11pt |
Footnote | Regular | 12pt | 16pt | 0pt |
Caption 1 | Regular | 11pt | 13pt | 6pt |
Caption 2 | Regular | 11pt | 13pt | 6pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 28pt | 34pt | 13pt |
Title 2 | Regular | 22pt | 28pt | 16pt |
Title 3 | Regular | 20pt | 24pt | 19pt |
Title 1 (iPhone SE) | Regular | 26pt | 32pt | 14pt |
Title 2 (iPhone SE) | Regular | 20pt | 24pt | 19pt |
Title 3 (iPhone SE) | Regular | 20pt | 24pt | 19pt |
Headline | Semi-Bold | 17pt | 22pt | -24pt |
Body | Regular | 17pt | 22pt | -24pt |
Callout | Regular | 16pt | 21pt | -20pt |
Subhead | Regular | 15pt | 20pt | -16pt |
Footnote | Regular | 13pt | 18pt | -6pt |
Caption 1 | Regular | 12pt | 16pt | 0pt |
Caption 2 | Regular | 11pt | 13pt | 6pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 30pt | 36pt | 12pt |
Title 2 | Regular | 24pt | 30pt | 15pt |
Title 3 | Regular | 22pt | 27pt | 16pt |
Title 1 (iPhone SE) | Regular | 27pt | 33pt | 13pt |
Title 2 (iPhone SE) | Regular | 21pt | 26pt | 17pt |
Title 3 (iPhone SE) | Regular | 21pt | 26pt | 17pt |
Headline | Semi-Bold | 19pt | 24pt | -26pt |
Body | Regular | 19pt | 24pt | -26pt |
Callout | Regular | 18pt | 23pt | -25pt |
Subhead | Regular | 17pt | 22pt | -24pt |
Footnote | Regular | 15pt | 20pt | -16pt |
Caption 1 | Regular | 14pt | 19pt | -11pt |
Caption 2 | Regular | 13pt | 18pt | -6pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 32pt | 39pt | 12pt |
Title 2 | Regular | 26pt | 32pt | 14pt |
Title 3 | Regular | 24pt | 29pt | 15pt |
Title 1 (iPhone SE) | Regular | 28pt | 34pt | 13pt |
Title 2 (iPhone SE) | Regular | 22pt | 28pt | 16pt |
Title 3 (iPhone SE) | Regular | 22pt | 28pt | 16pt |
Headline | Semi-Bold | 21pt | 26pt | 17pt |
Body | Regular | 21pt | 26pt | 17pt |
Callout | Regular | 20pt | 25pt | 19pt |
Subhead | Regular | 19pt | 24pt | -26pt |
Footnote | Regular | 17pt | 22pt | -24pt |
Caption 1 | Regular | 16pt | 21pt | -20pt |
Caption 2 | Regular | 15pt | 20pt | -16pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 34pt | 41pt | 11pt |
Title 2 | Regular | 28pt | 34pt | 13pt |
Title 3 | Regular | 26pt | 32pt | 14pt |
Title 1 (iPhone SE) | Regular | 30pt | 36pt | 12pt |
Title 2 (iPhone SE) | Regular | 24pt | 30pt | 15pt |
Title 3 (iPhone SE) | Regular | 24pt | 30pt | 15pt |
Headline | Semi-Bold | 23pt | 28pt | 16pt |
Body | Regular | 23pt | 28pt | 16pt |
Callout | Regular | 22pt | 27pt | 16pt |
Subhead | Regular | 21pt | 26pt | 17pt |
Footnote | Regular | 19pt | 24pt | -26pt |
Caption 1 | Regular | 18pt | 23pt | -25pt |
Caption 2 | Regular | 17pt | 22pt | -24pt |
较大可访问类型大小
除了标准的动态类型大小外,系统还为需要可访问性的用户提供了更大的类型大小。
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 41pt | 48pt | 10pt |
Title 2 | Regular | 34pt | 41pt | 11pt |
Title 3 | Regular | 31pt | 38pt | 12pt |
Title 1 (iPhone SE) | Regular | 36pt | 42pt | 11pt |
Title 2 (iPhone SE) | Regular | 29pt | 35pt | 13pt |
Title 3 (iPhone SE) | Regular | 29pt | 35pt | 13pt |
Headline | Semi-Bold | 28pt | 34pt | 13pt |
Body | Regular | 28pt | 34pt | 13pt |
Callout | Regular | 26pt | 32pt | 14pt |
Subhead | Regular | 25pt | 31pt | 14pt |
Footnote | Regular | 23pt | 28pt | 16pt |
Caption 1 | Regular | 22pt | 27pt | 16pt |
Caption 2 | Regular | 20pt | 24pt | 19pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 49pt | 58pt | 8pt |
Title 2 | Regular | 40pt | 48pt | 10pt |
Title 3 | Regular | 37pt | 44pt | 11pt |
Title 1 (iPhone SE) | Regular | 43pt | 50pt | 10pt |
Title 2 (iPhone SE) | Regular | 35pt | 41pt | 11pt |
Title 3 (iPhone SE) | Regular | 35pt | 41pt | 11pt |
Headline | Semi-Bold | 33pt | 40pt | 12pt |
Body | Regular | 33pt | 40pt | 11pt |
Callout | Regular | 32pt | 39pt | 12pt |
Subhead | Regular | 30pt | 36pt | 12pt |
Footnote | Regular | 27pt | 33pt | 13pt |
Caption 1 | Regular | 26pt | 32pt | 14pt |
Caption 2 | Regular | 24pt | 29pt | 15pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 59pt | 68pt | 5pt |
Title 2 | Regular | 48pt | 58pt | 8pt |
Title 3 | Regular | 45pt | 54pt | 9pt |
Title 1 (iPhone SE) | Regular | 52pt | 60pt | 7pt |
Title 2 (iPhone SE) | Regular | 41pt | 48pt | 10pt |
Title 3 (iPhone SE) | Regular | 41pt | 48pt | 10pt |
Headline | Semi-Bold | 40pt | 48pt | 10pt |
Body | Regular | 40pt | 48pt | 10pt |
Callout | Regular | 38pt | 46pt | 11pt |
Subhead | Regular | 36pt | 42pt | 11pt |
Footnote | Regular | 33pt | 40pt | 11pt |
Caption 1 | Regular | 32pt | 39pt | 12pt |
Caption 2 | Regular | 29pt | 35pt | 13pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 69pt | 80pt | 2pt |
Title 2 | Regular | 57pt | 66pt | 5pt |
Title 3 | Regular | 53pt | 62pt | 6pt |
Title 1 (iPhone SE) | Regular | 61pt | 70pt | 4pt |
Title 2 (iPhone SE) | Regular | 49pt | 58pt | 8pt |
Title 3 (iPhone SE) | Regular | 49pt | 58pt | 8pt |
Headline | Semi-Bold | 47pt | 56pt | 9pt |
Body | Regular | 47pt | 56pt | 9pt |
Callout | Regular | 44pt | 54pt | 9pt |
Subhead | Regular | 42pt | 50pt | 10pt |
Footnote | Regular | 38pt | 46pt | 11pt |
Caption 1 | Regular | 37pt | 44pt | 11pt |
Caption 2 | Regular | 34pt | 41pt | 11pt |
Style | Weight | Point size | Leading | Tracking |
---|---|---|---|---|
Title 1 | Regular | 79pt | 90pt | 0pt |
Title 2 | Regular | 65pt | 76pt | 3pt |
Title 3 | Regular | 60pt | 70pt | 4pt |
Title 1 (iPhone SE) | Regular | 70pt | 80pt | 2pt |
Title 2 (iPhone SE) | Regular | 56pt | 66pt | 5pt |
Title 3 (iPhone SE) | Regular | 56pt | 66pt | 5pt |
Headline | Semi-Bold | 53pt | 62pt | 6pt |
Body | Regular | 53pt | 62pt | 6pt |
Callout | Regular | 51pt | 60pt | 7pt |
Subhead | Regular | 49pt | 58pt | 8pt |
Footnote | Regular | 44pt | 54pt | 9pt |
Caption 1 | Regular | 43pt | 50pt | 10pt |
Caption 2 | Regular | 40pt | 48pt | 10pt |
字体使用和调试
在界面设计中使用正确的字体变形(Use the correct font variant in interface mockups.)使用SF Pro Text作为19点大小或更小的文本,而SF Pro Display作为20点大小或更大的文本。当在标准控件(如按钮和标签)中使用San Francisco作为文本时,iOS会根据点的大小和用户的可访问性设置自动应用最合适的变体,适当地调整字母之间的间距。
在iOS10中,San Francisco字体的变种主要为SF UI Text和SF UI Display。
Point size @2x(144 ppi) | Tracking |
---|---|
6pt | 41pt |
8pt | 26pt |
9pt | 19pt |
10pt | 12pt |
11pt | 6pt |
12pt | 0pt |
13pt | -6pt |
14pt | -11pt |
15pt | -16pt |
16pt | -20pt |
17pt | -24pt |
18pt | -25pt |
19pt | -26pt |
Point size @2x(144 ppi) | Tracking |
---|---|
20pt | 19pt |
21pt | 17pt |
22pt | 16pt |
24pt | 15pt |
25pt | 14pt |
27pt | 13pt |
30pt | 12pt |
33pt | 11pt |
40pt | 10pt |
44pt | 9pt |
48pt | 8pt |
50pt | 7pt |
53pt | 6pt |
56pt | 5pt |
60pt | 4pt |
65pt | 3pt |
69pt | 2pt |
79pt + up | 0pt |