面向前端的设计规范-文字初探-Part1

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

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

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

1、主字号

这是来自「 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。

2、字阶

上图是「 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、四、八、十二、1六、20、2四、2八、3二、36 .... 可是能够看到这个是一个线性增加的函数，并不能体现以前提到的音阶的韵律之美。

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

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

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

因而咱们基于「 斐波那契数列 」和 「 字号=4n 」的数学公式，分别以0、四、八、12为起点，能够得到如下4个字阶序列：

0为起点：0、四、八、1六、2八、4八、80...

4为起点：四、八、十二、20、3二、5二、84...

8为起点：八、十二、1六、2四、3六、5六、88...

12为起点：十二、1六、20、2八、40、60、92...

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

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

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

3、行高

「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 地址：github.com/ziven27/blo…