字階之美 | 字階在設(shè)計(jì)中的應(yīng)用

0 評(píng)論 3552 瀏覽 12 收藏 9 分鐘

起因是很久之前看到了Ant Design 3.0 背后的故事后,覺(jué)得驚嘆又有趣,去年偶然得知螞蟻團(tuán)隊(duì),在關(guān)于字階這一塊推導(dǎo)的計(jì)算的公式便是參考的這一篇文章,便將其翻譯出來(lái)與大家分享。這篇文章比較老了,原作者在2011年11月發(fā)布在他的個(gè)人網(wǎng)站上(文末附鏈接),文章可能有些枯燥,耐心看下來(lái)還都是挺有趣的小知識(shí)。

印刷字號(hào)比例尺(字階)被用作營(yíng)造頁(yè)面版面平衡與和諧已經(jīng)有好幾個(gè)世紀(jì)了。它是現(xiàn)代印刷業(yè)的基石,下圖Bringhurst先生在《字體排印風(fēng)格要素The Elements of Typographic Style》(見(jiàn)文末介紹)中記錄的經(jīng)典的印刷字階。

【譯】字階之美 The typographic scale

經(jīng)典印刷字階中的字體尺寸是保持一定韻律變化的,好似音階的音符。因?yàn)榻?jīng)典印刷字階是一個(gè)比例關(guān)系,必須遵守一定的比例關(guān)系r,比如:在這個(gè)字階中x是一個(gè)字號(hào)大小,那么r*x對(duì)應(yīng)的字號(hào)大小也一定也在這個(gè)字階里,這里的r就是這個(gè)字階中的比例關(guān)系。該比例就是這個(gè)字階中的定義屬性,我們可以使用這個(gè)屬性把經(jīng)典印刷字階中的尺寸拓展到更大的字體尺寸上。

【譯】字階之美 The typographic scale

經(jīng)典印刷字階的拓展

6pt、12pt、24pt和48pt的字號(hào)尺寸都出現(xiàn)在這個(gè)字階中,這個(gè)字階中,字號(hào)大小的比例都是2倍的關(guān)系。在古典音階中,這個(gè)比例關(guān)系也是2。在鋼琴上彈C調(diào)時(shí),每一個(gè)音符震動(dòng)的速度,是前一個(gè)的兩倍,經(jīng)典字階和古典音階非常像。

字階中的第二個(gè)定義屬性是數(shù)字n,在經(jīng)典印刷字階中,每一個(gè)間隔區(qū)間有5個(gè)字體尺寸,經(jīng)典印刷字階與爵士或者絕大部分傳統(tǒng)音樂(lè)中的五音階的十分相似。

第三個(gè),也是最后一個(gè)字階的定義屬性是字階中的基頻(基準(zhǔn)頻率) f0,在經(jīng)典印刷字階中,基頻就是“派卡”,一派卡=12pt,這個(gè)是印刷中的基礎(chǔ)字體大小,在這些比例當(dāng)中,第i個(gè)字號(hào)的與頻率fi滿足以下的通用公式:

【譯】字階之美 The typographic scale

使用這個(gè)公式,我們可以推導(dǎo)出經(jīng)典印刷字階中的每一個(gè)字體大小,同時(shí)我們也可以將這些值與傳統(tǒng)排版師依靠經(jīng)驗(yàn)得出的值進(jìn)行比較。

【譯】字階之美 The typographic scale

(上:經(jīng)典印刷字階 下:排版師經(jīng)驗(yàn)得出的值)

這么看來(lái)人本身的直覺(jué)還是相當(dāng)不錯(cuò)的:這些依靠經(jīng)驗(yàn)得出字體大小和經(jīng)典印刷字階的字體大小十分相似,他們之間僅有非常小的差異。

  • 首先,有四個(gè)字號(hào)不在表中,分別是:28pt、32pt、42pt、55pt這四個(gè)字號(hào),在字階中其他的字號(hào)大小都能夠相互完美的一一對(duì)應(yīng)上,不過(guò)這些丟失的字號(hào)與前面的字號(hào)基本上滿足一定的縮放比例關(guān)系,比如:16pt的字號(hào)的兩倍就是32pt。
  • 其次,60pt和72pt這兩個(gè)字號(hào)被近似的調(diào)整為最接近的12pt倍數(shù)(1派卡)的大小,最后的結(jié)果就是現(xiàn)代的排版師采用了兩個(gè)比原先更小的近似字號(hào)。
  • 最后一個(gè)問(wèn)題是,有兩個(gè)額外的字號(hào)根本就不在字階中,經(jīng)典印刷字階中每五個(gè)字號(hào)為一組,但是在傳統(tǒng)的字階表中第一組有六個(gè)字號(hào),11pt的字號(hào)并不在這個(gè)比例中,如果用樂(lè)器來(lái)演奏的花,這個(gè)會(huì)聽(tīng)起來(lái)刺耳或沉悶,因?yàn)?1pt恰好介于兩個(gè)字號(hào)中間,在音階中看的話,它是一個(gè)半音。(30pt的字號(hào)也是一樣)

