前言

文章中的所有字体规则都是基于750x1334px画布，就是2倍图的前提下进行阐述(设计尺寸1倍和2倍问题一直是一个热点话题，其实各有优势)，我们团队一直都是按照750x1334px的分辨率进行设计，所以按照基于此进行讲解。

背景与问题

字体是设计中最基本的构成元素之一，在UI设计中亦是如此，用户可以通过设置好的文本信息来理解内容和完成操作，井然有序的字体排版可以提升用户的阅读体验及操作效率。Ant Desgin建议字体方案从字体家族、主字体、字阶与行高、字重、颜色五个方面考虑。中文字体家族肯定是优先使用系统默认的界面字体，IOS系统字体：苹方(PingFang SC)，安卓默认字体：思源黑体(Noto Sans)；在移动端设备主字体一般以28px为主；字阶是指一系列有规律的不同尺寸的字体，简单理解就是不同大小的字号，行高是包裹在字体外面的无形的盒子，字阶和行高是紧密关联的。

我们在做项目的时候，设计师们经常会遇到字体行高的问题，每个人设置习惯不一样，也会遇到测试还原度的时候发现行高和高保真不一致但是初步都看不出谁错的问题。今天我们来聊聊设计时sketch中的字体行高到底该如何设置？

真实设计时工作场景：

强迫症设计师：这个标签上下间距不一致诶～

淡定哥设计师：是的，但是是字体本身行高是奇数导致的，不影响整体效果的～

强迫症设计师：不行，不行，这个组件我要手动调整一下，保持一致～

淡定哥设计师：甩一个无表情～你有强迫症啊～

那么设计师们用sketch设计的时候会发现，会有几种常用字体字阶(就是不同字号)的默认行高是奇数，举个例子：在设计标签的时候，上下间距保留不一致最为明显，不知道会不会有强迫症的设计师将其行高进行调整成偶数，手动调整1px进行强制对齐，有木有～如果答案是肯定的，那你一定要瞪大眼睛看下去，对～没错～那你和我们的气场是合拍的～

真实测试还原度时工作场景：

设计师：这个标签上下间距不一致诶～

ios开发：我明明按照标注间距来写的啊，不可能不对，不信你去看代码～

设计师：果然是一样的间距，怎么上下间距看着不对头～

ios开发：看，这个锅我不背～

设计师：～～～～～～～

还有一个最重要的问题，输出设计稿后总能遇到的字体行高开发还原度问题，尤其是字体和图标、图片等等之间的间距最容易出现问题，明明开发也是按照标注进行设置的，但是依旧还是怎么看怎么有点点不对，其实主要原因就是sketch中的字体行高和开发系统中的字体行高不一致导致的，包括单行文本行高和多行文本行高，以及设计交付时给到开发的ios系统、android系统还有前端的字体方案。

你们也许会发现，如果我们需要在同一个文字层内设置段落间距，在使用sketch measure插件导出的标注中，段落间距是无法识别的，需要另外告诉开发。不知道大家再用其他标注软件会不会有这问题。

单行字体行高的基本法则

我们在做TO.C类产品视觉体系中的字体方案过程中，经过了大量的移动端产品验证之后，总结了与我们项目中字体与对应的行高的设计规律，形成了初步规范，同时推荐给大家使用，也希望设计师们发声，说出自己的见解。

针对TO.C类产品的视觉体系我们定义了10个不同尺寸的字体以及与之相对应的行高。我们建议的主要字体为28px，与之对应的行高为40px。行高h = s x 1.4。其中s >=20，s是字阶大小，1.4是基础倍数，如果行高的结果是有余数，就是带小数点的，按照最近偶数原则进行取值，例如：字阶24px对应的行高是24*1.4=33.6px，那么我们取最近偶数值34px；如字阶32px对应的行高是32*1.4=44.8px，那么我们取最近偶数值44px。如需特殊字体按照字体大小加其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中(展示型页面除外)，字阶的选择尽量控制在 3-5 种之间，保持克制的原则。

其实很多设计师内心都是有一杆秤，会有一些设计书中写到，英文字体的设计行高是1.2倍，中文字体的行高一般是1.5倍，也会有开发站在自己的角度说其实业界常用的行高是字体字号的1.2倍、1.5倍都不是最准确的，因为和他们代码默认的行高不一致。虽然我们建议一个设计系统中字阶的选择尽量保持克制的原则，但是现在个性化的产品越来越多，大标题等等设计趋势，所以市面上各种APP肯定会涉及到各种字阶，为了验证多种字阶，我们把从20px—48px的偶数字阶共15种一一列举出来进行对比，我们发现：

一、字阶按照1.5倍的算法没有小数点，但是相隔一个字阶就会有奇数值行高存在；

二、字阶按照1.4倍的算法得出的行高会带有小数点，不方便计算；

三、sketch系统中根据字阶与行高的倍率发现，sketch中行高是按照1.4倍的取值加上四舍五入法则来设置，但是会出现一些行高奇数值；

四、这里例举ios开发中的对比效果，发现ios代码中的实际行高只有1.2倍，可能是因为ios是英文血统的原因，英文的排版确实是1.2倍，导致中文也只有1.2倍，所以也是和高保真还原度存在差异的原因。

五、我们按照就近偶数原则设置的行高高度和sketch的默认行高看似一致，但是其中sketch24px、26px、32px、38px、42px、46px、48px对应行高是奇数值，我们将sketch奇数值行高和我们设置的行高进行文本预览，都是1px的偏差值。

所以会出现文章前面说的真实工作场景中出现的设计对不齐、还原度不一致的问题。

