在最初CSS还没有流行起来的时候，网页就是类似以 Word 的文本样式呈现的。去掉各种花里胡哨的样式，和装饰图片之后，留下的文字才是网页本来的样子，而这才是我们真正想要对用户说的话。文字几乎是网页的灵魂。

最近一直在研究面向前端的设计规范。给我印象最深的来自「 Ant Design 3.0 背后的故事」这篇文章，老实说里面的那些数学公式看得我还是比较心累的。但是里面的观点，却是给了我很大的启发。

在讲文章之前我必须要提到的是，本文主要是在探究，面向前端的设计规范在文字方面的可行性。所以美是目的，但一定不是本文终点。我们要追求的，是在美和工程化之间找到一个利益平衡点。

一、主字号

这是来自「 Ant Design 3.0 背后的故事」的高级公式。其实原理很简单，就是网页主字号的选取和我们用户离显示器的距离有直接关系。近大远小，这就和你家客厅沙发和电视墙的距离影响着你买电视的大小是一个道理。最终「 Ant Design 」将主字号定在了覆盖面更广的 14px 。

理论是对的，但是「 Ant Design 」给出的这个结果和这个理论感觉没有什么关系。仅仅是因为 14px 的字号能保证大约 77% 的显示器用户处于比较好的阅读体验，那把字号选在覆盖面更高的 16px 不是更好吗？

而且字号大小并不是决定网页可读性的唯一条件，毕竟字体，颜色，间距等等之类的也同样对阅读有着不同程度的影响，我觉得最终主字体应该是全局博弈之后的结果。

回到我们面向前端的设计规范来说，主字号的选择其实是非常简单的。因为能作为我们主字号的字体，只有12px、14px、16px，这三个字体。再大一点字看起来就很大，很像老年机了。 12px 可读性又太差，那么可选的就只剩下了 14px、16px 这两种。结合当前自己的设计风格，想要呼吸感就用 16px ，想要紧凑一点就 14px ，这个就看设计师心情了。

但是前端这边推荐 16px。因为 16 刚好是 2 的 4 次方，被缩小 3 倍也不会出现小数，这对于设计的缩放和拓展，以及最终浏览器的渲染都是非常友好的。巧的是 16px 也是我们网页默认文字的大小，不知道这个是不是冥冥之中注定的。

结论，面向前端的设计规范推荐主字号使用 16px。

二、字阶

上图是「 Ant Design 」基于「 Robet Bringhurst 」提出的经典的字阶和古典音阶具备韵律上的相似性。以及「 Spencer 」提出的一个幂函数的字体计算公式，选择了以 14px 为起点，给到的字阶推演公式。

然后采用偶数原则和简化记忆原则进行微调。得到了他们自己准确字阶线。并证实设计师用这样的方式一共反复尝试了近 200 多张页面的设计，覆盖了后台大部分类型的场景。能得到如下结论：

新的字阶在落地中可以实现更为和谐的界面结果；
设计师在使用这一套字阶的时候明显感觉到设计决策的过程变的轻松很多；
不同的设计师产出页面一致性都比以前有了明显的提升；

真的非常佩服「 Ant Design 」团队极致追求美学所作出的努力。但是，我想说的是看到这个我其实是有一点慌的。因为我并不认为字阶和主字号有着必然的联系。你有了一个韵律，不管你从哪里开始唱，韵律还是那个韵律，只是起点不一样而已。所以明显感觉以 14 为基数有一点牵强。

然后更好玩儿的地方是，我在知乎上看到关于「 Ant Design 」的评论的时候了解到，音阶和自然常数 e「 2.71828 」是没有关系的。而且三音阶四音阶五音阶七音阶的频率都不是等分的（所以不是指数增长的），只有平均律（十二音阶）才是等分、指数增长的。这里对错我们就不去深究了，也不是重点，只是想说明这个方程式从音律这个角度来说是不具有通用性的。然而巧的是我在后面的评论里，直接发现了更符合音阶理论的字阶结论：

Major Second (大二度)： 1.125
Minor Third (小三度)： 1.200
Major Third (大三度)： 1.250
Perfect Fourth (纯四度): 1.333
Augmented Fourth (增四度): 1.414
Perfect Fifth (纯五度)： 1.500
Golden Ratio (黄金分割率): 1.618

就是文字直接按照上面的数字，递增就能呈现与之对应的音阶美感。既然都有了结论，那是不是到这里就结束了呢？然而一切不是这么的简单。我们分别以推荐的主字号 14，16 为起点，进行音阶换算能得到如下的字阶列表。

可以看到音乐韵律之美，其实无非就是一条曲度不同的幂函数。曲度陡一点，音乐就明快，曲度换一点音乐就舒缓。照理来说根据产品风格我们选择那一条都可以。

然而可以从上表结果可以看出，如果我们以最左边小二度「 1.067 」作为我们字阶韵律，取整之后我们能得到的序列变化非常的小基本是以步长为 1px 的节奏递增的。显然这么小的韵律变化，我们人的肉眼是无法辨别的。

如果我们以最右的黄金分割率「 1.618 」作为我们字阶韵律，我们能得到的可用字号太少了，这显示是不够用的。这样我们一下就将可选择项限制在了从大二度到纯五度这 6 个音阶之中。但是在6个音阶之中，最后得到的字号当中基本都是小数和偶数。我们还得基于偶数原则去微调这些曲线。

