了解扩充的 San Francisco 字体系列

♪ ♪ Vincenzo： 嗨 我叫 Vincenzo 我是 Apple 设计团队的 字体设计师 我是负责设计和扩展 我们平台中使用的 众多字体系列的小组成员 我们专注于 制作功能性和表现力出色的字体 这对于实现出色的排版至关重要 我将在这里分享一些关于 San Francisco 字体系列的精彩更新 并告诉您系统字体的 所有最新附加效果 我们将从 San Francisco 字体系列的概述开始 我会带您浏览各种可用的字体系列 样式和视觉尺寸 然后我将介绍 SF Pro 中新的宽度样式 紧缩、压缩和扩展字体 我还将分享一些示例 说明在设计用户界面时 如何以及为什么选择这些样式 最后 我将谈谈我们如何将 San Francisco 字体 的众多特点带入到其他书写系统中 然后介绍 SF Arabic 和 SF Arabic Rounded (SF 阿拉伯圆角字体) 让我们直接开始吧 从 San Francisco 字体的快速概览开始 San Francisco 字体 是一个功能多样的字体系列 由 Apple 设计 并在我们的平台上使用 多年来 San Francisco 字体 与生态系统的产品 和体验共同发展 提供新的字体风格和系列 能够适应 UI 设计的各种需求 今天 San Francisco 字体包括不同的字体系列 它们共享共同的视觉语言效果 但同时具有专为不同环境和 App 设计的独特视觉体验 例如 SF Pro 和 SF Pro Rounded 字体 我们许多平台中使用的主要系统字体 例如在 iOS、iPadOS macOS 和 tvOS 中的 SF Compact 和 SF Compact Rounded 字体 它们是 San Francisco 字体 的变体专门针对窄列和小点进行了优化 同时也是 watchOS 中 的默认系统字体 还有 SF Mono 一个等宽 SF 字体 用于 Xcode 和 Swift Playgrounds 等编码环境 所有这些字体系列 在一起提供了 庞大的特性和表达范围 它允许在各种环境的文本中呈现 大多数 SF 系列 都有一个全面的字体粗细调板 从细体 (Ultralight) 到 超黑体 (Black) 字体提供足够的风格变化 用来强调重点和规范排版层次结构 此外 大多数字体系列 都带有视觉尺寸 允许字体基于文本的磅值 自动调整某些设计特性 例如 将“i”顶部的点 移动到远离基本形状的位置 或扩张某些字母的开口 以及通过跟踪字间距 调整字母的开口和小点的位置 所有这些调整都优化了字体 并生成独特的设计结果 以适应不同的点大小 以便用于显示和文本排版 通过参考大文本 和小文本的排版条件 San Francisco 字体 为其提供了控制能力和灵活性 以便于在所有 Apple 平台上 一致地呈现清晰易读的界面 这里列出 SF 字体的一些亮点 但远不止这些 如果您想深入了解 视觉尺寸、可变字体 和动态字体 我鼓励您观看 来自 WWDC 2020 的 Loïc 和 Jiang 的课程“UI 排版的细节” 今天我们将专注于 SF Pro 这已经是一个令人难以置信 的设计 UI 的工具 然而 虽然字体的粗细和视觉尺寸 已经满足了许多设计师的需求 我们仍确定了一组仅靠粗细权重 和视轴无法完成的特殊任务 例如在 照片 App 中 我们扩展了“回忆”功能 中标题的风格变化 或者在 新闻 App 中 SF 字体以 富有表现力和空间利用率的风格 在标题和摘要中表现文字 最后 在 地图 App 中 为增加文字排版的对比度和易读性 而提供的更多风格选项 所以我们进一步扩展了 SF 字体的特性 通过设计一个新的视轴 在字体权重和视觉尺寸 已经可以调整的情况下 添加宽度轴 是 SF 字体的自然进化 加入常规宽度 我们还有另外三种样式 紧缩模式 狭窄且节省空间 压缩模式 目前 S​​F 中最紧凑的样式 最后但并非最不重要的 与之相对另一个字体样式扩展模式 这些都是 SF 字体系列中 新的可用宽度 结合了所有的权重 添加了大量选项 带来一整套新的表达和特性 以适应广泛的应用需求 这些风格有的比较中性 而另外的更有表现力 每种风格都有其自身的表现特性 但根据设计意图的不同 有些字体会比其他的表现更好 排版没有绝对的规则 但您可以认为这中间部分的字体 在 SF 字体的系列列表中 有一个更中性的表达 而周边的样式 具有更极端的粗细权重和宽高比例 他们更有表现力和更强的表达 如果希望将人们的注意力 吸引到 UI 的某个区域 或加强排版层次结构 这些属性可能很有用 让我们探索一下 这些风格的共同点和各自的特征 并学习如何在 选择和配对字体的过程中 做出更明智的决定 首先 所有样式都提供 相同的语言支持 并可用于排版大多数语言 它使用拉丁文字 从英语到越南语 还有希腊语和 基于西里尔字母系统的语言 所有样式的另一个共同点是 垂直比例 这样它们就可以在字体粗细上 没有任何视觉比例差异的情况下使用 这使得在文本中交换或混合字体 变得可预知和相对容易 因此 当使用不同的宽度样式时 您只需关注在宽度本身上 事实上 只有字形的水平比例会改变 当然 因为这个影响 每行文本的长度也会改变 逐渐缩小的比例突出了 风格之间不同的定义特点 这是每种样式的字型主干 粗细之间的关系 尽管有一些视觉调整 但仍然保持一致 相反 字形内的区域 则有一个更戏剧性的转变 根据宽度样式变得更紧缩或更宽 这种平衡在风格和功能上都有影响 除了字体的易读性 还有个性的不同 所以这里有一些关于 每种风格的注意事项 我敢肯定 常规宽度不会让人感到意外 是最普遍、最百搭的样式 它具有标准比例 使文本易于阅读 当其他宽度提供的功能 不是必需的时 您可以坚持使用常规宽度 紧缩样式与常规样式 相比看起来更窄 仍然具有舒适的宽度 它能让自己适应更多的文本的情况 而不会让人感到不适 压缩的特点是比例非常密集 具有平面形状 使设计变得更加紧凑 不仅非常节省空间 而且还具有图形化 和理想化的显示风格 最后 扩展样式 具有醒目的宽松开放的外观 可以在显示排版和更小的标签 及次要内容中找到用途 我们可以看到他们字体大小的变化 带来的样式改变 排版相同的文本 使用相同的粗细但宽度不同 提请注意这些新样式 最明显的用例之一 就是空间效率 事实上 我们可以注意到在相同的点大小下 SF 字体系列是如何变得更紧凑或更宽 还有我们如何将紧缩或 压缩排版扩大 同时仍然适合相同的行长度 这在处理标题和摘要时非常有用 但这些性能 不仅仅对显示尺寸有意义 事实上 宽度样式可以帮助 较长的文本段落 提供控制每行适合更多字符的能力 实现更理想、更舒适的 窄栏阅读体验 或者只是缩短或延长其中一行 以用于填充或释放布局中的空间 但是 这个示例还强调了 压缩样式虽然对于小的单行仍然有效 但对于较长的文本段落来说 可能还是太紧缩了 就像您在这里看到的那样 因此 在选择非常规宽度时 请始终考虑易读性 既然我们已经看到了 这些新样式的主要特征 下面让我通过几个例子 告诉您他们是如何 帮助我们改进和扩展 App 中的排版的 让我们从 照片 App 开始 其中新的宽度范围加入了其他风格 在“回忆”标题中 带来了更多的视觉吸引力 通过对 UI 其余部分 文字的排版 来增强氛围和提升内容的感觉 仔细看 我们可以看到 规模的差异影响了 排版层次的建立 清楚地告诉我们 哪个是主要信息 哪个是次要的 两种相对的宽度样式相互映衬 如压缩 (Compressed) 和扩展 (Expanded) 风格 承担使文本更具独特性 和视觉冲击力的工作 用不同的粗细权重 搭配 SF 的宽度和压缩风格 可以产生几乎无穷无尽的字体配对 例如 您可以决定 只使用一种宽度样式 在这种情况下展开 并使用产生对比的粗细度 例如最粗和最细 或者您可以选择一个粗细度 并使用不同的对比宽度 比如扩展和压缩形式 您还可以通过混合相反的字体宽度 和粗细来组合这两种方法 以获得更明显的对比感觉 与其他 San Francisco 字体系列一起 如 SF Pro Rounded、SF Mono 还有 New York、serif system font (衬线系统字体) 新的宽度风格 开启了一个可能的组合世界 在 新闻 App 中 除了补充 App 的编辑内容之外 宽度样式提供了 额外的灵活性和实用性 就像在这个例子中一样 使用紧缩字体可以 让长标题更节省空间 换成四行而不是五行 甚至如果用压缩字体 可以使标题减少到三行 这在布局上打开了不少空间 以及让标题看上去像站起来一样 让它更有个性 还要注意扩展宽度 是如何用来对比标题的 在标题和署名中感到宾至如归 我们可以在 地图 App 中看到扩展 字体的另一个具体但非常有趣的用例 这种风格的宽度水平比例 当用于表示大的地理区域时 与松散的寻迹文本 完美地结合在一起 例如山脉的文本 当然 制图不仅仅与山脉有关 事实上 地图 采用了 SF 系列的其他宽度风格来打造丰富的排版系统 风格相对连贯 但也彼此多样化 更容易阅读和区分各种标签 例如道路、国家、大陆等 而在大多数情况下 要设计一个有效的层次结构 使用两种或三种样式就足够了 这很好地展示了 SF Pro 如何支持 即使是最复杂的图形系统 这些只是如何利用新宽度样式 的几个例子 扩展的功能和表达的范围 使 SF Pro 字体 成为一个更强大的沟通工具 然而 强大的排版能力 也带来了巨大的责任 请记住 字体是旨在 使界面美观的设计工具 最重要的依旧是文字的清晰易读 让我们快速回顾一下 所做的一些考虑 关于新的 Compressed (压缩)、Condensed (紧凑) 和 Expanded (扩展) 样式 首先也是最重要的是 新的宽度样式 解锁了前所未有的控制级别 使您能够让文本变得更宽或更紧凑 以有效地设计和安排 App 中的排版元素 此外 除了粗细、尺寸和颜色 新的宽度样式提供了 更多的样式选项 创建更加清晰和精确的 排版层次结构 具有更极端的字体粗细 和宽度比例的字体 提供在显示文字小点 在大小上的表现力 从 UI 的其余部分 提升标题和摘要的表现力 所有 SF Pro 字体 都涵盖了大多数使用拉丁文 希腊字母和西里尔字母的语言 但是 如果本地化是您的 App 的一个重要方面 并且您希望提供 跨多个书写系统的一致性体验 除了前面提到的内容之外 您还要确保有一个后备计划 通过确定可以帮助您进行 App 本地化的替代解决方案 好的 所以我们确实了解了 系统字体的许多新功能 但我们还没有结束 字体系列扩大还有另一种方式 在 Apple 我们为全球用户进行设计 我们的设备 被来自世界各地的人们使用 他们阅读和编写不同的语言和文字 字体在设计跨多种语言的风格 和功能一致的界面时 发挥着巨大的作用 为以文本为特征的许多图形元素 提供整体的阅读完整性 文字无处不在 就像这些屏幕中的 大标题和表格行一样 而且在按钮中 拼盘图标标签 在小部件、键盘 和标签栏内的文字都是一样 在全世界丰富的语种中都是如此 我们将这些原则结合起来 纳入到一个领域 以便我们可以达到 最高水平的一致性 这是一种独立的经验领域 并且可以用我们为最终的本地化 体验效果而设计的字体 让您的 Mac 电脑的屏保程序 用日语问候您 以及其他语言中具有标志性 草书风格的“您好” 或在 iPhone 里 用阿拉伯语显示时间 阿拉伯-印度数字或梵文数字 具有相同一致的字体 或者在 Typograph 表盘上 您可以选择五种不同的数字组 包括新增的中文数字 我们希望给 系统字体带来相同的一致性 它必须更广泛地适用 App 这需要扩大 San Francisco 字体系列的语言覆盖范围 并允许其他书写系统 从其功能中受益 比如字体粗细和视觉尺寸 提供良好的阅读体验 同时在视觉上引人入胜且舒适 适用于我们任何平台中的 每种脚本和语言 这项扩展任务在去年 我们引入 新的阿拉伯语系统字体时开始 SF Arabic 我们设计了 SF Arabic 以便能与其他 San Francisco 字体系列无缝集成 SF Arabic 以合理灵活的设计 对纳斯赫体风格进行了当代诠释 它是继拉丁文、希腊文 和西里尔文之后最新的书写系统 受益于最先进的字体技术 并在 Apple 平台上可用 和其他 San Francisco 字体系列一样 它具有全范围的粗细权重 从细体到超黑体 九个粗细权重中的 每一个字体都经过精心设计 以适应和组合 SF 字体系统 支持的其他脚本和语言 此外 SF Arabic 带有视觉尺寸 专为阿拉伯语脚本量身定制 允许字体自动调整笔画对比度 字端以及间距 以及在显示和文本大小之间 调整和缩放设计 文本样式为 高易读性和熟悉性进行了微调 具有更高的笔划对比度 和更宽的间距 当显示样式演变成具有 更简单几何形状的设计时 该字体随即会融合 San Francisco 字体 在传统设计上干净且现代的外观设计 所有这些都是有系统 自动并且动态处理的 以便于提供各种尺寸的 舒适阅读体验 就像拉丁文 和西里尔文书写系统一样 阿拉伯文字是具有多语言分类的 不仅是用于书写使用的阿拉伯语 还有各种其他各种类型的阿拉伯语 例如波斯语、普什图语 信德语等这些语言 SF Arabic 都支持 无数的发声、音调 和富有诗意的标记符号 扩展元音符号、敬语和古兰经注释 帮助我们完成了 SF Arabic 字体支持的广泛字符集 我很高兴地宣布 今年我们将推出 San Francisco 大系列的新成员 SF Arabic Rounded (SF 阿拉伯语圆角字体) 它包含了与 SF Arabic 相同的强大功能 配备各种粗细权重和视觉尺寸 新的圆角设计 丰富了许多 App 和 UI 例如在提醒事项和 健康 App 中的表现 它扩展了 SF Arabic 的风格范围 并加入其余的系统字体 使 Apple 平台上的 阿拉伯语排版变得现代、清晰和精致 如果您想查看所有新的 SF Arabic 字体的实际应用 并想详细了解面向阿拉伯语用户的 App 设计和优化 请务必查看 Mohamed 的 “阿拉伯语设计”课程 最新的 SF Pro、SF Arabic SF Arabic Rounded 和所有其他字体系列 可在 developer.apple.com 网站上下载 这就是本次课程的总结 我希望您喜欢了解 系统字体的所有最新添加的内容 谢谢收看 再见