再来回顾一下我们总结的字阶单行行高一般性规律：

行高h = s * 1.4。其中s >=20，s是字阶大小，1.4是基础倍数，如果行高的结果是有余数，就是带小数点的，按照最近偶数原则进行取值，这样就不会存在奇数值，强迫症设计师们的福音哦～

PS：不过这个一般性规律只限于单行文本行高的设置，因为当我们进行多行文本阅读时，文字量比单行文本多太多，现有单行行高的一般性规律并不能满足多行的阅读体验。所以我们也总结了一般正文字阶(24px、26px、28px)的多行文本行高设置方法。

多行字体行高的设计法则

在我们得出字阶和行高的一般性规律(行高h = s x 1.4。其中s >=20，1.4是基础倍数，如果行高的结果是有余数，就是带小数点的，按照最近偶数原则进行取值)的基础上，又对24-28px的常用字阶进行了针对性的多行文本的研究。我们需要得出一个适用于多行文本设置的行高来提升阅读体验。

设计实践

在现有字阶行高的一般性规律基础上，尝试对字阶增加增加2px、4px、6px、8px、10px共5种固定的行间距进行验证。经内部小伙伴对不同页面进行视觉测验后，我们与开发也进行多次联调得出：

一、24px在行高34px的基础+6px的行间距；26px在行高36px的基础+8px的行间距；28px在行高40px的基础+10px的行间距可以提升多行文本的最佳阅读舒适度体验。

二、但是我们发现在sketch设计中，多行文本如果按照单行文本展示增加了设计师重复排版的工作，所以我们在sketch不断调整行高数值进行尝试，希望发现增加多行文本行间距的一般性规律，

在sketch中字阶为24px(单行行高34px)设置行高为40px和我们+6px的行间距是基本吻合的，字阶为26px(单行行高36px)设置行高为44px和我们+8px的行间距是基本吻合的，字阶为28px(单行行高40px)设置行高为50px和我们+10px的行间距是基本吻合的，由此我们可以推断出：sketch中字阶为30px(单行行高42px)的多行文本

行高+12px等于54px，以此类推可以得出多行文本行高的一般性规律是(下面是3个视频请双击查看)：

字阶24px的多行行高( 34 + 6  =  40px)

字阶26px的多行行高( 36 + 8  =  44px)

字阶28px的多行行高( 40 + 10 =  50px)

…….

字阶 s 的多行行高(s * 1.4 + n = h2 )

单行行高h = s * 1.4。其中s >=20，s是字阶大小，1.4是基础倍数

多行行高h2 = s * 1.4 + n

其中s是字阶大小，s >=20s ，其中n >=6的偶数，n是行间距(n=2a，a是自然数，a>=3)；

我们也按照规律总结的常用字阶对应的多行行高，可进行参考对比：

如果是强迫症患者+处女座情结还可以继续进行如下操作：

三、我们在sketch中直接设置多行行高解决了设计师单行重复排版工作量大的问题，但是引发了一个新问题，就是多行文本的整体高度和我们一开始设置的多行行间距的整体高度不一致，发现如果在sketch中直接设置多行的文本高度如果需要与之前一致，必须减去多行文本的固定间距n，我快把自己绕进去了。举个例子：

排版时字阶24px，多行文本行数3行，sketch中多行行高是40px，整体高度是40*3=120px，当我们单行文本行高34px增加行间距+6px得出的整体行高时114px，因为在sketch中单行文本排版时不计算首行上部间距和末行下部间距，所以如果想在sketch中直接设置多行行高但是能达到单行增加行间距的标准效果，需要在320px的基础上减去n，也就是单行的固定行高6px，120 - 6 = 114px，这样才能吻合。

多行整体高度h3= h2 * 行数 - n。n为每个字阶多行需增加的行间距。

设计验证

同时为了验证我们的结论，我们在设计稿中分别对字阶24px、26px、28px这三种常用的多文本在sketch中进行设计排版。

同时把规范公式给到开发，与开发进行落地验证，开发直接帮我们写了一个小demo，测试了单行和多行的展示效果(https://juejin.im/post/5abc54edf265da23826e0dc9)：

18年就有开发在ios和android两端实现这个效果，而且他们自己写的代码也是自己不断进行各种调试最终得到的，基本是可以满足移动端日常的常态多行文本设计需求。如果系统中使用到特殊字体，可按照字体大小并根据具体情况重新进行定义，也可以和开发进行自定义联调。

总结

如果你想完美落地你的设计稿，行高必须是不断的和开发进行联调，所以我们总结出适用于我们及TO.B端业务项目的单行和多行行高两种一般性规律，大家也可以根据自己项目情况进行总结，欢迎设计师们一起进入UI的微观世界和我们进行交流探讨。

番外

因为设计中的各种元素解构以后其实都是有规律可循，有理论依据。由于设计师们心里扎实基础的理论基础都变换成了你手上精湛的技术，所以小伙伴们在设计稿子的时候是没有问题的，都能运用的游刃有余。BUT口头禅不小心就脱口而出“我觉得”、“我认为”。我能理解你，你的觉得和认为其实是对的，只是其他人缺少了美术和设计方面理论基础的训练，他就会觉得你在自己意淫，所以我们必须继续强大自己，将自己心里扎实的理论依据在嘴上发挥出淋漓尽致的效果，让他们都措(bu)手(fu)不(lai)及(si)～

文章版权归原作者所有，内容为作者个人观点，目的在于分享信息，转载文章首先需要征得作者授权。

作者

赵骏   O2O平台交易产研中心体验设计部  视觉设计师

『特长』程序员鼓励师

『属性』直男但嘴甜

『爱好』旅行