排版干貨 | 字號大小與設計比率之美

Sponsor

本文要點：了解字號大小以及設計比率。在本文你會發現我們設計中字體大小、印刷比例、黃金比例等等竟然很音樂有關，真是一個有趣的事情:) 以下是原文。

設計師工作最明顯的問題可能是第一個是“我應該使用哪種字體？” 那么第二個問題呢，“我應該將我的字號設置為多大？”這個問題我相信一般很少會有人關注到。作為設計作品的重要載體之一，僅字體的大小也可以傳達明顯不同的構圖，和聲，節奏，重復，形式，主題；甚至顏色，紋理和色調。

什么是字號梯度？

Don’t compose without a scale.

不要在沒有比例的情況下就開始創作?！?羅伯特·布林赫斯特

字號梯度最早被稱為印刷比例尺，它們是一組字符比列的有序排列。它們以一種有意義的方式相互關聯，以此來創建出具有一致性、和諧性和對比性的效果。例如使用黃金比率，通過乘除1.618 得到一套比率的值。

6-72的字號大家是不是非常熟悉卻又陌生呢？你在平時工作的時候是直接選用上面的字號梯度還是自己隨機生成呢？你是否有好奇過這么一組數字是哪里來的，為什么你所能看見的絕大部分的設計、工作類軟件都用的是這一組字號梯度？

經典印刷比例的由來？

最早期可以說到文藝復興時期，鑄造金屬和凸版印刷的時代，字體是物理對象。 每個字母表中的每個字母都必須按照打印機想要使用的每種尺寸來進行購買。 對于制造它們的工廠和購買它們的打印機來說，字體大小占用了大量的空間并且花費了很多錢，太昂貴了。因此，對某些常用尺寸進行標準化是節省資金的一種方法。

印刷術者用金屬切割字體時，出于實際原因選擇了這些6-72的字體大小。印刷工人可選擇的字體范圍很小。并且由于他們還需要根據當時實際印刷的需要，選擇更多種類的小字體。因此，印刷術者逐漸將可用的尺寸范圍定下來，并且制定了一套規則。較小字體大小之間的縮放比例小于較大字體大小。小尺寸將增加+1（尺寸為6至12），然后下一個系列將增加+2（尺寸為12至18），然后增加+3（尺寸為21至24），然后再增加+12（尺寸為24至72），依此類推（上圖所示）。

由此，這套字號比例初步建立，在接下來的400年中，這套比例幾乎沒有變化，也幾乎沒有增加，一直被保存至今。這套比例也成為世代印刷者的制約因素和便捷工具。所以我們仍然可以看到它仍在當今的各大類軟件中使用。幾個世紀以來，印刷尺度一直被用作創造平衡和諧的字體尺寸的手段。 它是現代排版的基石，是經典的印刷比例。

音樂和視覺上的和諧：音樂、和聲、比例

實際上，建立印刷比例的起源不僅來自實際需要，還來自審美判斷。排字員將可用的尺寸范圍定下來的時候，就考慮了如何讓這些字號組合起來更加和諧。

好的比例吸引我們的目光的原因在某種程度上和音樂和聲取悅我們的耳朵是相同。他們同樣也都可以表達為：構圖，和聲，節奏，重復，形式，主題；甚至顏色，紋理和色調。

我們知道，早期的6-72的印刷比例其實在一定程度上，更多是依靠應刷者的“直覺經驗”來建立的，這套比率的出現以及它在視覺上的和諧與音樂傳達的感覺非常接近，那么他們之間是不是有更多可以被探索和計算的呢？

真是無巧不成書，其實是可以被一套公式驗證并計算出來的。如果：a1 =（a × ?r）取整數位，其中 a = 12和 r =5 √ 2。通過該公式計算出來的結果6、7、8、9、10、12、14、16、18、21、24、28、32、36、42、48…非常接近，它包含“印刷比例尺”中除11以外的所有數字。這時候我們肯定會有疑惑，為什么這組數列就是和諧的？那么接下來，我們一起來探索一下，音樂、和聲和比例的關系。

音樂不僅鍛煉著聽覺，還鍛煉著我們的情感和想象力。都說設計師在做圖的時候喜歡聽歌，而且聽歌會給我們帶來更多的靈感，那么比例吸引我們目光的原因與音樂取悅我們的耳朵的原因幾乎是相同的。

如果把音樂比作設計，我們可以說屏幕設計中旋律是設計的內容，內容的布局和排列是和諧的。我們也可以認為，當設計中不同元素之間的互相影響是令人愉悅、平衡或成比例的，并且內容（旋律）被設計所恰當地傳達或表現出來時，它就是和諧的。那么這種和諧有點抽象，難以抓住。如何能讓它更具象一點呢？可以被科學的計算出來嗎？

當然可以，通過對6-72印刷比例尺與八度音階進行研究，發現這套比率的結構和音樂的基礎結構是可以換算出來的。假定 a = 12pt ，在印刷比例尺中，將12和24之間分為五個步驟，這與音符的頻率組成不謀而合，我們假定印刷比例是五音階（帶有五個音符）。因此，我們的三個屬性分別是r = 2，a = 12pt和n = 5。使用幾何級數公式，我們得到以下序列6、7、8、9、10、12、14、16、18、21、24、28、32、36、42、48、55等。我們可以看到這與之前的序列相同。（八度音階是最基本的和聲，即是我們所知道的遠古時代的人能接受的最基本的和諧的聲音）

