全栈工程师?
嗯.....目前并不是!

字階之美 | 字階在設計中的應用

起因是很久之前看到了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(已獲原作者授權),微信公眾號:李李先森的康

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《字階之美 | 字階在設計中的應用》
文章链接:https://www.pmbear.com/%e5%ad%97%e9%9a%8e%e4%b9%8b%e7%be%8e-%e5%ad%97%e9%9a%8e%e5%9c%a8%e8%a8%ad%e8%a8%88%e4%b8%ad%e7%9a%84%e6%87%89%e7%94%a8/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们