- 相關(guān)推薦
網(wǎng)頁設(shè)計(jì)中字體應(yīng)用的技巧
好的字體排版,可以讓人耐心的看完那些文字,然后得到其中的重要信息,還可以影響到瀏覽者閱讀的心情。下面就是小編介紹網(wǎng)頁設(shè)計(jì)中字體應(yīng)用的技巧，歡迎大家借鑒!
溝通在設(shè)計(jì)中有著舉足輕重的地位——溝通對(duì)于在網(wǎng)站和用戶之間建立清晰的聯(lián)系并幫助用戶完成他們的目標(biāo)是至關(guān)重要的。當(dāng)我們?cè)诰W(wǎng)頁設(shè)計(jì)中討論溝通時(shí)，通常指的上面的是文字。字體又是這個(gè)過程中至關(guān)重要的部分：
超過95%的網(wǎng)絡(luò)信息都是以書面語言的形式出現(xiàn)的。
優(yōu)秀的字體設(shè)計(jì)可以讓閱讀變得輕松，而糟糕的字體設(shè)計(jì)則會(huì)讓用戶難以閱讀。正如 Oliver Reichenstein 在他的文章《網(wǎng)頁中95%的設(shè)計(jì)都是字體》中所寫的那樣：
優(yōu)化字體就是優(yōu)化可讀性，可訪問性，可用性，以及文字的整體平衡。
換句話說，優(yōu)化字體設(shè)計(jì)也就是優(yōu)化用戶界面。在本文中，我將提供一些幫助提高文本內(nèi)容可讀性和易讀性的準(zhǔn)則。
1 使用盡量少的字體
使用超過3種不同的字體會(huì)使網(wǎng)站看起來結(jié)構(gòu)松散并且不專業(yè)。請(qǐng)記住，太多的字體大小和樣式同時(shí)也會(huì)破壞網(wǎng)頁的布局。
為了防止這種情況，我們需要盡量把使用字體的數(shù)量限制到最小
一般來說，將字體的數(shù)量限制在最小(兩個(gè)是經(jīng)常使用的數(shù)量，一個(gè)有時(shí)也足夠了)，并且整個(gè)網(wǎng)站都采用相同的字體。如果你使用了不止一種字體，那么確保這些字體是根據(jù)它們的字符寬度而互補(bǔ)的。以下面的字體組合為例。Georgia 和 Verdana(左)的組合因?yàn)橄嗨扑誀I(yíng)造出了和諧感。相比之下，Baskerville 和 Impact(右)，因?yàn)?Impact 的字重使得 Baskerville 就不那么明顯了。
確保字體之間要根據(jù)字符寬度互補(bǔ)
2 使用標(biāo)準(zhǔn)字體
字體嵌入服務(wù)(比如Google Web Font 和 Typekit)有很多有趣的字體，這些字體可以給你的設(shè)計(jì)帶來全新的、新鮮的和意想不到的東西。它們也非常容易使用。以谷歌為例:
隨便選擇一個(gè)字體，比如 Open Sans。
生成代碼并把代碼粘貼到 HTML 文檔的 head 中。
完活了!
那么，哪里會(huì)出錯(cuò)呢?
實(shí)際上，這種方法有一個(gè)嚴(yán)重的問題——就是用戶更熟悉標(biāo)準(zhǔn)字體，在標(biāo)準(zhǔn)字體下用戶可以更快地閱讀。
除非你的網(wǎng)站對(duì)自定義字體有著特殊的需求，比如為某個(gè)品牌設(shè)計(jì)網(wǎng)頁，或者意圖創(chuàng)造一種沉浸式的體驗(yàn)，否則最好還是使用系統(tǒng)自帶的字體。安全的做法是使用一個(gè)系統(tǒng)字體：Arial、Calibri、Trebuchet 等等。記住，好的字體設(shè)計(jì)會(huì)把讀者吸引到內(nèi)容上，而不是字體本身。
3 限制一行字的長(zhǎng)度
一行中字符的數(shù)量是文本可讀性的關(guān)鍵。不應(yīng)該光由你的設(shè)計(jì)決定了文本的寬度，也應(yīng)該考慮到文本的易讀性。Baymard 研究所關(guān)于可讀性和字行長(zhǎng)度的建議是：
“如果想要一個(gè)好的閱讀體驗(yàn)，應(yīng)該每一行有60個(gè)左右的字符。一行中字符的數(shù)量是文本可讀性的關(guān)鍵�！�
如果一行太短，眼睛就得經(jīng)常轉(zhuǎn)回去，這就打破了閱讀的節(jié)奏。
如果一行文字太長(zhǎng)，用戶的眼睛將就很難集中在文本上。
對(duì)于移動(dòng)設(shè)備，每一行應(yīng)該使用30到40個(gè)字符。下面是兩個(gè)在移動(dòng)設(shè)備上瀏覽網(wǎng)站的例子。第一個(gè)使用每行50-75個(gè)字符(打印和桌面應(yīng)用的每行最佳字符數(shù))，第二個(gè)使用了最優(yōu)的30到40個(gè)字符。
在網(wǎng)頁設(shè)計(jì)中，你可以通過使用 em 或像素來限制文本塊的寬度，來找到每行的最佳字符數(shù)。
4 選擇一個(gè)適用于各種大小的字體
用戶用來訪問你的站點(diǎn)都是不同大小屏幕和分辨率的設(shè)備。大多數(shù)用戶界面都需要不同大小的文本元素(按鈕、字段標(biāo)簽、欄目標(biāo)題等)。這里重要的 是要選擇一個(gè)在不同的尺寸和字重上都能很好地保持可讀性和可用性的字體。
谷歌的 Roboto 字體
確保你選擇的字體在小屏幕上也是清晰可見的!盡量避免使用草書的字體，比如 Vivaldi，盡管這些字體很漂亮，但是很難閱讀。
Vivaldi的字體在小屏幕上很難閱讀
5 使用字母區(qū)分明顯的字體
許多字體都把一些字母設(shè)計(jì)得不容易識(shí)別，特別是“i”和“L”(如下圖所示)，以及字母間距不當(dāng)?shù)膯栴}，比如“r”和“n”看起來像“m”。所以在選擇字體時(shí)，一定要在不同的環(huán)境中試驗(yàn)字體，確保不會(huì)給你的用戶帶來問題。
6 不要全部大寫的字母
全部大寫的文本——意思是所有的字母都是大寫字母——在不涉及閱讀的情況下還是不錯(cuò)的(例如縮寫或 logo)，但是當(dāng)涉及到閱讀時(shí)，不要強(qiáng)迫你的用戶閱讀全是大寫的文本。正如 Miles Tinker 在他的影響巨大的《印刷的易讀性》中提到的，全部大寫的文本與小寫相比，大大降低了瀏覽和閱讀的速度。
7 不要把行間距最小化
在字體排版中，我們有一個(gè)特殊的術(shù)語來表示兩行文字之間的間距——leading(或行高)。通過增加行高可以增加文本行之間的垂直空白，從而提高可讀性。一個(gè)比較好的規(guī)則是為了打造良好的可讀性，行高應(yīng)該比字符高度多大約30%。
正如 Dmitry Fadeyev 指出的，合理地使用段落之間的空白，已經(jīng)被證實(shí)可以提升用戶20%的理解度。使用空白的技巧在于為用戶提供易于消化的內(nèi)容，然后剝離無關(guān)的細(xì)節(jié)。
8 確保有足夠的顏色對(duì)比度
不要在文本和背景上使用相同或相似的顏色。文本越清晰，用戶就能越快地瀏覽和閱讀。以下是 W3C 推薦的正文文本和圖像文本的對(duì)比比例：
小字體的文本應(yīng)該與背景有至少4.5:1的對(duì)比度。
大字體的文本(14pt的粗體或18pt的常規(guī)以上)應(yīng)該與背景有至少3:1的對(duì)比度。
這兩行文字不符合顏色對(duì)比度的建議，很難在它們的背景顏色下閱讀。
這兩行文本符合顏色對(duì)比度的建議，很容易在背景色下閱讀。
一旦你確定了顏色的選擇，就需要在設(shè)備上和真正的用戶之間進(jìn)行測(cè)試，這是非常有必要的。如果有測(cè)試反映出閱讀的問題，那么你就可以確信用戶也會(huì)遇到同樣的問題。
9 不要使用紅色或綠色的文字
色盲是一種常見的情況，尤其是在男性中(8%的男性是色盲)，所以建議使用其他顏色來引導(dǎo)重要的信息。同樣，應(yīng)避免使用紅色和綠色來傳達(dá)信息，因?yàn)榧t綠色盲是最常見的色盲。
10 不要使用閃爍的文字
閃光或閃爍的內(nèi)容能引發(fā)易感人群的癲癇發(fā)作。不僅如此，這很可能會(huì)讓大部分的用戶感到厭煩或精神渙散。
不要閃爍!
結(jié)論
字體設(shè)計(jì)是一個(gè)很重要的問題。做出正確的字體選擇可以讓你的網(wǎng)站有一種清新和優(yōu)雅的感覺。另一方面，糟糕的字體則會(huì)讓人分心，讓人們的注意力放在字體本身上。字體的可讀性、可理解性和易讀性是設(shè)計(jì)中至關(guān)重要的一環(huán)。
字體是為了突出內(nèi)容
字體應(yīng)該以一種不會(huì)增加用戶認(rèn)知負(fù)擔(dān)的方式來突出內(nèi)容。
【網(wǎng)頁設(shè)計(jì)中字體應(yīng)用的技巧】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)中的字體設(shè)計(jì)07-26
網(wǎng)頁設(shè)計(jì)中字體和文字搭配的技巧10-01
網(wǎng)頁設(shè)計(jì)中字體規(guī)范06-07
攝影圖在網(wǎng)頁設(shè)計(jì)中的應(yīng)用技巧05-12
網(wǎng)頁中字體排版設(shè)計(jì)方法07-12
網(wǎng)頁設(shè)計(jì)中圖片常用的技巧08-17
網(wǎng)頁設(shè)計(jì)常用哪些字體08-05
網(wǎng)頁設(shè)計(jì)配色及字體規(guī)范06-09