IOS 12设计规范(5-6)视觉设计:排版 (Typography)

点击前往本读书笔记总目录

5.6      排版 (Typography)

San Francisco (SF) 是iOS 系统的默认英⽂字体:这种字型的字体经过了优化, 使你的文本具有无与伦比的可读性、清晰性和一致性。点击这里下载 SanFrancisco 系列列字体。iOS使用 San Francisco 字体作为拉丁、希腊和⻄西里尔字⺟母的系统字体,以及其他的各种字体。

IOS12设计规范

强调重要信息: 使用字重、字体⼤小和颜⾊来突出 App 中最重要的信息。 如果可以的话,只使用一种字体,混合几种不同的字体可能会让你的  App  显得支离破碎和草率。考虑使用一种字体,只使用少量的字体的变体和⼤⼩。

尽可能使用内置的文本样式:   内置的文本样式允许您以视觉上不同的方式来表达内容,同时保持最优的易读性。这些样式是基于系统字体的,允许你利利用关键的排版特性,比如动态类型,它⾃动调整跟踪,并为每种字体⼤小提供引导。

iOS 包含以下⽂⽂本样式
⼤标题 三级标题 插图编号 ⼀级说明
⼀级标题 内容提要 ⼩标题 ⼆级说明
⼆级标题 正⽂ 脚注(补充说明)

开发者指南,请参阅 UIFontTextStyle。

确保字体是清晰的: 在 iOS 上支持自定义字体,但通常不利利于阅读。除非你的应用对定制字体有迫切需求,比如为品牌设计或创造一种沉浸式游戏体验,否则最好还是坚持使用系统字体。如果你使用⿎定义字体,请确保它易于阅读,即使是很⼩的字体。

实现⿎定义字体的辅助功能:系统字体会⾃动对辅助功能做出反应,比如加粗字体和放⼤文本。 使用自定义字体的App应检查是否启用辅助功能并实现相同的行为。

请参阅 Accessibility。

动态类型⼤⼩

 San Francisco 字体的设计的⼤号字体和⼩号字体都很清晰。动态类型通过让读者选择他们喜欢的文本⼤⼩来提供额外的灵活性。

在响应文本⼤小的变化时,优先考虑内容: 并不是所有的内容都同样重要。当用户选择更⼤的尺⼨寸时,他们想要让他们所关心的内容更容易阅读;他们并不总是希望屏幕上的每一个字都变⼤。

XXSmall 

类型 字重 磅值 行距 字距
⼤标题 常规 31pt 38pt 12pt
⼀级标题 常规 25pt 31pt 14pt
⼆级标题 常规 19pt 24pt -26pt
三级标题 常规 17pt 22pt -24pt
内容提要 半粗体 14pt 19pt -11pt
正⽂⽂ 常规 14pt 19pt -11pt
插图编号 常规 13pt 18pt -6pt
副标题 常规 12pt 16pt 0pt
脚注 常规 12pt 16pt 0pt
⼀级说明⽂字 常规 11pt 13pt 6pt
⼆级说明⽂字 常规 11pt 13pt 6pt

 

Small 

类型 字重 磅值 行距 字距
⼤标题 常规 32pt 49pt 12pt
⼀级标题 常规 26pt 32pt 14pt
⼆级标题 常规 20pt 25pt 19pt
三级标题 常规 18pt 23pt -25pt
内容提要 半粗体 15pt 20pt -16pt
正⽂⽂ 常规 15pt 20pt -16pt
插图编号 常规 14pt 19pt -11pt
副标题 常规 13pt 18pt -6pt
脚注 常规 12pt 16pt 0pt
⼀级说明⽂字 常规 11pt 13pt 6pt
⼆级说明⽂字 常规 11pt 13pt 6pt

 

Medium

类型 字重 磅值 行距 字距
⼤标题 常规 33pt 40pt 11pt
⼀级标题 常规 27pt 33pt 13pt
⼆级标题 常规 21pt 26pt 17pt
三级标题 常规 19pt 24pt -26pt
内容提要 半粗体 16pt 21pt -20pt
正⽂⽂ 常规 16pt 21pt -20pt
插图编号 常规 15pt 20pt -16pt
副标题 常规 14pt 19pt -11pt
脚注 常规 12pt 16pt 0pt
⼀级说明⽂字 常规 11pt 13pt 6pt
⼆级说明⽂字 常规 11pt 13pt 6pt

 

XLarge(Default) 

类型 字重 磅值 行距 字距
⼤标题 常规 34pt 41pt 11pt
⼀级标题 常规 28pt 34pt 13pt
⼆级标题 常规 22pt 28pt 16pt
三级标题 常规 20pt 25pt 19pt
内容提要 半粗体 17pt 22pt -24pt
正⽂⽂ 常规 17pt 22pt -24pt
插图编号 常规 16pt 21pt -20pt
副标题 常规 15pt 20pt -16pt
脚注 常规 13pt 18pt -6pt
⼀级说明⽂字 常规 12pt 16pt 0pt
⼆级说明⽂字 常规 11pt 13pt 6pt

 

XLarge 

类型 字重 磅值 行距 字距
⼤标题 常规 36pt 43pt 11pt
⼀级标题 常规 30pt 37pt 12pt
⼆级标题 常规 24pt 30pt 15pt
三级标题 常规 22pt 28pt 16pt
内容提要 半粗体 19pt 24pt -26pt
正⽂⽂ 常规 19pt 24pt -26pt
插图编号 常规 18pt 23pt -25pt
副标题 常规 17pt 22pt -24pt
脚注 常规 15pt 20pt -16pt
⼀级说明⽂字 常规 14pt 19pt -11pt
⼆级说明⽂字 常规 13pt 18pt -6pt

 

