網頁設計中字型應用的10個技巧

優化字型就是優化可讀性,可訪問性,可用性,以及文字的整體平衡。在本文中,將提供一些幫助提高文字內容可讀性和易讀性的準則。

網頁設計中字型應用的10個技巧

  1 使用盡量少的字型

使用超過3種不同的字型會使網站看起來結構鬆散並且不專業。請記住,太多的字型大小和樣式同時也會破壞網頁的佈局。

  2 使用標準字型

字型嵌入服務(比如Google Web Font 和 Typekit)有很多有趣的字型,這些字型可以給你的設計帶來全新的、新鮮的和意想不到的東西。它們也非常容易使用。

實際上,這種方法有一個嚴重的問題——就是使用者更熟悉標準字型,在標準字型下使用者可以更快地閱讀。

除非你的網站對自定義字型有著特殊的需求,比如為某個品牌設計網頁,或者意圖創造一種沉浸式的體驗,否則最好還是使用系統自帶的字型。安全的做法是使用一個系統字型:Arial、Calibri、Trebuchet 等等。記住,好的字型設計會把讀者吸引到內容上,而不是字型本身。

  3 限制一行字的長度

一行中字元的數量是文字可讀性的關鍵。不應該光由你的設計決定了文字的寬度,也應該考慮到文字的易讀性。Baymard 研究所關於可讀性和字行長度的建議是:

“如果想要一個好的閱讀體驗,應該每一行有60個左右的字元。一行中字元的數量是文字可讀性的關鍵。”

如果一行太短,眼睛就得經常轉回去,這就打破了閱讀的節奏。

如果一行文字太長,使用者的眼睛將就很難集中在文字上。

對於移動裝置,每一行應該使用30到40個字元。下面是兩個在移動裝置上瀏覽網站的例子。第一個使用每行50-75個字元(列印和桌面應用的每行最佳字元數),第二個使用了最優的30到40個字元。

網頁設計中,你可以通過使用 em 或畫素來限制文字塊的寬度,來找到每行的最佳字元數。

  4 選擇一個適用於各種大小的字型

使用者用來訪問你的站點都是不同大小螢幕和解析度的裝置。大多數使用者介面都需要不同大小的文字元素(按鈕、欄位標籤、欄目標題等)。這裡重要的 是要選擇一個在不同的尺寸和字重上都能很好地保持可讀性和可用性的字型。

  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 不要使用閃爍的文字

閃光或閃爍的內容能引發易感人群的癲癇發作。不僅如此,這很可能會讓大部分的使用者感到厭煩或精神渙散。