前言

字體從設(shè)計(jì)到使用，其實(shí)是一個(gè)非常大的范疇。得益于互聯(lián)網(wǎng)技術(shù)的發(fā)展，我們已經(jīng)免費(fèi)享用了很多字體設(shè)計(jì)師的功勞，比如很多文印店給客戶設(shè)計(jì)logo，其實(shí)無(wú)非也就是篩選字體而已，調(diào)配顏色……這的確不假，在某種層面，設(shè)計(jì)師的工作類似「組裝」工作，所不同的是，組裝的前提是你一定要懂得字體設(shè)計(jì)背后的邏輯和審美趣味，做好風(fēng)格樣式調(diào)配，因?yàn)槊靠钭煮w設(shè)計(jì)出來(lái)，并沒有配備使用說(shuō)明書，千萬(wàn)種可能，是留給我們?nèi)グl(fā)現(xiàn)的。

在平面設(shè)計(jì)中，排版看似簡(jiǎn)單（大部分人都停留在能使用word就可以排版的認(rèn)識(shí)上），其實(shí)非�？简�(yàn)設(shè)計(jì)師的基本功。雖然我們也大量攝入了很多有關(guān)排版的理論知識(shí)，但是知識(shí)無(wú)法活用，沒有得到實(shí)踐驗(yàn)證時(shí)，是非常危險(xiǎn)的。因此，在本文中，我會(huì)拿我自己作為設(shè)計(jì)師以及閱讀者兩個(gè)身份來(lái)切換思考，也許我們?cè)诖四芴剿鞲�多�?/p>

在排版前，我們要清楚的三個(gè)重要概念就是：字號(hào)、行距、字間距。當(dāng)然，其他相關(guān)的概念還有很多，比如字體、字體家族、粗細(xì)輕重、首行縮進(jìn)、標(biāo)點(diǎn)符號(hào)等等。但我認(rèn)為這些都是相對(duì)來(lái)說(shuō)次要的。

01/

字號(hào)與閱讀速度

字號(hào)明確了字體本身的尺寸大小。在閱讀文章時(shí)，每一個(gè)文字就是一個(gè)「點(diǎn)」，點(diǎn)是平面構(gòu)成三元素之一（點(diǎn)、線、面）。字號(hào)大小的設(shè)置取決于閱讀者的閱讀速度。

比如小朋友和老年人的閱讀速度可能不及一個(gè)有著常年閱讀習(xí)慣的年輕人，那么在針對(duì)這部分人的排版當(dāng)中，字號(hào)就應(yīng)該設(shè)置得稍大。大家可以感受一下閱讀下面左右的段落文字，看看是不是較大的字號(hào)會(huì)讓你的速度變得更慢。

字號(hào)越大其閱讀速度也會(huì)放慢，當(dāng)然其文字的關(guān)注度也會(huì)增加，除了文字本身涵蓋的信息以外，文字在放大時(shí)，筆畫的細(xì)節(jié)就越來(lái)越明顯，觀者的注意力就會(huì)從對(duì)每個(gè)字的「點(diǎn)」的層面慢慢放大。而文字越小，閱讀會(huì)變得更為快速。

比如我們平時(shí)所知的快速閱讀法，就是由逐字逐字的閱讀變?yōu)檫B詞閱讀。

02/

字號(hào)與主次信息

所以我們平時(shí)在做平面設(shè)計(jì)排版時(shí)，就要考慮到受眾的閱讀習(xí)慣再進(jìn)行設(shè)置。大號(hào)的字體更能瞬間吸引眼球，因此是主焦點(diǎn)所在，也是主要信息應(yīng)該運(yùn)用的，這時(shí)就要注意與此搭配的字號(hào)，注意在多層次的主次信息上字號(hào)運(yùn)用需要有對(duì)比。

能與大字號(hào)進(jìn)行搭配的是小字號(hào)，而且彼此最好能對(duì)比明顯。這樣才能形成信息的主次傳遞。

有些宣傳方認(rèn)為文字越大，其吸引力效果越強(qiáng)，就采用統(tǒng)統(tǒng)放大字體的做法，這樣來(lái)輸出信息，由于沒有對(duì)比，整體版面凌亂。而完全沒有考慮過(guò)閱讀者真實(shí)的感受。

其實(shí)作為閱讀的一方，平時(shí)我們?cè)诳磸V告牌、打開APP瀏覽Banner時(shí)，都會(huì)因?yàn)橐粋�(gè)版面太過(guò)凌亂的畫面而立刻切換掉這樣的信息，不是嗎？長(zhǎng)期被廣告轟炸的我們，其實(shí)根本不喜歡這種被信息牽著走的感覺。所以，已經(jīng)練就了可以過(guò)濾掉【繁雜信息】的過(guò)濾機(jī)制，保護(hù)自己的注意力。

