在設(shè)計作品過程中，若要使文字組合達(dá)到容易閱讀的要求，字體、字號、邊界、行長、分欄、欄距、行距……這些都需要依據(jù)版面來合理設(shè)計。

前言

字體，只要不是特殊裝飾性的文字，都不至于發(fā)生無法閱讀的狀況。字體的設(shè)計人員都預(yù)先做了某種程度的設(shè)定，但是這種設(shè)定只能是達(dá)到“可以閱讀”。

by 椰樹椰汁

在設(shè)計作品過程中，若要求達(dá)到“容易閱讀”的文字組合，字體和字號的選擇、文字和文字的間隔、行和行的間隔、字號的變化，都得依據(jù)版面來設(shè)計。

那究竟怎么樣才算是“容易閱讀”的文字編排呢？

“容易閱讀”包含兩個要素：“容易看”和“容易理解”。

• “容易看”，是指閱讀文字的時候遇到的障礙少。字號過小、行間距過窄、顏色刺眼等等，這些對閱讀者來說都是障礙。要減少這些障礙，我們就必須要了解如何去配置易讀的文字。
• “容易理解”，是指我們在看到文字的一瞬間，就能理解大概其內(nèi)容。我們站在讀者的角度去考慮版面的設(shè)計，考慮如何去引導(dǎo)讀者視線的順暢移動，尋求用文字進(jìn)行溝通交流的能力。

一、文字編排的工作

首先，我們根據(jù)設(shè)計對象去理解版面，有一個大致的版型構(gòu)建在我們的腦海中。根據(jù)版型去決定文字的組合方向，是橫排還是豎排更合適這個設(shè)計。

接下來，配合文章的氛圍選擇適合的“字體”，決定文字的“字號”。到了這個階段，也就可以設(shè)定出“版心”，也就是頁面上空白的部分。

最后，設(shè)定一行文字的“行長”，段落之間間隔的“欄距”，行之間間隔的“行距”，以及文字之間的“字距”。這些都是細(xì)微的部分，也是我們使文字更容易理解的必經(jīng)過程。

通過以上這些步驟，我們大概就能理清，要設(shè)計一個容易閱讀的文字版面，需要做的事情。接下來，讓我們逐一來解決它們。

二、字號

容易閱讀的字號，會根據(jù)文字的目的、作用、讀者對象而改變。

文字大略可以區(qū)分成標(biāo)題部分、正文部分以及補(bǔ)充說明部分。

標(biāo)題部分必然是版面中最顯眼的地方，尤其是大標(biāo)題，文字的尺寸必須比其它文字大且具有強(qiáng)調(diào)性。在大標(biāo)題之外，還有誘導(dǎo)視線的“小標(biāo)題”、補(bǔ)充內(nèi)容的“副標(biāo)題”、以內(nèi)概述部分的“前言”。這些字號都要求比正文的大。

正文部分的文字量最多，也是閱讀的核心部分。正文部分的字體大小也決定了整個版面的易讀性。

• 在印刷物中，我們推薦正文為9pt的字號；
• 在web設(shè)計中，1920px分辨率下，12px的字號為最小字號；
• 而在移動端設(shè)計中，小字一般為20px。

當(dāng)然，以上都不是規(guī)定必須得這樣設(shè)定，只是在經(jīng)驗的總結(jié)下得出的結(jié)論。

by Ryan Evan Davis

by Eugene Paryhin

三、邊界

“邊界”也就是我們所理解的左右留白，這些留白不僅能幫助閱讀，也會影響頁面?zhèn)鬟_(dá)出的印象。

設(shè)定邊界的目的，一方面為了防止頁面元素在邊界上導(dǎo)致的不完整呈現(xiàn)；另外一方面，也是來自設(shè)計上的觀點，為了防止在視覺上因為邊界上的元素導(dǎo)致不整齊。

• 在印刷物中，我們要保證最少有5毫米左右的留白；
• 在web設(shè)計中，考慮到自適應(yīng)，頁面元素基本都在居中的750px里面；
• 而在移動端設(shè)計中，不同的產(chǎn)品有不同的風(fēng)格，基本上有24px、40px的邊界留白。

留白是影響頁面印象的最主要的元素，根據(jù)不同的需求去做相應(yīng)合適的處理。

by Giga Tamarashvili

by Dwinawan

四、行長與分欄

