文章譯自：Medium

原文標題：10 Tips On Typography in Web Design

原文作者：Nick Babich

文章翻譯：村長道哥

溝通在設(shè)計中有著舉足輕重的地位——溝通對于在網(wǎng)站和用戶之間建立清晰的聯(lián)系并幫助用戶完成他們的目標是至關(guān)重要的楞慈。當我們在網(wǎng)頁設(shè)計中討論溝通時，通常指的上面的是文字啃擦。字體又是這個過程中至關(guān)重要的部分：

超過95%的網(wǎng)絡(luò)信息都是以書面語言的形式出現(xiàn)的囊蓝。

優(yōu)秀的字體設(shè)計可以讓閱讀變得輕松，而糟糕的字體設(shè)計則會讓用戶難以閱讀令蛉。正如 Oliver Reichenstein 在他的文章《網(wǎng)頁中95%的設(shè)計都是字體》中所寫的那樣：

優(yōu)化字體就是優(yōu)化可讀性聚霜，可訪問性，可用性珠叔，以及文字的整體平衡蝎宇。

換句話說，優(yōu)化字體設(shè)計也就是優(yōu)化用戶界面祷安。在本文中姥芥，我將提供一些幫助提高文本內(nèi)容可讀性和易讀性的準則。

1 使用盡量少的字體

使用超過3種不同的字體會使網(wǎng)站看起來結(jié)構(gòu)松散并且不專業(yè)汇鞭。請記住凉唐，太多的字體大小和樣式同時也會破壞網(wǎng)頁的布局。

為了防止這種情況霍骄，我們需要盡量把使用字體的數(shù)量限制到最小

一般來說台囱，將字體的數(shù)量限制在最小（兩個是經(jīng)常使用的數(shù)量腕巡，一個有時也足夠了）玄坦，并且整個網(wǎng)站都采用相同的字體。如果你使用了不止一種字體绘沉，那么確保這些字體是根據(jù)它們的字符寬度而互補的煎楣。以下面的字體組合為例。Georgia 和 Verdana（左）的組合因為相似所以營造出了和諧感车伞。相比之下择懂，Baskerville 和 Impact（右），因為 Impact 的字重使得 Baskerville 就不那么明顯了另玖。

確保字體之間要根據(jù)字符寬度互補

2 使用標準字體

字體嵌入服務(wù)（比如Google Web Font 和 Typekit）有很多有趣的字體困曙，這些字體可以給你的設(shè)計帶來全新的表伦、新鮮的和意想不到的東西。它們也非常容易使用慷丽。以谷歌為例:

隨便選擇一個字體蹦哼，比如 Open Sans。

生成代碼并把代碼粘貼到 HTML 文檔的 head 中要糊。

完活了!

那么纲熏，哪里會出錯呢?

實際上，這種方法有一個嚴重的問題——就是用戶更熟悉標準字體锄俄，在標準字體下用戶可以更快地閱讀局劲。

除非你的網(wǎng)站對自定義字體有著特殊的需求，比如為某個品牌設(shè)計網(wǎng)頁奶赠，或者意圖創(chuàng)造一種沉浸式的體驗鱼填，否則最好還是使用系統(tǒng)自帶的字體。安全的做法是使用一個系統(tǒng)字體：Arial毅戈、Calibri苹丸、Trebuchet 等等。記住竹祷，好的字體設(shè)計會把讀者吸引到內(nèi)容上谈跛，而不是字體本身羊苟。

3 限制一行字的長度

一行中字符的數(shù)量是文本可讀性的關(guān)鍵塑陵。不應(yīng)該光由你的設(shè)計決定了文本的寬度，也應(yīng)該考慮到文本的易讀性蜡励。Baymard 研究所關(guān)于可讀性和字行長度的建議是：

“如果想要一個好的閱讀體驗令花，應(yīng)該每一行有60個左右的字符。一行中字符的數(shù)量是文本可讀性的關(guān)鍵凉倚〖娑迹”

如果一行文字太長，用戶的眼睛將就很難集中在文本上稽寒。

對于移動設(shè)備扮碧，每一行應(yīng)該使用30到40個字符。下面是兩個在移動設(shè)備上瀏覽網(wǎng)站的例子杏糙。第一個使用每行50-75個字符（打印和桌面應(yīng)用的每行最佳字符數(shù)）慎王，第二個使用了最優(yōu)的30到40個字符。

