网页设计 » 视觉设计 » 字阶在设计中的应用

字阶在设计中的应用

发表于: 视觉设计. 评论
赞助商链接

版面的平衡与和谐依赖于字阶之间的比例,和设计组合中常用的黄金比例相似,字阶是辅助设计的一种数学比例,过去常出现在印刷业中。随着多种媒介的兴起和普及,字阶也不限于印刷中使用,可以拓展至我们各种媒介的设计中。今天这篇文章,主要讲述字阶的特征以及在设计中的应用,建议大家认真理解,思考字阶在数字世界中的换算和迁移,使我们的设计更具数学比例之美。

字阶在设计中的应用

印刷字号比例尺(字阶)被用作营造页面版面平衡与和谐已经有好几个世纪了。它是现代印刷业的基石,下图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用诗意唯美的语言深入浅出简洁凝练介绍了字体排印的历史源流、理论实践以及技术革新。此书被誉为字体排印最具权威指南。

作者:李李先森的康,微信公众号:李李先森的康

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。