字阶之美 The typographic scale

写在前面:起因是很久之前看到了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个字号的与频率fi 满足以下的通用公式:

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

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


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

首先,有四个字号不在表中,分别是:28pt、32pt、42pt、55pt这四个字号,在字阶中其他的字号大小都能够相互完美的一一对应上,不过这些丢失的字号与前面的字号基本上满足一定的缩放比例关系,比如16pt的字号的两倍就是32pt。

其次,60pt和72pt这两个字号被近似的调整为最接近的12pt倍数(1派卡)的大小,最后的结果就是现代的排版师采用了两个比原先更小的近似字号。

最后一个问题是,有两个额外的字号根本就不在字阶中,经典印刷字阶中每五个字号为一组,但是在传统的字阶表中第一组有六个字号,11pt的字号并不在这个比例中,如果用乐器来演奏的花,这个会听起来刺耳或沉闷,因为11pt恰好介于两个字号中间,在音阶中看的话,它是一个半音。(30pt的字号也是一样)

在设计中的应用

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

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

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

一、通过变更基频f0,我们可以让字阶适用于新的媒介,比如当f0 = 12 pt时我们可以生成适用印刷的字阶,但是当f0 = 1em时我们可以生成适用于网页的字阶。

二、通过改变刻度区间数n,我们让变更字号数量变成可能。举例:当刻度区间中有n个字号时,我们会得到n+2个有用的字号数量(算上一头一尾):最小的尺寸,中间的基准尺寸和其他一系列大小的字号。在经典印刷字阶中的n比较大,所以生成了数量较多的字号。但在有的设计中会更加的简洁,n值会比较小,毕竟有时候少即是多。

三、通过改变比例关系r,你就能调整字号变更的的速率。一般有两个常见的比例:古典音阶比例r=2或黄金比例r=1.618034。在我们平时上网的时候,网页上标题的字号一般都是正文的两倍大,这意味着任何基于音乐比例的设计都会看起来比较漂亮,标题和正文之间看作是音符,那么他们之间正好似乎二倍频程的关系。

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

音乐三声音阶
音乐四声音阶
音乐五声音阶(也被称为“经典印刷字阶”)
黄金比例音阶

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

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

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

作者:Spencer Mortensen

翻译:李李先森的康

本号全部文章非本人授权,禁止转载

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容