在網(wǎng)頁設(shè)計中宏侍，你可以通過使用 em 或像素來限制文本塊的寬度赖淤，來找到每行的最佳字符數(shù)。

4 選擇一個適用于各種大小的字體

用戶用來訪問你的站點都是不同大小屏幕和分辨率的設(shè)備谅河。大多數(shù)用戶界面都需要不同大小的文本元素（按鈕咱旱、字段標簽确丢、欄目標題等）。這里重要的 是要選擇一個在不同的尺寸和字重上都能很好地保持可讀性和可用性的字體吐限。

谷歌的 Roboto 字體

確保你選擇的字體在小屏幕上也是清晰可見的鲜侥！盡量避免使用草書的字體，比如 Vivaldi诸典，盡管這些字體很漂亮剃毒，但是很難閱讀。

Vivaldi的字體在小屏幕上很難閱讀

5 使用字母區(qū)分明顯的字體

許多字體都把一些字母設(shè)計得不容易識別搂赋，特別是“i”和“L”（如下圖所示）赘阀，以及字母間距不當?shù)膯栴}，比如“r”和“n”看起來像“m”脑奠。所以在選擇字體時基公，一定要在不同的環(huán)境中試驗字體，確保不會給你的用戶帶來問題宋欺。

6 不要全部大寫的字母

全部大寫的文本——意思是所有的字母都是大寫字母——在不涉及閱讀的情況下還是不錯的（例如縮寫或 logo）轰豆，但是當涉及到閱讀時，不要強迫你的用戶閱讀全是大寫的文本齿诞。正如 Miles Tinker 在他的影響巨大的《印刷的易讀性》中提到的酸休，全部大寫的文本與小寫相比，大大降低了瀏覽和閱讀的速度祷杈。

7 不要把行間距最小化

在字體排版中斑司，我們有一個特殊的術(shù)語來表示兩行文字之間的間距——leading（或行高）。通過增加行高可以增加文本行之間的垂直空白但汞，從而提高可讀性宿刮。一個比較好的規(guī)則是為了打造良好的可讀性，行高應(yīng)該比字符高度多大約30%私蕾。

正如 Dmitry Fadeyev 指出的僵缺，合理地使用段落之間的空白，已經(jīng)被證實可以提升用戶20%的理解度踩叭。使用空白的技巧在于為用戶提供易于消化的內(nèi)容磕潮，然后剝離無關(guān)的細節(jié)。

8 確保有足夠的顏色對比度

不要在文本和背景上使用相同或相似的顏色容贝。文本越清晰自脯，用戶就能越快地瀏覽和閱讀。以下是 W3C 推薦的正文文本和圖像文本的對比比例：

小字體的文本應(yīng)該與背景有至少4.5:1的對比度嗤疯。

大字體的文本（14pt的粗體或18pt的常規(guī)以上）應(yīng)該與背景有至少3:1的對比度冤今。

這兩行文字不符合顏色對比度的建議，很難在它們的背景顏色下閱讀茂缚。

這兩行文本符合顏色對比度的建議戏罢，很容易在背景色下閱讀屋谭。

一旦你確定了顏色的選擇，就需要在設(shè)備上和真正的用戶之間進行測試龟糕，這是非常有必要的桐磁。如果有測試反映出閱讀的問題，那么你就可以確信用戶也會遇到同樣的問題讲岁。

9 不要使用紅色或綠色的文字

色盲是一種常見的情況我擂，尤其是在男性中（8%的男性是色盲），所以建議使用其他顏色來引導(dǎo)重要的信息缓艳。同樣校摩，應(yīng)避免使用紅色和綠色來傳達信息，因為紅綠色盲是最常見的色盲阶淘。

10 不要使用閃爍的文字

閃光或閃爍的內(nèi)容能引發(fā)易感人群的癲癇發(fā)作衙吩。不僅如此，這很可能會讓大部分的用戶感到厭煩或精神渙散溪窒。

不要閃爍坤塞！

結(jié)論

字體設(shè)計是一個很重要的問題。做出正確的字體選擇可以讓你的網(wǎng)站有一種清新和優(yōu)雅的感覺澈蚌。另一方面摹芙，糟糕的字體則會讓人分心，讓人們的注意力放在字體本身上宛瞄。字體的可讀性浮禾、可理解性和易讀性是設(shè)計中至關(guān)重要的一環(huán)。

字體是為了突出內(nèi)容

字體應(yīng)該以一種不會增加用戶認知負擔的方式來突出內(nèi)容坛悉。