XXLarge 

类型 字重 磅值 行距 字距
⼤标题 常规 38pt 46pt 11pt
⼀级标题 常规 32pt 39pt 12pt
⼆级标题 常规 26pt 32pt 14pt
三级标题 常规 24pt 30pt 15pt
内容提要 半粗体 21pt 26pt 17pt
正⽂⽂ 常规 21pt 26pt 17pt
插图编号 常规 20pt 25pt 19pt
副标题 常规 19pt 24pt -26pt
脚注 常规 17pt 22pt -24pt
⼀级说明⽂字 常规 16pt 21pt -20pt
⼆级说明⽂字 常规 15pt 20pt -16pt

 

 XXXLarge 

类型 字重 磅值 行距 字距
⼤标题 常规 40pt 48pt 10pt
⼀级标题 常规 34pt 41pt 11pt
⼆级标题 常规 28pt 34pt 13pt
三级标题 常规 26pt 32pt 14pt
内容提要 半粗体 23pt 28pt 16pt
正⽂⽂ 常规 23pt 28pt 16pt
插图编号 常规 22pt 27pt 16pt
副标题 常规 21pt 26pt 17pt
脚注 常规 19pt 24pt -26pt
⼀级说明⽂字 常规 18pt 23pt -25pt
⼆级说明⽂字 常规 17pt 22pt -24pt

 更⼤的可访问类型尺⼨

 除了标准的动态类型⼤⼩之外,系统还为具有应用需求的用户提供了一些更⼤的类型。

AX1 

类型 字重 磅值 行距 字距
⼤标题 常规 44pt 52pt 9pt
⼀级标题 常规 38pt 46pt 11pt
⼆级标题 常规 34pt 41pt 11pt
三级标题 常规 31pt 38pt 12pt
内容提要 半粗体 28pt 34pt 13pt
正⽂ 常规 28pt 34pt 13pt
插图编号 常规 26pt 32pt 14pt
副标题 常规 25pt 31pt 14pt
脚注 常规 23pt 29pt 16pt
⼀级说明⽂字 常规 22pt 28pt 16pt
⼆级说明⽂字 常规 20pt 25pt 19pt

 

AX2

类型 字重 磅值 行距 字距
⼤标题 常规 48pt 57pt 8pt
⼀级标题 常规 43pt 51pt 10pt
⼆级标题 常规 39pt 47pt 10pt
三级标题 常规 37pt 44pt 11pt
内容提要 半粗体 33pt 40pt 12pt
正⽂ 常规 33pt 40pt 11pt
插图编号 常规 32pt 39pt 12pt
副标题 常规 30pt 37pt 12pt
脚注 常规 27pt 33pt 13pt
⼀级说明⽂字 常规 26pt 32pt 14pt
常规 24pt

 

AX3

类型 字重 磅值 行距 字距
⼤标题 常规 52pt 61pt 7pt
⼀级标题 常规 48pt 57pt 8pt
⼆级标题 常规 44pt 52pt 9pt
三级标题 常规 43pt 51pt 10pt
内容提要 半粗体 40pt 48pt 10pt
正⽂ 常规 40pt 48pt 10pt
插图编号 常规 38pt 46pt 11pt
副标题 常规 36pt 43pt 11pt
脚注 常规 33pt 40pt 11pt
⼀级说明⽂字 常规 32pt 39pt 12pt
⼆级说明⽂字 常规 29pt 35pt 13pt

 

AX4 

类型 字重 磅值 行距 字距
⼤标题 常规 56pt 66pt 5pt
⼀级标题 常规 53pt 62pt 6pt
⼆级标题 常规 50pt 59pt 7pt
三级标题 常规 49pt 58pt 8pt
内容提要 半粗体 47pt 56pt 9pt
正⽂ 常规 47pt 56pt 9pt
插图编号 常规 44pt 52pt 9pt
副标题 常规 42pt 50pt 10pt
脚注 常规 38pt 46pt 11pt
⼀级说明⽂字 常规 37pt 44pt 11pt
⼆级说明⽂字 常规 34pt 41pt 11pt

 

AX5 

类型 字重 磅值 行距 字距
⼤标题 常规 60pt 70pt 4pt
⼀级标题 常规 58pt 68pt 5pt
⼆级标题 常规 56pt 66pt 5pt
常规 55pt
内容提要 半粗体 53pt 62pt 6pt
常规 53pt
插图编号 常规 51pt 60pt 7pt
常规 49pt
脚注 常规 44pt 52pt 9pt
常规 43pt
⼆级说明⽂字 常规 40pt 48pt 10pt

不是所有 App 都用 1/1000em 来表示字间距。磅值⼤⼩基于 @2x 的图像分辨率为144 ppi,@3x的图像分辨率为216 ppi。

字体用法和字距 

在界面原型中使用正确的字体和字形变体: 使用 SF Pro 文本来显示文本19 磅或更小的文本,以及在文本20磅或更⼤的文本中显示文本。当你在标准控 件中使用 San Francisco 的文本,比如按钮和标注,iOS 会⾃动根据磅值和 用户的可访问性设置应用最合适的变体,并适当地调整字距。

在 iOS 10 中 San Francisco 字体的变体是 SF UI Tex 和 SF UI Display。

SF Pro Text 

144ppi下两倍率 字体磅值 字距
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

 

SF Pro Display 

144ppi下两倍率 字体磅值 字距
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

 不是所有 App 都用 1/1000em 来表示字间距。磅值⼤⼩基于 @2x 的图像分辨率为 144ppi,@3x的图像分辨率为 216ppi。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(5-6)视觉设计:排版 (Typography)

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