03/

案例分析

我們可以拿常見的網(wǎng)店Banner設(shè)計(jì)為例來(lái)說(shuō)明排版中的誤區(qū)，這是一個(gè)看上去比較常見的設(shè)計(jì)，左圖右文，排版最大的問題就是右邊的文字信息過(guò)多，字體主次不太分明，造成閱讀擁擠。

下面我們逐條分析作品中的問題：

1）字體顏色單一，且飽和度極高，容易讓人視覺疲勞

2）三行字體間距過(guò)于緊密，字體的字號(hào)沒有區(qū)別

3）Banner雖說(shuō)是一個(gè)非常重要的傳達(dá)重要品牌信號(hào)、推廣信息的圖片，且大部分尺寸都較大，但是其中傳達(dá)的信息也需要有一個(gè)重要焦點(diǎn)，而不宜輸出過(guò)多的文字。

作為平面設(shè)計(jì)師，我認(rèn)為也應(yīng)該和文案一起結(jié)合考察，文案本身是否足夠精簡(jiǎn)扼要？次要的文案是否可以刪掉？設(shè)計(jì)師的職責(zé)并不是“美化”，而是“體驗(yàn)”，把自己放在接受者的位置，你愿意對(duì)方一次性就輸出這么多信息給你嗎？還是想慢慢一步步接受后再深入了解？

于是可以我們做下面的調(diào)整：

1）將文字的色彩進(jìn)行調(diào)整，形成閱讀的主次順序，照顧到整個(gè)Banner要傳遞的主要信息——冬季新品，放大的冬字才用宋體，和其他的字體相異。宋體的字型對(duì)應(yīng)女性的輪廓，看上去更具曲線感。

2）紅色是非常吸引眼球的顏色，因此有些次要的文字可以不需要一直用紅色，而把主題詞和引導(dǎo)按鈕用紅色進(jìn)行處理。

3）按鈕變?yōu)閯?dòng)感較強(qiáng)的形狀，這樣能增加畫面的及時(shí)感。也符合這一片排版的形狀布局。

4）行距之間拉開差距，字體大小對(duì)比明顯

5）刪掉沒那么重要的傳遞品牌價(jià)值的文案，在這里，集中傳達(dá)一個(gè)信息就足夠了

6）顏色改為相對(duì)柔和的暖粉色，傳遞冬日暖陽(yáng)的氣氛。背景用了一些白色的雪作為點(diǎn)綴，突出主題。

在不改變?cè)�有布局和素材的情況下，我們把字體排版進(jìn)行了調(diào)整，版面就清晰、簡(jiǎn)潔了許多。

也許很多人會(huì)說(shuō)：簡(jiǎn)潔當(dāng)然是正道，但是老板/甲方不喜歡啊！我對(duì)于這樣的問題也常常會(huì)遇到，老板/甲方也是人，人當(dāng)然會(huì)分種類，人也會(huì)失策，會(huì)有自身的局限性……如果設(shè)計(jì)師不能給他建議，他當(dāng)然會(huì)跟隨舊有習(xí)俗走，如果我們能發(fā)揮專業(yè)知識(shí)，帶他來(lái)到新的路，是否走這條路全憑他自己選擇，我們要做的就是尊重對(duì)方的選擇。但是，我們必須要提供這樣的可能性呈現(xiàn)到對(duì)方眼前。

04/行距：相對(duì)的距離

行距是段落上下兩行文字的疏密程度。行距在文章中的作用是有效的引導(dǎo)閱讀。兩行文字之間的行距太近會(huì)讓閱讀變得困難，而離得太遠(yuǎn)同樣也會(huì)造成問題。

行距和形成平面構(gòu)成種的「面」這個(gè)元素是分不開的，不同的行距構(gòu)成面的密度，也即是文章段落呈現(xiàn)的灰度。

行距和行高又是緊密不可分割的，比如字體的行高為10px，那么行距如果為2px，也就是行高的1/5倍，就會(huì)變得太擠，不易閱讀。

如果我們拉開行距到5px，也就是行高的1/2倍，則閱讀起來(lái)就比較舒暢，輕松。

所以合適的行距是一個(gè)相對(duì)值，根據(jù)我的經(jīng)驗(yàn)，文章的閱讀中，行距為行高的1/2~1倍都算是舒適的。

當(dāng)行距為行高的1倍，看起來(lái)行距是比較寬，有些人會(huì)覺得整個(gè)段落看起來(lái)不夠緊湊，但我個(gè)人感覺如果行距和行高相等時(shí)，段落看起來(lái)松散，讓閱讀者會(huì)有種和緩的速度。比如我個(gè)人就比較傾向喜歡閱讀這一比例的文字段落。

除了和行高本身有關(guān)，行距與字間距也有著不小的關(guān)聯(lián)。等談到字間距的時(shí)候我們還會(huì)細(xì)講。

 05/

