深圳不是我的家,我的家乡没有城中村

原文:

Typesetting in Sketch
Text, like Colors is a topic that appears simple on the surface, but once you dig down, it becomes apparent that it is anything but. Over the years we’ve learned that what designers expect from a…

文字,和颜色一样,是个表面上看起来很简单,但当你深究起来却很复杂的话题。设计师预期的字体系统(type system)和苹果或其他厂商建立的文字排版系统并不一样。

一直以来我们都希望提升Sketch上字体的表现,但你继续读下去就会发现,应对这些挑战需要我们深入探究苹果的文字渲染系统,进行底层的修改。我们相信我们实现了这个目标,希望你们喜欢。

在了解我们亟需解决的问题之前,首先看一下Sketch中的一个文字图层。

文字图层示例

文字图层的高度由“line-height”属性决定。这个值并不总是和字号相对应,不同的字体在相同字号下的line-height差别可能很大,有的几乎是字号的两倍,有的则接近字号。字形在图层内绘制的位置由baseline决定,baseline由字体定义。

由于字体之间的差别非常大,当你在切换字体的时候,文字图层也会发生相应的变化,尤其是当你在同一个图层中混用不同的字体。另一个棘手的情况是当你切换字体时,画布上的文本经常上下偏移。

我们经常被问到,为什么Sketch会渲染看起来空白的区域(上图蓝色部分),而不是将边界定为升部ascender和降部descender。蓝色区域也是由字体本身定义,但是简单点说,一些对你来说很少见的字符会占用这些空间,特别是包含变音符号的字符。比如出现在大写S(Š,一些斯拉夫语)和小写c(ç,法语最常见)中的符号是最常见的例子。

在Sketch 3.6中,我们对文字图层进行了一些更改,特别是对于具有固定行高的段落。 要了解它是如何工作的,以及发生了什么变化,我们需要了解Apple的文字系统,它如何产生我们的文本,以及如何应用于Sketch。

字符和字形

设置文本段落的第一步是将文本的字符和字体属性转换为字形glyph。 字形是给定字体的一个或多个字符的直观表示。 字符和字形之间的映射不是1:1。 例如,单个字形可以表示多个字符 - 这些字符称为连字。 以不同方式排序的相同字符可能会产生不同的连字,从而产生不同数量的字形。 我们遇到的最极端的例子是Zapfino字体中的“Zapfino”。 七个字符连成一个字形:

在Zapfino字体中,七个字母连成一个图形

文本容器和line fragment

我们可以在一行上放置多少个字形由文本容器的宽度决定。 在Sketch中,文本容器的大小由文本图层的宽度决定。 要使用字形填充文本容器,我们需要将其拆分为若干行。 包含某单行的所有字形的矩形称为“文字区块line fragment”。 只要您在段落中使用单个字体或大小,所有内容都会像您期望的那样:

在正常排版中,line fragment的高度由该行最高的字体确定(准确地说,是字体在上方升部和在baseline下方降部的距离)。 混合字体可以生成不同高度的文字区块,这是事情开始变得棘手的地方:

固定行高

段落还可以指定最小和最大行高。 这限制了line fragment矩形的高度。 如果我们使用相同的最小值和最大值,我们得到一个固定的行高。通常来说,这就是Sketch中设置的行高。 它适用于相同字体的段落。

具有不同字体的段落在Sketch中通常看起来不对劲。 我们设置固定行高,所以为什么会有问题? 我们需要确定排版机制将baseline放在line fragment矩形内的的具体位置。
事实证明,对于每个line fragment,Cocoa的typesetter会找到该行文字最高字形的降部,并将其用作baseline和文字区块底边的距离。 使用混合字体,固定了行高,但baseline却变得不可控。

当设计师谈到将行高设置为20pt时,他们的意思是他们想baseline之间距离为20pt,而不是20pt高度的line fragment矩形。 这是有道理的,因为决定文本垂直视觉节奏的是baseline,它比这些抽象矩形更容易感知。 那我们怎么解决这个问题呢?

一致的baseline

在Sketch 3.6中,我们引入了一种新的排版机制,它为具有固定行高的段落生成一致的基线偏移。 我们通过检查段落中的所有line fragment来实现这个目的,并选择适合所有line fragment的基线偏移。

段落之间也保持一致的基线偏移,即使是不同的字体,只要它们具有固定的行高。 当没有设置固定的行高时,我们使用指定的字体来设定,我们看到的可以给我们留下不同的结果。 当您将其设置为固定时,您将获得美观,可预测的垂直节奏:

如何在原来的设计稿中使用?默认情况下,新文本图层使用一致的基线排版,并且在早期版本的Sketch中创建的文本图层可以通过更改行高来应用新的排版机制。

其他改进

我们对行高的改进也对行高小于字号的段落的编辑产生积极影响,因为基线始终位于文字区块内。它还改进了文本图层的边界矩形。

最后,在更改文本图层的字体时,我们已经留了一些长度来保留第一个基线的位置,因此在更改字体时,文本图层将不再会上下偏移。

最后一点

数字排版是一个非常复杂的问题。我们生活在一个激动人心的时代,我们意识到在每个设备和平台上让设计看起来一样是几乎不可能的。

对于我们来说,创建一个类似于iOS,Android或Windows中的Chrome或Mac中的Safari的渲染系统也是不可能的。所有这些的渲染机制的差异非常大也非常复杂。

我们听取了您的反馈,并试图建立一个非常一致和可靠的渲染系统。我们在此次更新时非常强调行间距,但我们刚刚开始。这是我们计划在今年发布的一系列类型改进的一部分。