iOS12界面设计指南之视觉设计(Visual Design)–字体(Typography)

引自《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 1Callout
Title 2Subhead
Title 3Footnote
HeadlineCaption 1
BodyCaption 2

确保自定义字体易读的(Make sure custom fonts are legible. )iOS支持自定义字体,但这些通常很难阅读。除非你的应用程序对自定义字体有强烈的需求,比如为了品牌的目的,或者为了创造一种身临其境的游戏体验,否则的话最好还是坚持使用系统字体。如果您使用自定义字体,请确保它很容易阅读,即使是小尺寸的字体。

实现自定义字体的辅助功能(Implement accessibility features for custom fonts.)系统字体自动响应诸如粗体文本和较大类型的可访问特性。使用自定义字体的应用程序应该实现相同的行为,检查是否启用了可访问性功能,并在变更时及时通知。

动态字体大小

San Francisco字体的设计无论在大小还是在尺寸上都是高度易读的。动态字体则提供了额外的灵活性,读者可以选择自己喜欢的文本大小。

在响应文本大小更改时将内容优先化(Prioritize content when responding to text-size changes)并非所有内容都同等重要。当有人选择更大的尺寸时,他们希望使他们关心的内容更容易阅读;他们并不总是希望屏幕上的每一个字都更大。

StyleWeightPoint sizeLeadingTracking
Title 1Regular25pt31pt14pt
Title 2Regular19pt23pt-26pt
Title 3Regular17pt21pt-24pt
Title 1
(iPhone SE)
Regular25pt31pt14pt
Title 2
(iPhone SE)
Regular19pt23pt-26pt
Title 3
(iPhone SE)
Regular17pt21pt-24pt
HeadlineSemi-Bold14pt19pt-11pt
BodyRegular14pt19pt-11pt
CalloutRegular13pt18pt-6pt
SubheadRegular12pt16pt0pt
FootnoteRegular12pt16pt0pt
Caption 1Regular11pt13pt6pt
Caption 2Regular11pt13pt6pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular26pt32pt14pt
Title 2Regular20pt24pt19pt
Title 3Regular18pt22pt-25pt
Title 1 (iPhone SE)Regular26pt32pt14pt
Title 2 (iPhone SE)Regular20pt24pt19pt
Title 3 (iPhone SE)Regular18pt22pt-25pt
HeadlineSemi-Bold15pt20pt-16pt
BodyRegular15pt20pt-16pt
CalloutRegular14pt19pt-11pt
SubheadRegular13pt18pt-6pt
FootnoteRegular12pt16pt0pt
Caption 1Regular11pt13pt6pt
Caption 2Regular11pt13pt6pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular27pt33pt13pt
Title 2Regular21pt26pt17pt
Title 3Regular19pt23pt-26pt
Title 1 (iPhone SE)Regular26pt32pt14pt
Title 2 (iPhone SE)Regular20pt24pt19pt
Title 3 (iPhone SE)Regular19pt23pt-26pt
HeadlineSemi-Bold16pt21pt-20pt
BodyRegular16pt21pt-20pt
CalloutRegular15pt20pt-16pt
SubheadRegular14pt19pt-11pt
FootnoteRegular12pt16pt0pt
Caption 1Regular11pt13pt6pt
Caption 2Regular11pt13pt6pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular28pt34pt13pt
Title 2Regular22pt28pt16pt
Title 3Regular20pt24pt19pt
Title 1 (iPhone SE)Regular26pt32pt14pt
Title 2 (iPhone SE)Regular20pt24pt19pt
Title 3 (iPhone SE)Regular20pt24pt19pt
HeadlineSemi-Bold17pt22pt-24pt
BodyRegular17pt22pt-24pt
CalloutRegular16pt21pt-20pt
SubheadRegular15pt20pt-16pt
FootnoteRegular13pt18pt-6pt
Caption 1Regular12pt16pt0pt
Caption 2Regular11pt13pt6pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular30pt36pt12pt
Title 2Regular24pt30pt15pt
Title 3Regular22pt27pt16pt
Title 1 (iPhone SE)Regular27pt33pt13pt
Title 2 (iPhone SE)Regular21pt26pt17pt
Title 3 (iPhone SE)Regular21pt26pt17pt
HeadlineSemi-Bold19pt24pt-26pt
BodyRegular19pt24pt-26pt
CalloutRegular18pt23pt-25pt
SubheadRegular17pt22pt-24pt
FootnoteRegular15pt20pt-16pt
Caption 1Regular14pt19pt-11pt
Caption 2Regular13pt18pt-6pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular32pt39pt12pt
Title 2Regular26pt32pt14pt
Title 3Regular24pt29pt15pt
Title 1 (iPhone SE)Regular28pt34pt13pt
Title 2 (iPhone SE)Regular22pt28pt16pt
Title 3 (iPhone SE)Regular22pt28pt16pt
HeadlineSemi-Bold21pt26pt17pt
BodyRegular21pt26pt17pt
CalloutRegular20pt25pt19pt
SubheadRegular19pt24pt-26pt
FootnoteRegular17pt22pt-24pt
Caption 1Regular16pt21pt-20pt
Caption 2Regular15pt20pt-16pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular34pt41pt11pt
Title 2Regular28pt34pt13pt
Title 3Regular26pt32pt14pt
Title 1 (iPhone SE)Regular30pt36pt12pt
Title 2 (iPhone SE)Regular24pt30pt15pt
Title 3 (iPhone SE)Regular24pt30pt15pt
HeadlineSemi-Bold23pt28pt16pt
BodyRegular23pt28pt16pt
CalloutRegular22pt27pt16pt
SubheadRegular21pt26pt17pt
FootnoteRegular19pt24pt-26pt
Caption 1Regular18pt23pt-25pt
Caption 2Regular17pt22pt-24pt