既然和諧是可以被計算出來的，那么其他被認可的和諧的旋律當然也是可以被計算出來的。在此基礎之上，畢達哥拉斯經過研究探索得到了更多的音樂間隔比率。

這就包含了我們目前公認的絕大部分和諧的比率，比如我們常見的 ?[斐波那契數列]（ 1、2、3、5、8、13、21…）， [盧卡斯數]（ 1、3、4、7、11、18…）， ?[五角數系列] （1、2、5、7、12、15、22…）或任何其他美妙的序列。你會發現絕大部分優秀的設計在都這套范圍之中。

音樂從根本上說也是一種數學闡釋，你也會發現，很多著名企業的設計語言的規范定義都是遵循如此科學的研究成果之中，Antdesign 在大二調的基礎上 10 個不同尺寸的字體序列，IBM 的設計語言……設計規范中的字號比例、響應式的適配比率、構圖……

如何使用音樂間隔比率

當我們熟悉并了解這些和諧的音樂間隔比后，制作一套模塊化比例就很容易了。例如，在項目開始時選擇好字體，選擇使正文看起來最清晰的大小作為項目模塊化比例的基礎。例如16pt，我們將乘以16以創建比例。當然，整個和諧的比例系統還是要建立在整體的視覺決策上，并在整個體驗中能引起共鳴以達到更好的效果。

• 10.000 * 1.618 = 16.180
• 16.180 * 1.618 = 26.179
• 26.179 * 1.618 = 42.358
• 42.358 *…
• 10.000 / 1.618 = 6.180
• 6.180 / 1.618 = 3.819
• 3.819 / 1.618 = 2.360
• 2.360 /…

當然如果你不愿意計算，也可以去Modular Scale在線生成工具計算。

如何運用到實際案例中？

當我們在設計中，不管是圖形還是字號，首先需要制定一套清晰的設計原則來貫穿全局，假定我們已經有了一套設計原則，現在需要設計一個如下banner，字號的選擇，布局的比例該如何去做？

板式的選擇，我們最常見的在設計中應用最多的幾種比例計算大家應該都很熟悉：等差數列、等比數列、斐波那契數列（兄弟數列：盧卡斯數），等差數列f (n)=f (n+1)、等比數列f (n)=f (2n)……

當然，布局、文字、圖片大小等不一定都只使用一套固定的比率，具體還是要看你要表達的是什么。比如說：

1.體現活潑：那等差數列明顯過于平緩不夠跳躍、等比數列跳躍過大，黃金比既滿足活潑的同時也更加具有韻律；

2.體現安靜：等比和黃金比都過于跳躍，等差又過于平穩，那就可以介于小二度 —— 大六度之間再去對比更合適的比率；

3.以此類推…

我們以設計Banner為例：

1.選擇合適的比率

假定我們這里選擇了斐波那契數列，即黃金比率，因為本文大部分內容都是基于經典的印刷比例的研究，并尋求傳統的經驗的指導，而恰好黃金比率（1：1.618）就是最具有歷史和文化聯系的比率，文藝復興時期作品中的文本比例大多也是也基于黃金比率，所以黃金比率應用于本次案例非常合適。

2.根據選定比率計算排列

確定比率后，我們首先需要確定整體布局，我們以黃金比率為基準來計算本次案例的設計組成部分：布局、字號、間距、圖形……當然一套作品中，你是可以選擇多套比率，但是最好是這些比率之間你能找到最佳的組合效果，如下圖，我們使用黃金比率來進行布局的留白計算、圖文占比、元素占比等，使用增強四度來進行內容的計算。注意：如果這套比率計算的實際序列組合不能形成很好的視覺效果，那么一點請靈活調整！因為畢竟最經典的比率都會有各別的誤差。

3.將選的序列應用與調試

在最后使用的過程中，或多或少的也會發現有一些序列是不合適的，那么我們可以在數列的基礎上靈活選用，如果覺得比率計算的數列較為密集，我們也可以跨級選取。但要確保最終的節奏和韻律是相對統一的。

最后

不管是經典數列還是音樂間隔比，這些比率可能不會立刻給你帶來設計上的迅猛提升，但是可以讓你的設計有法可循，有據可依，在深層次的美學層面上起逐漸發揮更大的作用。當然，在設計中，眼睛永遠是主宰的，在遵循這些原則的同時，也需要我們去做更多的探索，探索不同的領域，探索更多的融合。

參考閱讀

1.《版式風格要素》羅伯特·布林赫斯特

2.《印刷比例尺》西蒙森·斯賓塞

3.《類型量表》杰里米·丘奇

4.《為什么模塊化比例是好方法》Wenting Zhang

5.《探索響應量表》約瑟夫·穆勒

作者 | Frannnk
來源 | UI中國（i.ui.cn/ucenter/265870.html）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。