天哪，光是要理解这套理论，我就已经耗费掉大量脑细胞了，又谈何推广。这让我深深让我怀疑，直接将音阶映射到字阶的可行性。但有一点我们是得承认的，就是如果我们的文字增长有音阶的韵律会显得更美。对于音阶的探讨我们暂时放一放。我们尝试换一种思路？

在我认为工程化比较好的设计规范「 Material Design 」中对于行高有一个规则是「 4dp baseline Grid 」，就是所有文字的行高都是 4 的倍数，会大大降低排版的复杂度。

可是如果我们的文字的大小，不是 4 的倍数的话，行高其实是很难做到 4 的倍数的。所以根据这个理论，我们字号的选择就限制在了一个极其简单的数学公式：「字号=4n 」之中。可以看到最终可选的字号的数组就是： 0、4、8、12、16、20、24、28、32、36 .... 但是可以看到这个是一个线性增长的函数，并不能体现之前提到的音阶的韵律之美。

所以我们需要一条美的带韵律的曲线，既然我们是谈论视觉为啥不直接利用视觉的曲线呢？而要和相对较远的音律扯上关系呢？

相信大家和我一样，都知道公认的视觉美学中的「黄金分割」理论。而和黄金分割相关的曲线就是「斐波那契数列」了。

科普以下：斐波那契数列，又称黄金分割数列指的是 1、1、2、3、5、8、13、21、34... 这个数列从第 3 项开始，每一项都等于前两项之和。而且当 n 趋向于无穷大时，前一项与后一项的比值越来越逼近黄金分割 0.618「或者说后一项与前一项的比值小数部分越来越逼近0.618 」。

于是我们基于「斐波那契数列」和「字号=4n 」的数学公式，分别以0、4、8、12为起点，可以获得以下4个字阶序列：

0为起点：0、4、8、16、28、48、80...

4为起点：4、8、12、20、32、52、84...

8为起点：8、12、16、24、36、56、88...

12为起点：12、16、20、28、40、60、92...

可以看到这4条线中，只有后两条线是同时含有我们常用的 12 和 16 字号的，并且可用的字号大于 4 个的，所以我们可选的曲线就只剩下后面两条了。可以看到这两条曲线的区别在于，字号之间的增长律。以8为起点的字阶，在0～100这个区间增长相对要慢一点，而12为起点的字阶要陡峭一点。这个感觉可以根据产品风格和设计喜好选取就好。

我们花了大量的时间，去找了各种曲线，不管是从音律还是从视觉黄金分割的角度。这对于设计师字体的选择有什么指导意义呢？很简单，当设计师定义了一条字阶曲线之后，我们就能理性的判断某个字体是不是符合我们的规范，更或者说换一个设计师也能通过这个曲线扩充我们的字阶序列。

而最终的结论，基于我们面向前端的角度思考，我们希望这个字号能够尽量满足「字号=4n 」。因为这能给前端减轻很多的布局上的麻烦，和规避字号带来的兼容性问题。也推荐设计师尝试用一下我用「斐波那契数列」推导出的两条，即符合美学又贴近前端，但是缺乏实践数据支撑的字阶曲线。

三、行高

「Ant design 」对于行高的推导过程，和字阶一样，又太多不相关的变量，我们这边还是不要深究了，但是结论「行高 = 字号 + 8 」，这个理论光从「易懂」这个角度，就非常符合我们面向前端的设计思想了。我这边就尝试从更多面向前端的角度去重新推导一下这个理论。

上图左侧所有的行高都是按照字号的 1.5 倍「前端常用的行高字号比值」设定的，而后面的行高是近似让不同字号之间的间隙尽量保持一致设定的。可以很明显的看到，右边会相对舒服一点。为什么呢？

在我看来，我们需要行高是为了让上一行的文字和下一行的文字之间有呼吸的空间。如果这个呼吸空间一致，那么我们会觉得更自然。你想如果你每次呼吸的节奏和平时不一样了，那要不是你看到美女，要不就是生病了。而不同字号之间相同的字间隙也非常符合设计的四大原则中的「对齐」和「重复」。基于这个逻辑我们可以得到这样一个公式：「行高 = 字号 + n 」。而这个 n 我们面向前端的设计规范希望是一个定值。

从右侧我们还可以看到这样一个规律，就是随着字号增大，「行高／字号」的这个比值是无限趋近于 1 的。我们索性就那这个 1 作为我们的终点，所以我们只需要找到我们的起点就能解出我们的方程。

我们知道网页中推荐的最小字号为 12 所以我们以这个字号作为我们的起点。那怎么去求这个 N 呢？没办法我们又不得不回到我们唯一知道的美学理论「黄金分割」。我们尝试让「 12*1.618 = 19.416 」来作为我们的起点行高。不过怎么又是小数，怎么办呢？

在介绍字阶的时候我就提到「 Material Design 」的「 4dp baseline Grid 」规范。这个规范里面定义「行高 = 4n 」。所以我们将这个「 19.416 」调整到了最接近 4n 倍数的值「 20px 」。而在我看来「 20px - 19.416px 」这不到 1px 的误差在网页环境中对于美学的影响，是完全可以忽略的。毕竟很少有浏览器能完美渲染小于 1px 的元素。于是结合我们之间的「行高 = 字号 + n 」这个公式，我们就能求出这个 n=8。

到这里我们通过完全不同理论得到了和「Ant Design」一致的结论：行高 = 字号 + 8 。

总结

还没写完，待续....

「 Update at 2018/05/01 」面向前端的设计规范-文字初探-part2

github 地址：https://github.com/ziven27/blog/issues/19