本文要點(diǎn)：了解字號(hào)大小以及設(shè)計(jì)比率。在本文你會(huì)發(fā)現(xiàn)我們?cè)O(shè)計(jì)中字體大小、印刷比例、黃金比例等等竟然很音樂(lè)有關(guān)，真是一個(gè)有趣的事情:) 以下是原文。

設(shè)計(jì)師工作最明顯的問(wèn)題可能是第一個(gè)是“我應(yīng)該使用哪種字體？” 那么第二個(gè)問(wèn)題呢，“我應(yīng)該將我的字號(hào)設(shè)置為多大？”這個(gè)問(wèn)題我相信一般很少會(huì)有人關(guān)注到。作為設(shè)計(jì)作品的重要載體之一，僅字體的大小也可以傳達(dá)明顯不同的構(gòu)圖，和聲，節(jié)奏，重復(fù)，形式，主題；甚至顏色，紋理和色調(diào)。

什么是字號(hào)梯度？

Don’t compose without a scale.

不要在沒(méi)有比例的情況下就開(kāi)始創(chuàng)作?！?羅伯特·布林赫斯特

字號(hào)梯度最早被稱為印刷比例尺，它們是一組字符比列的有序排列。它們以一種有意義的方式相互關(guān)聯(lián)，以此來(lái)創(chuàng)建出具有一致性、和諧性和對(duì)比性的效果。例如使用黃金比率，通過(guò)乘除1.618 得到一套比率的值。

6-72的字號(hào)大家是不是非常熟悉卻又陌生呢？你在平時(shí)工作的時(shí)候是直接選用上面的字號(hào)梯度還是自己隨機(jī)生成呢？你是否有好奇過(guò)這么一組數(shù)字是哪里來(lái)的，為什么你所能看見(jiàn)的絕大部分的設(shè)計(jì)、工作類軟件都用的是這一組字號(hào)梯度？

經(jīng)典印刷比例的由來(lái)？

最早期可以說(shuō)到文藝復(fù)興時(shí)期，鑄造金屬和凸版印刷的時(shí)代，字體是物理對(duì)象。 每個(gè)字母表中的每個(gè)字母都必須按照打印機(jī)想要使用的每種尺寸來(lái)進(jìn)行購(gòu)買(mǎi)。 對(duì)于制造它們的工廠和購(gòu)買(mǎi)它們的打印機(jī)來(lái)說(shuō)，字體大小占用了大量的空間并且花費(fèi)了很多錢(qián)，太昂貴了。因此，對(duì)某些常用尺寸進(jìn)行標(biāo)準(zhǔn)化是節(jié)省資金的一種方法。

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

由此，這套字號(hào)比例初步建立，在接下來(lái)的400年中，這套比例幾乎沒(méi)有變化，也幾乎沒(méi)有增加，一直被保存至今。這套比例也成為世代印刷者的制約因素和便捷工具。所以我們?nèi)匀豢梢钥吹剿栽诋?dāng)今的各大類軟件中使用。幾個(gè)世紀(jì)以來(lái)，印刷尺度一直被用作創(chuàng)造平衡和諧的字體尺寸的手段。 它是現(xiàn)代排版的基石，是經(jīng)典的印刷比例。

音樂(lè)和視覺(jué)上的和諧：音樂(lè)、和聲、比例

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

好的比例吸引我們的目光的原因在某種程度上和音樂(lè)和聲取悅我們的耳朵是相同。他們同樣也都可以表達(dá)為：構(gòu)圖，和聲，節(jié)奏，重復(fù)，形式，主題；甚至顏色，紋理和色調(diào)。

我們知道，早期的6-72的印刷比例其實(shí)在一定程度上，更多是依靠應(yīng)刷者的“直覺(jué)經(jīng)驗(yàn)”來(lái)建立的，這套比率的出現(xiàn)以及它在視覺(jué)上的和諧與音樂(lè)傳達(dá)的感覺(jué)非常接近，那么他們之間是不是有更多可以被探索和計(jì)算的呢？

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

音樂(lè)不僅鍛煉著聽(tīng)覺(jué)，還鍛煉著我們的情感和想象力。都說(shuō)設(shè)計(jì)師在做圖的時(shí)候喜歡聽(tīng)歌，而且聽(tīng)歌會(huì)給我們帶來(lái)更多的靈感，那么比例吸引我們目光的原因與音樂(lè)取悅我們的耳朵的原因幾乎是相同的。

如果把音樂(lè)比作設(shè)計(jì)，我們可以說(shuō)屏幕設(shè)計(jì)中旋律是設(shè)計(jì)的內(nèi)容，內(nèi)容的布局和排列是和諧的。我們也可以認(rèn)為，當(dāng)設(shè)計(jì)中不同元素之間的互相影響是令人愉悅、平衡或成比例的，并且內(nèi)容（旋律）被設(shè)計(jì)所恰當(dāng)?shù)貍鬟_(dá)或表現(xiàn)出來(lái)時(shí)，它就是和諧的。那么這種和諧有點(diǎn)抽象，難以抓住。如何能讓它更具象一點(diǎn)呢？可以被科學(xué)的計(jì)算出來(lái)嗎？

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

