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