从Sketch到IDE——行高和行间距的换算

如何精准还原设计稿中的文本排版

行高-字号=行间距？

在Sketch或其他类似设计软件中，关于字体样式最常用的两个参数就是字号和行高。如果仅仅为网页设计，那么这些数据可以直接使用，CSS的line-height与Sketch的Line一样，效果也差不多。但在iOS和Android上，方法就不一样了。

下图中文字大小为24pt，行高36pt。如果文字只有一行，你会发现文字图层的高度也是36。多行文字的话，文字图层整体高度就是行高*行数，图中5行文字的高度就是5*36pt=180pt。在Sketch上这些都很直观易懂。

但是在iOS和Android上情况就不同了。在这两个系统中，如果想改变文本的行高，就得改变行间距，一般来说并不会直接设置行高。

你可能要说，用行高减去字号，不就是行间距了？比如上图右边，36-24=12pt，行间距设为12pt不就跟Sketch中表现一样了吗？

也许吧，除非世界上只有一种字体，文字只有汉字。

当Line Height=1

产生这种错误想法的原因就在于，字体不止是苹方和思源黑体，文字也不仅仅是汉字。

除了书法字体，汉字一般都是方方正正的，每个字的字形高度都跟字号一样，所以我们往往忽略了其他情形。然而现实是每种字体的设计风格都不同，因此尽管字号相等，不同的字体在1倍行高时的高度也不会相等。也就是说，文字高度不一定等于字号。如下图：

每个字体都是16号，但是字形的高度显然不相同。这点在手写体尤为明显，Zapfino在16号时的字形竟然有54pt高！

第二，正如Sketch的文字排版策略(译)里提到的，在斯拉夫语族和罗曼语族的文字里，会在拉丁字符上下加各种符号：

所以当你认为所有字都会像左边一样高时，实际上因为其他文字的存在，文本的高度其实是右边的样子，比你想的要大一些。

因此，如果你按行高-字号来设置行间距，实际效果一定会比你想的要大一点。

间距的偏差

弄错行间距除了会影响阅读以外，还会影响文字与其他元素的间距。

比如说下面这张图，文字的字号是16pt，行高28pt。不管你是导出标注到蓝湖、Zeplin，还是直接给开发源文件，如果开发真的按Sketch把这个距离设为16pt，在设备上的实际效果会比预想的要小一点。

因此我们需要知道在这两个系统下，不同字号对应的一倍行高的高度是多少，才能让不同系统的表现跟设计稿尽可能一致。当然，这里只讨论苹方和思源黑体。

真实的行高

如果没有特意更改iOS字体，行高大概等于字号的1.2倍。注意，如果修改字体为PingFang，就会变成1.4倍。

Android情况会稍微复杂点，它的行高倍数会随着字号变动。下面给出常见字号对应的行高：

可以看出大致在1.333左右浮动。

如何应用

知道真实的行高以后，我们就能：

1. 将Sketch中的Line转换成客户端的lineSpacing；
2. 将标注稿中的间距换算成更接近设计稿的距离。

lineSpacing

给出计算公式：
s=h-tx
s：lineSpacing，行间距。
h：Sketch中设置的行高，Line的大小。
t：行高倍数。
x：字号。
iOS对应的t值是1.2，Android下的t值可查看上方的表格。

比如在设计稿中你设置了一个18号字，行高为32。按照这个公式，iOS下的行间距应该是：
32-1.2*18=10.4≈10pt

Android下的行间距是：
32-1.33*18=8.06≈8

或者直接用表格中第二列中的24代替tx，可以得到精确的值：8。

Margin

如果是文字的外边距，即文字与其他元素的距离呢？
继续上公式：
m=p+(h-tx)/2

m为开发需要的间距；
p是Sketch中文字与其他元素的距离；
h-tx就是上一个公式中的行间距，这里需要除以2。

再次以刚才那个18号字行高32来举例，假设这个文字图层距离容器上边的距离为16，那么开发应该把这个值设置为16+(32-1.2*18)/2=21pt。当然，这里仅仅是为了和设计稿效果尽量一致，不代表实际中也得这么算。

事实上，为了在视觉上的距离更接近你想要设定的16，应该把这个公式反过来使用。即已知m为16，求SketchVS的p值。在这个例子中，p等于11。

为了方便计算，可以把常用字号对应的速算值整理成表，用得多了以后心算就快了。