案例分析

下面還是以一個(gè)具體的案例來(lái)說(shuō)明行高在排版中的視覺作用。這是一個(gè)家居主題的Banner設(shè)計(jì)，也許初看上去并沒有什么問題（設(shè)計(jì)的問題大都是通過(guò)對(duì)比才會(huì)發(fā)現(xiàn)的）。

仔細(xì)看過(guò)后，我們會(huì)發(fā)現(xiàn)右邊的文字閱讀起來(lái)略有點(diǎn)困難，這是由于行高太小而造成的。

逐條分析一下Banner中比較顯著的視覺問題：

1）兩行小字的行高太小，以及小字和大字彼此距離太近

2）文字的色彩沒有太多變化，不同的內(nèi)容全部擠在一起，閱讀起來(lái)層次感不強(qiáng)

3）整體色彩有些灰暗，家居的氛圍有點(diǎn)暗沉（原素材需要調(diào)色處理）

Banner設(shè)計(jì)要做到色香味俱全，除了關(guān)注布局、色彩、還需要對(duì)文字以及文字間距都要精細(xì)化處理。

為了解決這三個(gè)比較大的問題，我們作了下面一些調(diào)整：

1）改變小字的行高，讓兩行小字跟隨右側(cè)的斜線條，形成呼應(yīng)，并且讓小字和大字也保持距離

2）整體文字稍微縮小，給整個(gè)版面以呼吸的空間。

3）「全場(chǎng)8折」四個(gè)字用橙色作底，橙色是溫暖的顏色，給版式加暖，且讓文字排版多一些變化，信息層次更分明

4）大的文字采用漸變填色，比起純色平涂，帶有微微光感。

5）整個(gè)畫面的色調(diào)調(diào)得更暖，配合家居的溫暖氛圍

06/

字間距 VS 字符間距

我們平面設(shè)計(jì)師理解當(dāng)中的字間距，大概就是在軟件中可以直接設(shè)置文字字符間距的參數(shù)值，而字體設(shè)計(jì)師的字間距，是更基礎(chǔ)的工作。字體設(shè)計(jì)中每一個(gè)文字都要設(shè)定好它們的字間間隔，太近和太遠(yuǎn)都不利于文章的閱讀。而且在字體設(shè)計(jì)中，調(diào)整字間也是一項(xiàng)及其繁瑣龐大的工作。

在漢字的書法法則中，有所謂的“行氣”之說(shuō)，所謂“行氣”也就是一整行字體帶來(lái)的感覺，這也和字間距有著千絲萬(wàn)縷的關(guān)系。而所謂行氣也能形成一條線，也就是平面構(gòu)成中「線」元素的發(fā)揮。

那么，作為我們拿著已經(jīng)設(shè)定好字間的段落再進(jìn)行字間距的調(diào)整，無(wú)非也是搭上巨人的肩膀再進(jìn)行調(diào)試而已。所以字間的調(diào)整也是依據(jù)原有字體設(shè)計(jì)中已有的間距上的改變，在此我們可以稱之為字符間距。

07/

字體原有的字間距

最合適的字間距，對(duì)于不同的字體來(lái)說(shuō)都不一樣。我們可以舉個(gè)例子：「思源宋體」和「方正美黑」，這兩個(gè)字體形態(tài)差異很大，思源宋體的字符間距設(shè)置為0時(shí)，和方正美黑的字符間距為0時(shí)，字間距的差異也很大，方正美黑的字體間距默認(rèn)就很寬，大家可以對(duì)比當(dāng)方正美黑的字符間距為0時(shí)，對(duì)比思源宋體字符間距為100，其本身字間仍然是大許多的。

所以，拋開字體本身的間距來(lái)談字符間距，是毫無(wú)意義的。當(dāng)然，方正美黑也許是個(gè)極端的例子，但每款字體的間距的確是有略微差別，呈現(xiàn)在我們眼前的，還是以字間距為準(zhǔn)。

08/考慮行距的影響

我們之前講過(guò)，行距也是影響字間距的一個(gè)很重要的因素。如果字間距大過(guò)了行距的情況下，這樣的段落將是特別難以閱讀的。

原本從左到右的閱讀流，將會(huì)被更為接近的上下兩行的文字，錯(cuò)誤引導(dǎo)為從上到下的閱讀。

所以保持字間距要小于行距，是一個(gè)必備的保險(xiǎn)做法。

09/寬大字距的魅力

在海報(bào)、Banner這類宣傳品的設(shè)計(jì)中，文字通常用得比較少，也談不上形成段落，這時(shí)字間距可以放得更開，而無(wú)需涉及到行距。

不得不說(shuō)，放大的字間距會(huì)顯得版式疏松、體現(xiàn)一種優(yōu)雅寧?kù)o的感覺。