為了讓長篇的文章更容易閱讀，在正文部分必須設(shè)定合適的行長與分欄。

在確定好字號和頁邊距之后，一行可以容納多少個字符也相應(yīng)確定了。如果只是簡單的排成最多字?jǐn)?shù)，那樣就會因為一行過長而難以閱讀。這個時候就必須要分“區(qū)塊”，也就是“欄”。

在閱讀的時候，我們的視線從一行的開頭部分到另外一行的開頭部分逐行移動，如果單行過長，可能視線就會弄錯，導(dǎo)致閱讀障礙。

• 如果是印刷物，每一行35毫米～55毫米左右的長度會比較容易閱讀；
• 在web設(shè)計中，欄目可以根據(jù)頁面柵格化去設(shè)定；
• 而在移動端，因為屏幕較小，可以不做考慮。

by Andrew Baygulov

by Micha? Smolec

五、行距

行距的大小，是為了讓人感受到文章的“間距”的重點。

行距的確定要素很多，需要根據(jù)橫排還是豎排、字號、字體、行長而去整體考慮設(shè)定。

正文部分的行距，一般設(shè)定為正文的半個字到一個字左右的尺寸。

by Adencys

by Timo Kuilder

六、字間距

字間距可以制造出閱讀文章的韻律感。

不同的字體有不同的默認(rèn)字間距的的設(shè)定，同一套字體里面，不同字的字間距也不同，以外文來說，“W”和“I”的字間距相差很大。如果不是有特殊的要求，一般對某套字體的字間距不做調(diào)整。

如果字間距設(shè)定很狹窄時，會呈現(xiàn)出密度感和張力；如果希望有舒適悠然的感覺，可以嘗試讓字間距看起來寬松些。

by Hrvoje Grubisic

by Priachu

七、視覺導(dǎo)向

隨著視線自然流動來配置版面，就會讓文字變得容易閱讀。

我們在閱讀的時候，都會無意識的按照某種順序來瀏覽。圖片和插圖首先吸引了注意力，其次才開始閱讀文字。

版面的文字以橫排為主時，視線從左上到右下移動；豎排時，視線從右上到左下移動。

整體文字部分來說，標(biāo)題部分必須突出；正文部分分欄排列，并且視線的折返應(yīng)該是有規(guī)律的。

依照視線的流暢移動而形成的版面配置，是很標(biāo)準(zhǔn)的容易閱讀的配置。有時候也可以突破標(biāo)準(zhǔn)，營造出歡樂氣氛的方式。

by James Donovan

by Jess Caddick

八、對比

給文字加點適度的變化，整個版面就能顯現(xiàn)出強(qiáng)弱節(jié)奏，也更易讀。

通過對照和比較來對元素進(jìn)行差異化的表達(dá)，從而將差異的部分強(qiáng)調(diào)出來。

想要讓文字有對比效果：

第一，改變文字本身設(shè)定的方法，如長、寬、字體以及色彩等，只要將一部分加以變化，就會和其它文字產(chǎn)生對比。

第二，改變文字的組合方法，如改變留白的空間、加上橫線、改變行長和對齊方式等。

加上適度的對比，可以使文章的文字間出現(xiàn)強(qiáng)弱對比。強(qiáng)弱變化可使閱讀文章時有韻律感，避免讓讀者覺得無聊。

by Nikola Uzunov

by Nikola Uzunov

小結(jié)

以上部分都是如何讓文字更易讀，那有哪些是需要在設(shè)計的時候避免的呢？

這些不能做的約束，稱為“禁忌”，也就是設(shè)計規(guī)范了。

如：在一行的開頭不能出現(xiàn)句號、逗號、冒號等等標(biāo)點符號；

同樣，在一行結(jié)束的地方不能放置前引號、前括號等等；

同時，也不能將公司名稱、產(chǎn)品名稱之類的固有名詞拆開。

最后，官方的提一句，文字的設(shè)定沒有固有的規(guī)律，不是說你必須如何如何，只是你需要在充分理解這些規(guī)范的情況下，結(jié)合具體的設(shè)計需求，去做相應(yīng)的調(diào)整，這才叫文字設(shè)計。

———-end———-

關(guān)聯(lián)閱讀：

《說文解字（一）：初識東西方語系文字》

《說文解字（二）：文字與其意像》

作者：設(shè)計師日記，公眾號：設(shè)計師日記

本文由 @設(shè)計師日記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議