从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情况会稍微复杂点,它的行高倍数会随着字号变动。下面给出常见字号对应的行高:
字号 | 默认行高 | 倍数 |
---|---|---|
28 | 38 | 1.36 |
24 | 32 | 1.33 |
20 | 28 | 1.4 |
18 | 24 | 1.33 |
16 | 22 | 1.375 |
14 | 19 | 11.36 |
12 | 16 | 1.33 |
10 | 13 | 1.3 |
可以看出大致在1.333左右浮动。
如何应用
知道真实的行高以后,我们就能:
- 将Sketch中的Line转换成客户端的lineSpacing;
- 将标注稿中的间距换算成更接近设计稿的距离。
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。
为了方便计算,可以把常用字号对应的速算值整理成表,用得多了以后心算就快了。

从Sketch到IDE——行高和行间距的换算 由 李大毛 采用 知识共享 署名-相同方式共享 4.0 国际 许可协议进行许可。
本许可协议授权之外的使用权限可以从 https://www.darmau.com/policy/ 处获得。