Explore, learn, enjoy
如何精准还原设计稿中的排版设计
unsplash-logo题图:Annie Spratt

行高-字号=行间距?

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

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

sketch排版

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

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

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

当Line Height=1

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

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

不同字体的行高会不一样

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

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

其他文字上下会有小标

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

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

间距的偏差

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

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

不同系统下的表现

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

真实的行高

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

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

字号 默认行高(tx) 倍数(t)
28 38 1.36
24 32 1.33
20 28 1.4
18 24 1.33
16 22 1.375
14 19 1.36
12 16 1.33
10 13 1.3

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

如何应用

知道真实的行高以后,我们就能:

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

lineSpacing

给出计算公式:

s=m-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

如果你用Chrome会发现公式错误,喏,这个是为Chrome用户准备的:m=p+(h-tx)/2

边距怎么计算

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

再次以刚才那个18号字行高32来举例,假设这个文字图层距离容器上边的距离为16。

那么开发应该把这个距离设置为16+(32-1.2*18)/2=21pt。当然,这里仅仅是为了和设计稿效果尽量一致,不代表实际中也得这么算。

事实上,为了在视觉上的距离更接近你想要设定的16,应该把这个公式反过来使用。即已知m为16,求Sketch中的p值。在这个例子中,p=m-(h-tx)/2=11pt。

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


知识共享许可协议
从Sketch到IDE - - 行高和行间距的换算李大毛 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于城中村群租房上的作品创作。