說文解字（三）：文字的易讀性
在設計作品過程中，若要使文字組合達到容易閱讀的要求，字型、字號、邊界、行長、分欄、欄距、行距……這些都需要依據版面來合理設計。
前言
字型，只要不是特殊裝飾性的文字，都不至於發生無法閱讀的狀況。字型的設計人員都預先做了某種程度的設定，但是這種設定只能是達到“可以閱讀”。
by 椰樹椰汁
在設計作品過程中，若要求達到“容易閱讀”的文字組合， 字型和字號的選擇、文字和文字的間隔、行和行的間隔、字號的變化，都得依據版面來設計。
那究竟怎麼樣才算是“容易閱讀”的文字編排呢？
“容易閱讀”包含兩個要素：“容易看”和“容易理解”。
- “容易看”，是指閱讀文字的時候遇到的障礙少。字號過小、行間距過窄、顏色刺眼等等，這些對閱讀者來說都是障礙。要減少這些障礙，我們就必須要了解如何去配置易讀的文字。
- “容易理解”，是指我們在看到文字的一瞬間，就能理解大概其內容。我們站在讀者的角度去考慮版面的設計，考慮如何去引導讀者視線的順暢移動，尋求用文字進行溝通交流的能力。
一、文字編排的工作
首先，我們根據設計物件去理解版面，有一個大致的版型構建在我們的腦海中。根據版型去決定文字的組合方向，是橫排還是豎排更合適這個設計。
接下來，配合文章的氛圍選擇適合的“字型”，決定文字的“字號”。到了這個階段，也就可以設定出“版心”，也就是頁面上空白的部分。
最後，設定一行文字的“行長”，段落之間間隔的“欄距”，行之間間隔的“行距”，以及文字之間的“字距”。這些都是細微的部分，也是我們使文字更容易理解的必經過程。
通過以上這些步驟，我們大概就能理清，要設計一個容易閱讀的文字版面，需要做的事情。接下來，讓我們逐一來解決它們。
二、字號
容易閱讀的字號，會根據文字的目的、作用、讀者物件而改變。
文字大略可以區分成標題部分、正文部分以及補充說明部分。
標題部分必然是版面中最顯眼的地方，尤其是大標題，文字的尺寸必須比其它文字大且具有強調性。在大標題之外，還有誘導視線的“小標題”、補充內容的“副標題”、以內概述部分的“前言”。這些字號都要求比正文的大。
正文部分的文字量最多，也是閱讀的核心部分。正文部分的字型大小也決定了整個版面的易讀性。
- 在印刷物中，我們推薦正文為9pt的字號；
- 在web設計中，1920px解析度下，12px的字號為最小字號；
- 而在移動端設計中，小字一般為20px。
當然，以上都不是規定必須得這樣設定，只是在經驗的總結下得出的結論。
by Ryan Evan Davis
by Eugene Paryhin
三、邊界
“邊界”也就是我們所理解的左右留白，這些留白不僅能幫助閱讀，也會影響頁面傳達出的印象。
設定邊界的目的，一方面為了防止頁面元素在邊界上導致的不完整呈現；另外一方面，也是來自設計上的觀點，為了防止在視覺上因為邊界上的元素導致不整齊。
- 在印刷物中，我們要保證最少有5毫米左右的留白；
- 在web設計中，考慮到自適應，頁面元素基本都在居中的750px裡面；
- 而在移動端設計中，不同的產品有不同的風格，基本上有24px、40px的邊界留白。
留白是影響頁面印象的最主要的元素，根據不同的需求去做相應合適的處理。
by Giga Tamarashvili
by Dwinawan
四、行長與分欄
為了讓長篇的文章更容易閱讀，在正文部分必須設定合適的行長與分欄。
在確定好字號和頁邊距之後，一行可以容納多少個字元也相應確定了。如果只是簡單的排成最多字數，那樣就會因為一行過長而難以閱讀。這個時候就必須要分“區塊”，也就是“欄”。
在閱讀的時候，我們的視線從一行的開頭部分到另外一行的開頭部分逐行移動，如果單行過長，可能視線就會弄錯，導致閱讀障礙。
- 如果是印刷物，每一行35毫米～55毫米左右的長度會比較容易閱讀；
- 在web設計中，欄目可以根據頁面柵格化去設定；
- 而在移動端，因為螢幕較小，可以不做考慮。
by Andrew Baygulov
by Michał Smolec
五、行距
行距的大小，是為了讓人感受到文章的“間距”的重點。
行距的確定要素很多，需要根據橫排還是豎排、字號、字型、行長而去整體考慮設定。
正文部分的行距，一般設定為正文的半個字到一個字左右的尺寸。
by Adencys
by Timo Kuilder
六、字間距
字間距可以製造出閱讀文章的韻律感。
不同的字型有不同的預設字間距的的設定，同一套字型裡面，不同字的字間距也不同，以外文來說，“W”和“I”的字間距相差很大。如果不是有特殊的要求，一般對某套字型的字間距不做調整。
如果字間距設定很狹窄時，會呈現出密度感和張力；如果希望有舒適悠然的感覺，可以嘗試讓字間距看起來寬鬆些。
by Hrvoje Grubisic
by Priachu
七、視覺導向
隨著視線自然流動來配置版面，就會讓文字變得容易閱讀。
我們在閱讀的時候，都會無意識的按照某種順序來瀏覽。圖片和插圖首先吸引了注意力，其次才開始閱讀文字。
版面的文字以橫排為主時，視線從左上到右下移動；豎排時，視線從右上到左下移動。
整體文字部分來說，標題部分必須突出；正文部分分欄排列，並且視線的折返應該是有規律的。
依照視線的流暢移動而形成的版面配置，是很標準的容易閱讀的配置。有時候也可以突破標準，營造出歡樂氣氛的方式。
by James Donovan
by Jess Caddick
八、對比
給文字加點適度的變化，整個版面就能顯現出強弱節奏，也更易讀。
通過對照和比較來對元素進行差異化的表達，從而將差異的部分強調出來。
想要讓文字有對比效果：
第一，改變文字本身設定的方法，如長、寬、字型以及色彩等，只要將一部分加以變化，就會和其它文字產生對比。
第二，改變文字的組合方法，如改變留白的空間、加上橫線、改變行長和對齊方式等。
加上適度的對比，可以使文章的文字間出現強弱對比。強弱變化可使閱讀文章時有韻律感，避免讓讀者覺得無聊。
by Nikola Uzunov
by Nikola Uzunov
小結
以上部分都是如何讓文字更易讀，那有哪些是需要在設計的時候避免的呢？
這些不能做的約束，稱為“禁忌”，也就是設計規範了。
如：在一行的開頭不能出現句號、逗號、冒號等等標點符號；
同樣，在一行結束的地方不能放置前引號、前括號等等；
同時，也不能將公司名稱、產品名稱之類的固有名詞拆開。
最後，官方的提一句， 文字的設定沒有固有的規律，不是說你必須如何如何，只是你需要在充分理解這些規範的情況下，結合具體的設計需求，去做相應的調整，這才叫文字設計。
———-end———-
關聯閱讀：
ofollow,noindex" target="_blank">《說文解字（一）：初識東西方語系文字》
作者：設計師日記，公眾號：設計師日記
本文由 @設計師日記 翻譯釋出於人人都是產品經理 ，未經許可，禁止轉載
題圖來自 Unsplash，基於CC0協議