我是亚历山大，是苹果设计团队的字体设计师，我会与江一起向你展示优秀的Ul版式设计的细节还有介绍一些帮你在你的 app 上实现的工具。总的来说，我们要谈论的主题是理解我们平台上的字体的动态行为。首先，我将讨论字体及一些 UI 设计有关的字体概念；然后，江会向你展示展示在处理排版样式和布局时有用的 API 和最佳实践。
对于大多数人来说，处理字体就是简单选择字体和字号大小。是的，确实是这样，但是在我们的第一个话题中，我想向你展示切换字体大小实际上会产生很多微妙的效果。学习关于 optical sizes 是理解可读性的关键，是你应该试着时刻关注的点；在optical sizes之后，我将讨论一点关于可变字体 variable fonts 的内容，这是一种让我们在平台上完善文本行为的格式，也可以改善应用程序的排版。
然后，我将讨论直接影响UI设计的话题Tracking leading，他们是文字排版中很重要的部分，因此值得花费时间去熟悉；最后，江会带你探究文本样式和动态类型两个我们核心的排版工具去实现优秀的UI设计，这将是一个复习，因为其中一些 api 不是全新的，但是我们有一些关于这个话题上的更新。
为了描述什么是 optical sizes，我需要回到几年前当我们的主要系统字体是 SF 字体的时候，那时候我们的主要系统字体 SF 字体第一次被设计出来，我们团队通过大量努力以保证 SF 字体在任何大小看起来都很棒，我们通过你可能比较熟悉的两个字体变体来达到这个目标。我们设计了一套小尺寸小于pt的 SF Text ，还有一套大尺寸大于pt的 SF Display ，这些变体我们称为optical sizes，他们允许我们更好地控制影响识别度的细节。
例如，SF T 和 SF D 的字母间隔是适应实际的一个使用较小间隔另一个使用较大间隔。
两个字体间的垂直部分也有轻微的不同，在同样的大小下，SFT 字体的高度稍微大一点。因此，在使用较小尺寸的情况下 SF T 会更加易读。
当我们初次尝试这个设计方式，感觉这像是一个小变革。这里我发现一些关于变革这个词非常有趣的东西，我们通常认为变革意味着向前移动或进步，但是根本上，这意味着回到开始的地方从词源词根的角度看。
因为你看，optical sizes是一个自从印刷术发明就存在的东西，它依然是一个涉及到的物理对象的印刷过程，几个世纪以来几乎没有变化。的确，数字技术使我们在处理文本方面有了更大的灵活性，但在某一方面，它使排版比过去更加粗糙。为了表明我的观点，我要向你展示 optical sizes 回归到它们原始状态下的样子。
作为一个历史迷，我在家中偶然间得到这本来自世纪的古书。这就是我们所说的类型标本，它包含各种尺寸的排版样本，这里有两个我想要向你展示的例子，在这几页中，我们有一些以不同的尺寸做的同样的设计，也就是说两种不同的字体，有一点像 SF T 和 D 字体，对于今天的印刷单位来说，他们大约分别是 pts 和 pts 。
现在我想让你想象一下你在这里看到的每一封信，都有一个大小完全相同的金属邮票，它是手工制作的。这些所谓的邮票是通过切割字母和钢片的工艺设计出来的。这些金属的冲头阳模在成型过程的开始阶段被使用，这个阶段产生了一种种类，这就是这些金属邮票实际上的名称。
看这些字形的细节显示它们受到手工的影响有多大，pt 字母看起来更加粗糙因为它尺寸更小，这说明了一些关于 opt sizes 的事情他们与雕刻精度关系紧密。这对于切割冲头的人们来说，意味着设计时要面对在纸纤维上印刷金属和油墨的挑战。而对于我们来说，这意味着我们要处理矢量图形在像素格上被栅格化的挑战，但是无论你的设计输出是什么，在opt sizes上的挑战意味着去平衡辨识度和细节。
我这样说听起来似乎它们是独立的，但其实可读性是通过细节定义的，就 SF T 与 D 字体字体而言，一个关键的细节是字母间的间距，当字体更小，字母之间的需要更大的间距，以保证眼睛可以更轻松地将字母区别开。
这当然还有一些在字母本身上更加有意义的细节，比如字母的较薄部分，当字母更小时，有时需要变得更坚固；
然后，有些细节可能会让你觉得意外，比如字母 i 上点的位置，这是刻意那么做的，是为了保证当字母尺寸较小情况下，字母 i 不会与字母 l 混淆；
因为间隙越小，间隙就越容易被填充掉无论是墨水还是像素；
所以既然相对尺寸在这里是相关的，让我们以它们的预期缩放比例观察两个原始状态下的单词这两个设计之间的区别现在没那么明显了，这就是 opt sizes 的用意它兼顾可读性和审美性，以保证这个设计在不同尺寸之间看起来更舒适和更具一致性；
对于几个世纪以前设计字体的人们来说，由于他们是在实际尺寸的情况下工作，根据尺寸采用不同设计是一个相当直接的过程，但是另一方面，数字媒体字体设计就要面对一个不幸的挑战，因为你可以无限地缩放矢量图形。
几乎所有数字字体对于每个字形都只包含一个单一的写法，所以字体设计师不得不挑选一个最适合的尺寸去设计，这意味着你使用的大多数字体都是为了在某个尺寸下表现最好而设计的。
当然，字体设计师总是可以决定去创建多种字体以适应多种尺寸，但这不是我们可以轻易做出的决定，因为这涉及到极大的工作量，而且更重要的是，它变成了一个不太方便使用的字体系列。
所以，当 SF 被初次设计出来，我们仔细考虑，然后我们最终决定采用 opt sizes，但仅仅使用两个，对于我们来说，做出这个决定稍微比较轻松，那是因为操作系统可以在不同设计间自动转换，然后我们会愉快接受去告诉每个人 SF T与 D 的存在的必要性的需求，多年来，那已经是我们平台上相当先进的技术了。
但我们一直希望我们能进一步改善这种行为，毕竟，如果一个字体能够自动适应每个你挑选的尺寸，而不是你不得不在 T 和 D 间选择，那不是更好吗？是的，这正是在几年前变成了可能。
现在，如果 padding 也可以相对于文本大小更改进行缩放，那不是更好吗？在这里，我们可以利用新的ScaledMetric 属性包装器来定义值为 的 padding ，让它也可以相对于正文文本样式进行缩放。我们来看看这是否有效。你可以看到文本周围的 padding 与文本大小成比例缩放，而不是固定大小。
可变字体Variable Fonts在 年，作为一种 Open Type 字体规范的升级被初次引入，该规范的更新是为了响应日益流行的网络字体，事实上，这项技术确实在考验现有字体格式的局限性。
这种格式从根本上改变了字形在字体中的存储方式，一个字形不再被限制为只有一个单一的静态写法，它还可以描述每个点移动的方式，以产生一个相关的，但不同的字形任何一个移动和变化都约束到轴上，这些轴使软件可以控制它们的行为。在这些轴中，有一个吸引了我们更多的兴趣因为它是用于实现 opt sizes 的，这使我们能够更新 SFPro 并改进现有的 opt sizes，此外这种新的动态行为确实在我们的系统衬线字体 NY 字体中显示出了潜力，在 NY 字体中，对不同尺寸的适应更加明显。
感谢可变的 opt sizes，我们现在可以设计出完美适应尺寸的字体，绕了一圈之后，我们终于恢复了物理字体上的优势，这就是为什么今年我们开始从 opt sizes 转为单独的字体，现在合并在一起的不仅仅是 opt sizes，还有字重。
这意味着从现在开始，我们的大多数系统字体都可以下载为单个可变化字体。
话虽如此，我们今年仍将发布 T 和 D 字体以缓解过渡，在设计工具中，你应该期望找到用于可变字体的新控件，主要是以滑动条的形式显示字体的公共轴，但请注意，它们是可选控件，你仍然可以通过其预定义实例以通用方式处理这些字体。
事实上，当你使用我们的系统字体时，通常最好保留预定义的实例，如果你使用的可变字体支持 opt sizes ，你可以寻找一个专用的滑块，它将覆盖特定范围的 pts ，原则上，设计 APP 应该注意保持滑块的值与你使用的 pts 同步。
但情况并非总是如此，根据应用程序的不同，更改大小可能不会自动更新控件，因此，如果您注意到所使用的大小与滑块上的值不匹配，那么你需要自己设置滑块，还有如果你使用的尺寸超出了滑块的范围，这是完全可以的，只需将滑块设置为最接近的值即可。如果你在之前的操作系统中使用设计工具，可变字体可能无法按预期工作，在这种情况下，更安全的做法是恢复使用我们仍然提供的单独的 opt size，比如 SFT 和 D 字体。在代码中，这种行为是完全自动的我们关注保持 opt sizes 和 pt 值的同步。
这当然适用于系统字体，但也适用于你可能使用的任何自定义变量字体，只要它有一个 opt size 轴。那么，在赶上了特定尺寸版式设计上的最新发展之后，我想谈谈 UI 文本布局的两个基本原理Tracking leading
Tracking 是我们如何实现出色的尺寸特定排版的重要组成部分。我们刚详细讨论了 opt sizes ，但我没有提到一个事实就是 opt sizes 与 Tracking 配对使用时效果更好。但首先我对 Tracking 的理解是什么呢？好吧，我们先看看字体的字形，它们已经包含了一定的空间。
这个空间就是我们所说的侧轴承字符左右两边所保留的间距，它是在绘制字形时设计的，并定义了文本间的默认距离。
但正如我之前指出的，文本排版要求字母间距有所不同，所以可以在任何尺寸上看起来都不错。当你这样做时，可以增加初始的字空间就是我们所说的 Tracking ，它有点像css中的字母间距，但是 Tracking 特别是指文字版面配置时在字形之间增加空间的动作。
现在我相信有些人对我刚才说的感到困惑，并且认为我说的是字距调整。困惑是很正常的，但 Tracking 和字间距调整是不同的东西。
字距调整是对间距的微观校正，仅应用于两个确定的字符之间，字间距也是被字体设计师创造的，在大多数情况下，根本不需要修改它。
但是回到 Tracking ，我向你展示我们如何以及为何将其与SF一起使用。
当你在设计具有特定大小间距的字体时，就像我们对SF文本所做的那样，如果你想想实现微调结果，使用 Tracking 仍然是很好的。
如果没有 Tracking ，在点字号从一种字体切换到另一种字体时，SF 文字和显示之间的原始间距会成为一个问题。请注意最后一个蓝色，尽管与第一条橙色线的长度几乎相同，但是因为默认间距不同以及不规律的变化是我们为什么使用光学尺寸 Tracking 的原因。
Tracking 是系统字体行为必要的一部分，因此我们将 tracking 表作为苹果设计资源的一部分发布，因为如果你想准确重现系统字体的行为，你需要知道要知道每个尺寸下 Tracking 多少量。
今年随着 SF Pro 成为可变字体，不再有 pt 左右的硬性突破，现在设计从文本显示过渡到到点之间。由于行为的潜在变化，我们不得不更新 tracking 表。因此请注意，当你在你的设计中使用新的 SF pro 时，你需要在到pt 之间套用一套新的 tracking 值。
但在我们看 tracking 曲线时，我想指出的最后一点是一个字体实际上可以包含多个 tracking 表 ，我们一般使用它来添加 tracking 值，例如帮助收紧字符串。例如你在一种棘手的情况下，字符串被截断了。
你可能会使用字距调整的办法去解决，这是非常常见的解决方案，但正如我之前指出的那样，在此处使用字距调整并不理想。
最好使用 tracking 应用编程接口去解决，因为它在语义上是正确的，但更重要的是它允许操作系统停用可能与 tracking 发生冲突的排版功能 比如连字。
如果你用字间距调整 API 处理连接的单词，那么这个连接仍然存在并打破了这个单词的节奏。而我们使用 tracking api 的编程接口，会帮你分解这个连字，使单词间距更均匀。
但是，使字符串适合的最佳和首选解决方案是允许它被自动压缩间距，就是说在间距比较紧凑的情况下，此时用 api tracking 表 ，系统将尝试把文字控制在易于辨认的范围内。
在这种截断的情况下，最好使用 tracking api的最后一个原因是它会应用于你必须实施的特定尺寸的跟踪，如果你自己应用 tracking ，则必须手动调整。好吧，我来总结一下 tracking 主题今年，我们将启用对第三方字体的 tracking ，这意味着字体供应商可以开始给自己添加 tracking 表 ，嵌入 tracking 的字体将被应用。在我们的平台上，有一个前提是该字体还得包含统计信息，如果你应用 kCT Font OpticalSi ze Atg，此类字体也可以与旧OS上的 tracking 表一起使用。
我们已经研究了字形之间的空间，但是现在我们来考虑一下另一种排版空间字行之间。在这里我想提出一个词汇插曲，以消除两个术语之间的歧义，所以我们先来谈谈线高。默认情况下，线高度是字体的垂直限制的高度，你也可以将其测量为两条基线之间的距离，但无论接近方式如何，距离都保持不变。
现在，当两条线之间的距离增加时，它们之间的距离被称为 leading行之间的空白量，如果琐事让你记得这个，那么这个名字来自金属时代，当时这个差距对应于两行文字之间的实际铅块。这里要注意的重要一点是，当线之间有引线时， 线条高度包括引线 ，所以这两个概念是互相依赖的，如果你改变其中一个的话，另一个也改变了。大部分时间你都不需要关注 leading 或线高，因为我们在大多数的 UI 组件中已经定义了，但我向你展示两个示例来展示修改了 leading 的情况
阿拉伯文字是一个可以有很多上升部分和下降部分特征的书写系统，在给定的线上，它们可以侵犯周围直线的视觉空间，因此在这种情况下通常最好是增加一些 leading 。
出于这个原因，在我们使平台应用更多的 leading ，阿拉伯语和其他本地语言环境中适用于更高的行高。
另一方面，有时收紧引线并使其在垂直方向上更紧凑有时会很有帮助。例如在手表 OS 上我们很多地方都用更紧凑的 leading ，以最大化的提高在屏幕上展示信息量。
这类修改是通过使用文字样式实现的，江后面会讲到这些样式。
这两个例子很好地说明了我们如何努力设计我们的 api 和版式特征，通过使用现有的系统 api ，你将从我们每年的设计改进中受益，至于新版本，我们试着让它对你来说更简单去考虑采用，从而让你的 APP 随着时间的流逝，变得更好。
现在可以交给江，他将向您展示有关我们为您提供的功能强大的字体和文本 api 的更多信息。
在深入研究版式细节之后，下面我们来谈论一下文本样式和动态类型，这两个重要的系统工具将帮助您在应用程序中创建美观且一致的排版。
文字样式是我们如何在苹果上构建出色 UI 的核心，他们提供了一个框架，具有灵活清晰的层次结构和一致的排版，以及有足够的样式范围来满足大多数 UI 需求。
文字样式是一组系统预定义的，跟字体粗细磅值相关的组合，它们内置在提供排版层次结构的系统中，使你更轻松地在应用程序中获得清晰易读的布局。首先，尽管定义的文本样式提供了各种各样的字体大小来表示信息层次结构，但有时，仅靠字体大小还不足以突出更多细微的差异。就像这里日历中的年和月的标题一样，你可以看到他们使用的是标准文字样式中较重重量的文字。
像这类表示强调的文字样式，你可以使用相同的文字样式大小，但是使用不同的字重，这被我们的系统 APP 广泛使用。当然，你已经在邮件中看到了这个大标题导航栏，这是使用强调的大标题文字样式。
现在，我将向你展示如何在你自己的 APP 中使用它。假设我们有一个使用标题 字体的标签，我发现标题需要更多磅字重，所以为什么不使用粗体呢。那么，强调标题 就是这样的。
在这里，我们不是使用 UI Font.preferredFontwithTextStyle API，而是使用 UI FontDescriptor API获取具有title 文本样式的描述符，然后对其应用粗体符号特征。借助大胆的特征，你会越来越强调 title 文本样式，该样式映射到 SF Pro Bold。你可以将粗体符号特征应用于任何 NS Font，UI Font 或 Swift UI字体，以创建该字体的强调变体。
尽管该符号特征的名称为粗体，但该变体的实际粗细取决于文本样式，可以是中等半粗体粗体或超粗体。正如我们之前提到的，文本样式的行高被认为适合大多数情况。
但是，有时你使用的空间更加有限，因此节省行之间的空间可以提高信息密度。这里有一个例子是一个健身 APP ，或者当你需要呈现大量文本时，你希望提供给内容更多的呼吸空间，以改善阅读体验，例如此处的地图。
在这些情况下，你可以使用紧缩或者宽松的变体文本样式。
在iOS系统和Mac OS上，紧缩的行高使用降低引线之间的高度 pt ，然后宽松的行高增加引线之间的高度 pt 。在手表操作系统中标准减少到相差 pt 。
现在，在这种情况下，我们有一个像这样的长段落文本，它使用的是正文文本样式。目前，它的高度为pt 。我们只想尝试一下，看看它在更紧的线高下的样子。我认为你现在掌握了它。一旦应用了严格的引线符号特征，文本将如下所示。现在它具有 pt 的线高。但这对于如此长的段落来说似乎太紧了。
那么，宽松的引线又如何呢？现在，让我们尝试宽松的引线特征，获得 pt 线的高度。好的，看起来确实好多了。
因此，它实际上与我们刚刚强调的变体非常相似。只有这次，我们才使用 .tightLeading 和 .looseLeading 符号特征。在今年的新增功能中，你还可以对 Swift UI 中的文本样式字体进行主要调整。在整个系统中，我们在我们的应用程序中使用了 New York 和 SF Pro Rounded ，例如此处的书籍和提醒应用程序。
但是值得注意的是，它们不仅可以作为独立的字体使用，还可以与我们的文字样式很好地配合使用。现在，我们要像提醒一样构建标签。让我们结合一下我们刚刚了解的强调文本样式。我们从诸如 Today的文本开始，使用强调的大标题文本。
目前，它正在使用 SF Pro Bold 。让我们尝试使用 font Descriptor.withDesignAPI应用渲染的设计。你现在可以看到字体已切换为SF Pro Rounded。
因此，我们引入了一个非常灵活的 API ，可以将这些设计应用于任何系统 UI 字体对于 App Kit 和 UI Kit，带有设计过的字体描述符的 API 可以应用于任何UI字体。对于 Swift UI ，API 有点不同，在构造字体开头时应该通过设计，而不是使用修饰符来转换现有字体。选择设计的文字样式时，除设计外的所有其他内容都保持不变，包括字体大小粗细和行高。
我知道你们中的许多人都使用网页或在应用程序中嵌入了 Web 视图。几年前，WebKit 引入了appleSystem 字体家族，以便你可以在 CSS 中使用 San Francisco 字体，这已被广泛采用。
现在，以 apple 为前缀的版本具有标准名称 systemui 。今年早些时候，我们为Apple平台带来了一套新的 CSS 字体系列名称，例如 uirounded ，uiserif 和 uimonospace 。我很高兴地宣布，今年的文本样式是 macOS 中完全受支持的 API ，我们将为所有 Cocoa 应用程序的 AppKit 引入一套新的 API 。就像 iOS 一样，这个新的 AppKit API 将支持所有文本样式。
字体大小经过优化，以匹配 macOS 控件大小。尽管没有动态类型支持，但你确实可以获得我们刚刚介绍的文本样式的所有其他好处。去年，我们共享了此图表的 Catalyst 应用文字样式大小，实际上 iOS 大小为 ％。今年，通过针对Mac优化了界面的 Catalyst 应用程序，你将获得一系列新的文本样式大小。你会发现，它们的对齐方式非常好，因此你的应用程序只需要进行最小的更改即可适应。如果选择缩放界面以匹配 iPad ，它将继续遵循 iOS 的比例，为 ％。
但是，如果你想选择新的行为，则 Xcode 中的 Mac的优化接口选项将为你提供。你可能已经知道，在 iOS 中，文本样式还有另一个维度动态类型。你选择的字体将根据首选项自动缩放。
动态类型使人们可以控制他们应该使用的大小字体。它使许多人都更容易阅读文本，因此你确实应该考虑在应用程序中支持动态类型。通过一起使用系统字体 API 和文本样式，你可以在 iOS 上自动选择此行为。在使用自定义字体时，你也可以支持动态类型，在本部分的演讲中，我将介绍如何做到这一点。
我们刚刚显示的图表有很多优点，但我想提醒一下，不同的文本样式可能具有不同的缩放行为。
在这里，我们可以看到正文title 和脚注文本样式如何随动态类型缩放。在使用自定义字体支持动态类型时，还应注意这一点。众所周知，排版对于品牌识别至关重要。许多人正在使用为你的应用程序和品牌设计的自定义字体来构建应用程序，但是仍然希望支持动态类型，因为这对于可访问性至关重要。如果你希望你的应用在文本大小首选项更改时做出相应的反应，就像 iOS 系统应用一样，你会怎么做？
现在假设我要使用 Avenir 字体，中等粗细，该文本为磅。我知道该怎么做，并且你可以看到它正在使用我们想要的字体。但在 iOS 中，问题在于一旦开始使用自定义字体，它将停止支持动态类型。
在 iOS 中，它将自动缩放，但是只是为了确保它具有正确的缩放行为作为标题，我将设置 relative To参数，以便相对于标题文本样式进行缩放。如你所见，标题文本现在正在自动缩放，我们来继续添加正文。
与标题文本类似，我们宣布一个段落文本并将其分配给 VStack 中的文本。而且我甚至不需要使用relativeTo 参数，因为自定义字体将默认在 iOS 中相对于正文文本样式缩放。标题和正文文本现在都自动缩放。
但是看起来我们应该给正文文本周围添加一些 padding ，因为文本太靠近边缘和标题了。让我们添加一些 padding ，首先从 pt 的固定 padding 开始。好多了。
现在，如果 padding 也可以相对于文本大小更改进行缩放，那不是更好吗？在这里，我们可以利用新的ScaledMetric 属性包装器来定义值为 的 padding ，让它也可以相对于正文文本样式进行缩放。我们来看看这是否有效。你可以看到文本周围的 padding 与文本大小成比例缩放，而不是固定大小。
好的，这是我们刚刚展示的内容的回顾 Font.customAPI有一个新的可选参数 relativeTo ，用于指定你要相对缩放的文本样式。如果你跳过它，它将相对于正文缩放。这是 iOS 中的一个行为更改。你仍然可以创建一个固定大小的自定义字体，并且使用 fixedSize 参数根本不缩放。
除此之外，你还可以像 UIFontMetrics 一样使用 ScaledMetric 属性包装器缩放常量。好吧，我们今天涵盖了很多领域。这里是我想提醒你的一些基本原则。
我们提供了各种样式的精心设计的系统字体，例如 SF Pro ，SF Pro Rounded，SF Mono 和 New York，我们鼓励你去尝试一下。对于良好的排版，层次结构很重要，而文本样式是构建这种层次结构的绝佳工具。即使使用自定义字体，你也应该有很多选项来支持动态类型，这对于辅助功能非常有用。我们已经介绍了许多排版的重要细节，例如跟踪和引导，你只应在特殊情况下覆盖默认的系统行为，并让系统在其余情况下为你做正确的事情。如果必须在 UI 中使用自定义跟踪，请记住，它应该是特定于大小的，否则，为小尺寸提供的跟踪可能不适用于大尺寸。
我希望你现在对我们平台上文本的行为有更好的理解，文本和字体 API 可以更好的使用在你的 APP 中。