较大可访问类型大小

除了标准的动态类型大小外,系统还为需要可访问性的用户提供了更大的类型大小。

StyleWeightPoint sizeLeadingTracking
Title 1Regular41pt48pt10pt
Title 2Regular34pt41pt11pt
Title 3Regular31pt38pt12pt
Title 1 (iPhone SE)Regular36pt42pt11pt
Title 2 (iPhone SE)Regular29pt35pt13pt
Title 3 (iPhone SE)Regular29pt35pt13pt
HeadlineSemi-Bold28pt34pt13pt
BodyRegular28pt34pt13pt
CalloutRegular26pt32pt14pt
SubheadRegular25pt31pt14pt
FootnoteRegular23pt28pt16pt
Caption 1Regular22pt27pt16pt
Caption 2Regular20pt24pt19pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular49pt58pt8pt
Title 2Regular40pt48pt10pt
Title 3Regular37pt44pt11pt
Title 1 (iPhone SE)Regular43pt50pt10pt
Title 2 (iPhone SE)Regular35pt41pt11pt
Title 3 (iPhone SE)Regular35pt41pt11pt
HeadlineSemi-Bold33pt40pt12pt
BodyRegular33pt40pt11pt
CalloutRegular32pt39pt12pt
SubheadRegular30pt36pt12pt
FootnoteRegular27pt33pt13pt
Caption 1Regular26pt32pt14pt
Caption 2Regular24pt29pt15pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular59pt68pt5pt
Title 2Regular48pt58pt8pt
Title 3Regular45pt54pt9pt
Title 1 (iPhone SE)Regular52pt60pt7pt
Title 2 (iPhone SE)Regular41pt48pt10pt
Title 3 (iPhone SE)Regular41pt48pt10pt
HeadlineSemi-Bold40pt48pt10pt
BodyRegular40pt48pt10pt
CalloutRegular38pt46pt11pt
SubheadRegular36pt42pt11pt
FootnoteRegular33pt40pt11pt
Caption 1Regular32pt39pt12pt
Caption 2Regular29pt35pt13pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular69pt80pt2pt
Title 2Regular57pt66pt5pt
Title 3Regular53pt62pt6pt
Title 1 (iPhone SE)Regular61pt70pt4pt
Title 2 (iPhone SE)Regular49pt58pt8pt
Title 3 (iPhone SE)Regular49pt58pt8pt
HeadlineSemi-Bold47pt56pt9pt
BodyRegular47pt56pt9pt
CalloutRegular44pt54pt9pt
SubheadRegular42pt50pt10pt
FootnoteRegular38pt46pt11pt
Caption 1Regular37pt44pt11pt
Caption 2Regular34pt41pt11pt

StyleWeightPoint sizeLeadingTracking
Title 1Regular79pt90pt0pt
Title 2Regular65pt76pt3pt
Title 3Regular60pt70pt4pt
Title 1 (iPhone SE)Regular70pt80pt2pt
Title 2 (iPhone SE)Regular56pt66pt5pt
Title 3 (iPhone SE)Regular56pt66pt5pt
HeadlineSemi-Bold53pt62pt6pt
BodyRegular53pt62pt6pt
CalloutRegular51pt60pt7pt
SubheadRegular49pt58pt8pt
FootnoteRegular44pt54pt9pt
Caption 1Regular43pt50pt10pt
Caption 2Regular40pt48pt10pt

字体使用和调试

在界面设计中使用正确的字体变形(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
6pt41pt
8pt26pt
9pt19pt
10pt12pt
11pt6pt
12pt0pt
13pt-6pt
14pt-11pt
15pt-16pt
16pt-20pt
17pt-24pt
18pt-25pt
19pt-26pt

Point size @2x(144 ppi)Tracking
20pt19pt
21pt17pt
22pt16pt
24pt15pt
25pt14pt
27pt13pt
30pt12pt
33pt11pt
40pt10pt
44pt9pt
48pt8pt
50pt7pt
53pt6pt
56pt5pt
60pt4pt
65pt3pt
69pt2pt
79pt + up0pt