既然和諧是可以被計(jì)算出來(lái)的，那么其他被認(rèn)可的和諧的旋律當(dāng)然也是可以被計(jì)算出來(lái)的。在此基礎(chǔ)之上，畢達(dá)哥拉斯經(jīng)過(guò)研究探索得到了更多的音樂(lè)間隔比率。

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

音樂(lè)從根本上說(shuō)也是一種數(shù)學(xué)闡釋，你也會(huì)發(fā)現(xiàn)，很多著名企業(yè)的設(shè)計(jì)語(yǔ)言的規(guī)范定義都是遵循如此科學(xué)的研究成果之中，Antdesign 在大二調(diào)的基礎(chǔ)上 10 個(gè)不同尺寸的字體序列，IBM 的設(shè)計(jì)語(yǔ)言……設(shè)計(jì)規(guī)范中的字號(hào)比例、響應(yīng)式的適配比率、構(gòu)圖……

如何使用音樂(lè)間隔比率

當(dāng)我們熟悉并了解這些和諧的音樂(lè)間隔比后，制作一套模塊化比例就很容易了。例如，在項(xiàng)目開(kāi)始時(shí)選擇好字體，選擇使正文看起來(lái)最清晰的大小作為項(xiàng)目模塊化比例的基礎(chǔ)。例如16pt，我們將乘以16以創(chuàng)建比例。當(dāng)然，整個(gè)和諧的比例系統(tǒng)還是要建立在整體的視覺(jué)決策上，并在整個(gè)體驗(yàn)中能引起共鳴以達(dá)到更好的效果。

• 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 /…

當(dāng)然如果你不愿意計(jì)算，也可以去Modular Scale在線生成工具計(jì)算。

如何運(yùn)用到實(shí)際案例中？

當(dāng)我們?cè)谠O(shè)計(jì)中，不管是圖形還是字號(hào)，首先需要制定一套清晰的設(shè)計(jì)原則來(lái)貫穿全局，假定我們已經(jīng)有了一套設(shè)計(jì)原則，現(xiàn)在需要設(shè)計(jì)一個(gè)如下banner，字號(hào)的選擇，布局的比例該如何去做？

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

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

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

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

3.以此類推…

我們以設(shè)計(jì)Banner為例：

1.選擇合適的比率

假定我們這里選擇了斐波那契數(shù)列，即黃金比率，因?yàn)楸疚拇蟛糠謨?nèi)容都是基于經(jīng)典的印刷比例的研究，并尋求傳統(tǒng)的經(jīng)驗(yàn)的指導(dǎo)，而恰好黃金比率（1：1.618）就是最具有歷史和文化聯(lián)系的比率，文藝復(fù)興時(shí)期作品中的文本比例大多也是也基于黃金比率，所以黃金比率應(yīng)用于本次案例非常合適。

2.根據(jù)選定比率計(jì)算排列

確定比率后，我們首先需要確定整體布局，我們以黃金比率為基準(zhǔn)來(lái)計(jì)算本次案例的設(shè)計(jì)組成部分：布局、字號(hào)、間距、圖形……當(dāng)然一套作品中，你是可以選擇多套比率，但是最好是這些比率之間你能找到最佳的組合效果，如下圖，我們使用黃金比率來(lái)進(jìn)行布局的留白計(jì)算、圖文占比、元素占比等，使用增強(qiáng)四度來(lái)進(jìn)行內(nèi)容的計(jì)算。注意：如果這套比率計(jì)算的實(shí)際序列組合不能形成很好的視覺(jué)效果，那么一點(diǎn)請(qǐng)靈活調(diào)整！因?yàn)楫吘棺罱?jīng)典的比率都會(huì)有各別的誤差。

3.將選的序列應(yīng)用與調(diào)試

在最后使用的過(guò)程中，或多或少的也會(huì)發(fā)現(xiàn)有一些序列是不合適的，那么我們可以在數(shù)列的基礎(chǔ)上靈活選用，如果覺(jué)得比率計(jì)算的數(shù)列較為密集，我們也可以跨級(jí)選取。但要確保最終的節(jié)奏和韻律是相對(duì)統(tǒng)一的。

最后

不管是經(jīng)典數(shù)列還是音樂(lè)間隔比，這些比率可能不會(huì)立刻給你帶來(lái)設(shè)計(jì)上的迅猛提升，但是可以讓你的設(shè)計(jì)有法可循，有據(jù)可依，在深層次的美學(xué)層面上起逐漸發(fā)揮更大的作用。當(dāng)然，在設(shè)計(jì)中，眼睛永遠(yuǎn)是主宰的，在遵循這些原則的同時(shí)，也需要我們?nèi)プ龈嗟奶剿鳎剿鞑煌念I(lǐng)域，探索更多的融合。

參考閱讀

1.《版式風(fēng)格要素》羅伯特·布林赫斯特

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

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

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

5.《探索響應(yīng)量表》約瑟夫·穆勒