同樣，如果你想要讓你的文章看起來(lái)更輕松，也可以試著把字間距適度放大。

案例分析

字間距的案例，我們同樣用一個(gè)Banner設(shè)計(jì)來(lái)說(shuō)明。這個(gè)Banner設(shè)計(jì)也是看起來(lái)沒什么大問題。唯一惹眼的就是「科技互聯(lián)、引領(lǐng)未來(lái)」這八個(gè)字的字距過(guò)寬，字距大過(guò)行距，造成閱讀時(shí)容易產(chǎn)生“科引，技領(lǐng)，互未，聯(lián)來(lái)”這樣的順序。并且使用的字體本身的字距也需要進(jìn)一步調(diào)整，看起來(lái)兩行文字也是有些錯(cuò)落，視覺上不夠精細(xì)。

這里我們?nèi)匀徽{(diào)整了字體排版以及色彩方面的諸多小問題：

1）調(diào)整了「科技互聯(lián)、引領(lǐng)未來(lái)」這八個(gè)字的行距和字距，讓字間小于行距

2）增加2019的光感，營(yíng)造視覺焦點(diǎn)

3）「掌握最黑技術(shù)、占領(lǐng)最大市場(chǎng)」這一行字增加字距，縮小字號(hào)，制造和下方英文字符截然不同的節(jié)奏感。

4）文字的色彩有變化，讓畫面在此不會(huì)顯得過(guò)于扁平，為了突出文字，讓下方背景的色彩更深。

5）縮小左上方的區(qū)塊鏈三個(gè)字的部分，給以更多的留白空間，讓畫面不至于內(nèi)容過(guò)分飽和。

6）整體的畫面做了進(jìn)一步色彩飽和度處理以及其他細(xì)節(jié)的處理，讓畫面更具沖擊力。

以上我們所舉案例只是在尊重原有設(shè)計(jì)思路的基礎(chǔ)上進(jìn)行微調(diào)，這也是為了說(shuō)明原有設(shè)計(jì)中存在的問題，當(dāng)然會(huì)有更好的方法就是大的修整或者重組布局等，但不在我們這篇文章討論的范圍之內(nèi)。

后記：瀏覽街邊廣告牌

排版是一個(gè)值得深挖的問題，越細(xì)節(jié)越難以被發(fā)現(xiàn)。如果只是潦草應(yīng)對(duì)，也暫時(shí)不會(huì)帶來(lái)特別大的問題，但卻是會(huì)日積月累形成盲區(qū)，無(wú)形中造成的問題，讓人永遠(yuǎn)發(fā)現(xiàn)不了。很多公司投入大量的財(cái)力做廣告、線上線下宣傳，然后發(fā)現(xiàn)成本過(guò)高，而利潤(rùn)過(guò)低，廣告效果不及以往，運(yùn)營(yíng)的每個(gè)環(huán)節(jié)都可能會(huì)造成問題，但是也許最前線的問題就是沒有和用戶產(chǎn)生真正的互動(dòng)，平面廣告做出來(lái)以后也沒有調(diào)查用戶是否接受這樣的設(shè)計(jì)，有沒有吸引到目標(biāo)用戶。我同時(shí)作為用戶的身份，在平時(shí)逛街看廣告時(shí)，好的設(shè)計(jì)都想多看看，甚至?xí)�有驚喜，但是有些的平面廣告從排版到布局再到圖片素材都讓人提不起興趣，而且后者居多。

我們工作室平時(shí)接觸的客戶，有一些客戶創(chuàng)業(yè)做自己的宣傳品，也是習(xí)慣于讓設(shè)計(jì)師去“模仿”某個(gè)所謂同行里“成功品牌”的設(shè)計(jì)，結(jié)果殊不知，這個(gè)“成功品牌”的設(shè)計(jì)早已發(fā)揮不了作用，對(duì)方也在瀕臨崩潰的邊緣。等到還沒模仿完，成功品牌的宣傳品就已經(jīng)下架了，公司甚至開始面臨倒閉。這時(shí)場(chǎng)面會(huì)很尷尬，這也是我親歷過(guò)的事，而且不止一次。

說(shuō)回我們的平面設(shè)計(jì)，涉及到的要素?zé)o非是歸于點(diǎn)、線、面，還有不斷的實(shí)踐。UI設(shè)計(jì)發(fā)展很快是因?yàn)榛ヂ?lián)網(wǎng)這兩年張勢(shì)可喜，但是飛速的發(fā)展帶來(lái)的弊端就是一切都浮在表面，深度不夠。所以，我認(rèn)為現(xiàn)在正是對(duì)平面進(jìn)一步深入的時(shí)候，沉下心來(lái)，更多細(xì)節(jié)就會(huì)被看見。

作者：飛屋設(shè)計(jì) 公眾號(hào)：ifeiwu81