爲網頁文字的可讀性而設計

可讀性：“閱讀的狀态或質量，是一種(zhǒng)影響印刷品持續閱讀難易程度的屬性。”

文字可以是優美的、簡單的、狂放的、有趣的、激動人心的，還(hái)有很多其他種(zhǒng)類。它能(néng)激起(qǐ)情緒，幫助用戶理解你所要傳達的訊息。字體有很多種(zhǒng)，但有一點是共通的——它必須具有可讀性。

這(zhè)是一個時常被(bèi)遺忘的因素。設計師們往太狹小的空間填入太多信息，或是選用了外觀勝過(guò)可讀性的字體。但重點是：如果字體無法閱讀，你的設計就無法完全生效。

盡管有些聳人聽聞，但它幾乎是普适規律。你會問：“作爲藝術元素的那些字體怎麼(me)說？” 不可閱讀的字體在這(zhè)類設計中确實能(néng)發(fā)揮作用，但是，僅限于與可讀的文字搭配使用。

在狹窄空間體現可讀性

什麼(me)使得文字能(néng)夠閱讀呢？它實際上是很多因素共同作用的結果，包括行長(cháng)度、行距、字體樣(yàng)式、外邊距和内邊距，還(hái)有顔色和對(duì)比度。

每一個元素，都(dōu)影響著(zhe)屏幕閱讀的難易程度。這(zhè)每一種(zhǒng)元素，都(dōu)是設計師能(néng)夠操控的。記住，本文中談論的這(zhè)些元素，是指網站主體部分的文字，此處文字的可讀性可以說是首要考慮因素。（别處文字的标準相對(duì)寬松許多，隻要主體部分高度可讀。）

行長(cháng)度：每行的字符個數對(duì)于整體的可讀性起(qǐ)著(zhe)主要作用。如果文字段落非常寬，那是很吓人的，難以閱讀。同理，每行文字太短也不行，會給讀者的眼睛帶來壓力，造成(chéng)混亂。

行距：每行文字間的間距也同樣(yàng)重要。看看這(zhè)篇文章，如果每行文字都(dōu)與上下兩(liǎng)行粘在一起(qǐ)，你就無法理解這(zhè)些句子。

字體樣(yàng)式：字體的樣(yàng)式也會影響可讀性。簡潔的襯線字體和無襯線字體是具可讀性、易浏覽的，而那些華麗的手書和新奇字體則難破譯。

外邊距和内邊距：和行距一樣(yàng)，元素周邊和之間的空隙也影響著(zhe)用戶閱讀文字本身。

顔色與對(duì)比度：文字顔色與相應背景也至關重要。如果在綠色背景上寫綠色文字，就難以閱讀了。設計師選擇淺色字深色背景，或是深色字淺色背景，都(dōu)是有原因的。對(duì)比使得字符容易閱讀。

不同屏幕上的可讀性

那如何創造易讀的文字？如果是正文文字，有一些基本準則規定每行的字數——每種(zhǒng)設備不同—— 有助于打造佳的可讀性。

從何開(kāi)始呢？佳行長(cháng)度有助于幫你确定文字段落的大小。可以這(zhè)樣(yàng)：确定正文部分的寬度——通常可以假定分成(chéng)桌面(miàn)、平闆、手機三種(zhǒng)尺寸。然後(hòu)調整文字大小到理想的單行字數。

雖然還(hái)有其他因素在起(qǐ)作用，這(zhè)些準則是很好(hǎo)的入手點。

桌面(miàn)：每行55到75個英文字符，包括空格；理想狀态是每行65個字符
移動設備：每行35到50個字符

將(jiāng)佳的單行字數與絕佳的行距相結合，可以提升可讀性。通常，行距好(hǎo)是按照正文字體字号的百分比來定義，也可以定義爲固定值或是em。

桌面(miàn)：字号的1.5倍
移動設備：字号的1.75至2倍

如果你想找個工具來簡化所有這(zhè)些工作，試試 黃金比例文字計數器 。

可讀性的其他提示

要打造可讀的排版，正文以外的文字也大有關聯。使用标題、無序列表、段落間的額外間距和顔色，也能(néng)提升整體可讀性（标題則有助于浏覽整個網站）。

考慮使用如下元素增進(jìn)文字層級，創造更完整、更易讀的網頁設計。記得要把這(zhè)些元素“設計”成(chéng)獨特的字體、字号和顔色，并要在正文中保持協調。

标題
鏈接
粗體或斜體字
無序或有序列表
圖像元素，例如照片
說明文字
引用文字
在各元素中混合使用襯線字體和無襯線字體

種(zhǒng)易讀的字體

沒(méi)有一篇讨論可讀性的文章不推薦字體的。下面(miàn)有10種(zhǒng)高度可讀——并且相當流行——的字體供你選擇建立網站。

既然你已經(jīng)有了好(hǎo)點子，決定下個設計項目中要使用什麼(me)字體和樣(yàng)式，你确定能(néng)以一種(zhǒng)完全可讀的方式將(jiāng)它們組合起(qǐ)來嗎？下面(miàn)是一列清單，供你規劃字體的設計。

主體部分字号夠大嗎？在每種(zhǒng)設備上，它是否達到佳的行長(cháng)度？

每行文字間是否有足夠的間距？

文字與頁面(miàn)邊界和其他元素之間有沒(méi)有足夠的空間？

正文文字顔色與背景對(duì)比反差夠強烈嗎？

每個新段落之間是否有額外的空隙？

标題和其他元素與正文文字不同嗎？

有沒(méi)有使用其他元素（無序列表、粗體字等）分解大段文字？

正文文字是否使用了易讀的字體（建議選用一種(zhǒng)襯線或無襯線字體）？

結論

可讀性是設計中至關重要的組成(chéng)部分。如果無法閱讀和理解頁面(miàn)上的内容，對(duì)于用戶而言，它就完全不相關也不重要。

如何在設計項目中規劃可讀性？你有沒(méi)有其他通往成(chéng)功的技巧？在評論中與我們分享吧。