字阶之美 | 字阶在设计中的应用

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解一下

起因是很久之前看到了Ant Design 3.0 背后的故事后,觉得惊叹又有趣,去年偶然得知蚂蚁团队,在关于字阶这一块推导的计算的公式便是参考的这一篇文章,便将其翻译出来与大家分享。这篇文章比较老了,原作者在2011年11月发布在他的个人网站上(文末附链接),文章可能有些枯燥,耐心看下来还都是挺有趣的小知识。

印刷字号比例尺(字阶)被用作营造页面版面平衡与和谐已经有好几个世纪了。它是现代印刷业的基石,下图Bringhurst先生在《字体排印风格要素The Elements of Typographic Style》(见文末介绍)中记录的经典的印刷字阶。

【译】字阶之美 The typographic scale

经典印刷字阶中的字体尺寸是保持一定韵律变化的,好似音阶的音符。因为经典印刷字阶是一个比例关系,必须遵守一定的比例关系r,比如:在这个字阶中x是一个字号大小,那么r*x对应的字号大小也一定也在这个字阶里,这里的r就是这个字阶中的比例关系。该比例就是这个字阶中的定义属性,我们可以使用这个属性把经典印刷字阶中的尺寸拓展到更大的字体尺寸上。

【译】字阶之美 The typographic scale

经典印刷字阶的拓展

6pt、12pt、24pt和48pt的字号尺寸都出现在这个字阶中,这个字阶中,字号大小的比例都是2倍的关系。在古典音阶中,这个比例关系也是2。在钢琴上弹C调时,每一个音符震动的速度,是前一个的两倍,经典字阶和古典音阶非常像。

字阶中的第二个定义属性是数字n,在经典印刷字阶中,每一个间隔区间有5个字体尺寸,经典印刷字阶与爵士或者绝大部分传统音乐中的五音阶的十分相似。

第三个,也是最后一个字阶的定义属性是字阶中的基频(基准频率) f0,在经典印刷字阶中,基频就是“派卡”,一派卡=12pt,这个是印刷中的基础字体大小,在这些比例当中,第i个字号的与频率fi满足以下的通用公式:

【译】字阶之美 The typographic scale

使用这个公式,我们可以推导出经典印刷字阶中的每一个字体大小,同时我们也可以将这些值与传统排版师依靠经验得出的值进行比较。

【译】字阶之美 The typographic scale

(上:经典印刷字阶 下:排版师经验得出的值)

这么看来人本身的直觉还是相当不错的:这些依靠经验得出字体大小和经典印刷字阶的字体大小十分相似,他们之间仅有非常小的差异。

  • 首先,有四个字号不在表中,分别是:28pt、32pt、42pt、55pt这四个字号,在字阶中其他的字号大小都能够相互完美的一一对应上,不过这些丢失的字号与前面的字号基本上满足一定的缩放比例关系,比如:16pt的字号的两倍就是32pt。
  • 其次,60pt和72pt这两个字号被近似的调整为最接近的12pt倍数(1派卡)的大小,最后的结果就是现代的排版师采用了两个比原先更小的近似字号。
  • 最后一个问题是,有两个额外的字号根本就不在字阶中,经典印刷字阶中每五个字号为一组,但是在传统的字阶表中第一组有六个字号,11pt的字号并不在这个比例中,如果用乐器来演奏的花,这个会听起来刺耳或沉闷,因为11pt恰好介于两个字号中间,在音阶中看的话,它是一个半音。(30pt的字号也是一样)

在设计中的应用:

pt是在印刷中的字号单位,但是在别的媒介中更适合用其他的字号单位,比如:在网页设计中一般会用em和px作为字号单位,如果我们能将经典印刷字阶的大小扩展至更多的媒介上面,也会很有帮助的。

此外,我们知道在为乐曲选择不同的音阶可以让听众产生不同的感受,那么我们选择不同的字阶是不是也会影响我们的视觉感受?

我们可以通过更改公式中的基频f0,或者数字n,以及比例关系r这三种方式来变更字阶。

  1. 通过变更基频f0,我们可以让字阶适用于新的媒介,比如:当f0 = 12 pt时我们可以生成适用印刷的字阶,但是当f0 = 1em时我们可以生成适用于网页的字阶。
  2. 通过改变刻度区间数n,我们让变更字号数量变成可能。举例:当刻度区间中有n个字号时,我们会得到n+2个有用的字号数量(算上一头一尾):最小的尺寸,中间的基准尺寸和其他一系列大小的字号。在经典印刷字阶中的n比较大,所以生成了数量较多的字号。但在有的设计中会更加的简洁,n值会比较小,毕竟有时候少即是多。
  3. 通过改变比例关系r,你就能调整字号变更的的速率。一般有两个常见的比例:古典音阶比例r=2或黄金比例r=1.618034。在我们平时上网的时候,网页上标题的字号一般都是正文的两倍大,这意味着任何基于音乐比例的设计都会看起来比较漂亮,标题和正文之间看作是音符,那么他们之间正好似乎二倍频程的关系。

这里列出了一些基于最美音阶的字阶变换:

【译】字阶之美 The typographic scale

音乐三声音阶

【译】字阶之美 The typographic scale

音乐四声音阶

【译】字阶之美 The typographic scale

音乐五声音阶(也被称为“经典印刷字阶”)

【译】字阶之美 The typographic scale

黄金比例音阶

不过在不同的情况下,还是要根据场景采用不同的最合适的方式。比如:网页中短小精悍的标题可能更适合采用更大的比例(比如r=4),这样会让标题更加的有冲击力,并且和页面上的其他元素保持平衡。

译注:《字体排印风格要素》是设计师Robert Bringhurst用诗意唯美的语言深入浅出简洁凝练介绍了字体排印的历史源流、理论实践以及技术革新,此书被誉为字体排印最具权威指南。

 

原文链接:http://spencermortensen.com/articles/typographic-scale/

原文作者:Spencer Mortensen

翻译:Mr.李lee(已获原作者授权),微信公众号:李李先森的康

本文由 @Mr.李lee 翻译发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!