字阶之美 | 字阶在设计中的应用
2019-04-17
起因是很久之前看到了Ant Design 3.0 背后的故事后,觉得惊叹又有趣,去年偶然得知蚂蚁团队,在关于字阶这一块推导的计算的公式便是参考的这一篇文章,便将其翻译出来与大家分享。这篇文章比较老了,原作者在2011年11月发布在他的个人网站上(文末附链接),文章可能有些枯燥,耐心看下来还都是挺有趣的小知识。
印刷字号比例尺(字阶)被用作营造页面版面平衡与和谐已经有好几个世纪了。它是现代印刷业的基石,下图Bringhurst先生在《字体排印风格要素The Elements of Typographic Style》(见文末介绍)中记录的经典的印刷字阶。
经典印刷字阶中的字体尺寸是保持一定韵律变化的,好似音阶的音符。因为经典印刷字阶是一个比例关系,必须遵守一定的比例关系r,比如:在这个字阶中x是一个字号大小,那么r*x对应的字号大小也一定也在这个字阶里,这里的r就是这个字阶中的比例关系。该比例就是这个字阶中的定义属性,我们可以使用这个属性把经典印刷字阶中的尺寸拓展到更大的字体尺寸上。
经典印刷字阶的拓展
6pt、12pt、24pt和48pt的字号尺寸都出现在这个字阶中,这个字阶中,字号大小的比例都是2倍的关系。在古典音阶中,这个比例关系也是2。在钢琴上弹C调时,每一个音符震动的速度,是前一个的两倍,经典字阶和古典音阶非常像。
字阶中的第二个定义属性是数字n,在经典印刷字阶中,每一个间隔区间有5个字体尺寸,经典印刷字阶与爵士或者绝大部分传统音乐中的五音阶的十分相似。
第三个,也是最后一个字阶的定义属性是字阶中的基频(基准频率) f0,在经典印刷字阶中,基频就是“派卡”,一派卡=12pt,这个是印刷中的基础字体大小,在这些比例当中,第i个字号的与频率f
使用这个公式,我们可以推导出经典印刷字阶中的每一个字体大小,同时我们也可以将这些值与传统排版师依靠经验得出的值进行比较。
(上:经典印刷字阶 下:排版师经验得出的值)
这么看来人本身的直觉还是相当不错的:这些依靠经验得出字体大小和经典印刷字阶的字体大小十分相似,他们之间仅有非常小的差异。
在设计中的应用:
pt是在印刷中的字号单位,但是在别的媒介中更适合用其他的字号单位,比如:在网页设计中一般会用em和px作为字号单位,如果我们能将经典印刷字阶的大小扩展至更多的媒介上面,也会很有帮助的。
此外,我们知道在为乐曲选择不同的音阶可以让听众产生不同的感受,那么我们选择不同的字阶是不是也会影响我们的视觉感受?
我们可以通过更改公式中的基频f0,或者数字n,以及比例关系r这三种方式来变更字阶。
这里列出了一些基于最美音阶的字阶变换:
音乐三声音阶
音乐四声音阶
音乐五声音阶(也被称为“经典印刷字阶”)
黄金比例音阶
不过在不同的情况下,还是要根据场景采用不同的最合适的方式。比如:网页中短小精悍的标题可能更适合采用更大的比例(比如r=4),这样会让标题更加的有冲击力,并且和页面上的其他元素保持平衡。
译注:《字体排印风格要素》是设计师Robert Bringhurst用诗意唯美的语言深入浅出简洁凝练介绍了字体排印的历史源流、理论实践以及技术革新,此书被誉为字体排印最具权威指南。