在設(shè)計(jì)中的應(yīng)用:

pt是在印刷中的字號(hào)單位,但是在別的媒介中更適合用其他的字號(hào)單位,比如:在網(wǎng)頁(yè)設(shè)計(jì)中一般會(huì)用em和px作為字號(hào)單位,如果我們能將經(jīng)典印刷字階的大小擴(kuò)展至更多的媒介上面,也會(huì)很有幫助的。

此外,我們知道在為樂(lè)曲選擇不同的音階可以讓聽(tīng)眾產(chǎn)生不同的感受,那么我們選擇不同的字階是不是也會(huì)影響我們的視覺(jué)感受?

我們可以通過(guò)更改公式中的基頻f0,或者數(shù)字n,以及比例關(guān)系r這三種方式來(lái)變更字階。

  1. 通過(guò)變更基頻f0,我們可以讓字階適用于新的媒介,比如:當(dāng)f0 = 12 pt時(shí)我們可以生成適用印刷的字階,但是當(dāng)f0 = 1em時(shí)我們可以生成適用于網(wǎng)頁(yè)的字階。
  2. 通過(guò)改變刻度區(qū)間數(shù)n,我們讓變更字號(hào)數(shù)量變成可能。舉例:當(dāng)刻度區(qū)間中有n個(gè)字號(hào)時(shí),我們會(huì)得到n+2個(gè)有用的字號(hào)數(shù)量(算上一頭一尾):最小的尺寸,中間的基準(zhǔn)尺寸和其他一系列大小的字號(hào)。在經(jīng)典印刷字階中的n比較大,所以生成了數(shù)量較多的字號(hào)。但在有的設(shè)計(jì)中會(huì)更加的簡(jiǎn)潔,n值會(huì)比較小,畢竟有時(shí)候少即是多。
  3. 通過(guò)改變比例關(guān)系r,你就能調(diào)整字號(hào)變更的的速率。一般有兩個(gè)常見(jiàn)的比例:古典音階比例r=2或黃金比例r=1.618034。在我們平時(shí)上網(wǎng)的時(shí)候,網(wǎng)頁(yè)上標(biāo)題的字號(hào)一般都是正文的兩倍大,這意味著任何基于音樂(lè)比例的設(shè)計(jì)都會(huì)看起來(lái)比較漂亮,標(biāo)題和正文之間看作是音符,那么他們之間正好似乎二倍頻程的關(guān)系。

這里列出了一些基于最美音階的字階變換:

【譯】字階之美 The typographic scale

音樂(lè)三聲音階

【譯】字階之美 The typographic scale

音樂(lè)四聲音階

【譯】字階之美 The typographic scale

音樂(lè)五聲音階(也被稱為“經(jīng)典印刷字階”)

【譯】字階之美 The typographic scale

黃金比例音階

不過(guò)在不同的情況下,還是要根據(jù)場(chǎng)景采用不同的最合適的方式。比如:網(wǎng)頁(yè)中短小精悍的標(biāo)題可能更適合采用更大的比例(比如r=4),這樣會(huì)讓標(biāo)題更加的有沖擊力,并且和頁(yè)面上的其他元素保持平衡。

譯注:《字體排印風(fēng)格要素》是設(shè)計(jì)師Robert Bringhurst用詩(shī)意唯美的語(yǔ)言深入淺出簡(jiǎn)潔凝練介紹了字體排印的歷史源流、理論實(shí)踐以及技術(shù)革新,此書(shū)被譽(yù)為字體排印最具權(quán)威指南。

 

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

原文作者:Spencer Mortensen

翻譯:Mr.李lee(已獲原作者授權(quán)),微信公眾號(hào):李李先森的康

本文由 @Mr.李lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!