網頁字型指南:了解英文字型 3 大類,讓你的網站更專業!

字型是網頁設計中經常接觸到的視覺傳達元素,而一個網站中有很高的比例是由文字所組成,字型的樣式與視覺特性會直接影響到資訊的傳遞與感受。

字型,真的有差嗎?

網頁字型

設計師 Steven Heller 曾說:人類是「習慣」的產物。以品牌為例,我們可以輕易地將商標與字型做連結,例如:可口可樂充滿活力的曲線標準字、LV 時尚優雅的字型組合等,若將上述品牌的字型變更,我們會很快的意識到它們的改變,甚至因為不符合我們的價值觀,而懷疑它們是否為盜版商品。

你辨識得出哪一個是「真正」的 GAP 商標嗎?

知名服飾品牌 GAP 於 2010 年發佈新的商標形象 (上圖左),但使用不到幾天就宣布取消這個新商標,改回原本的商標,原因是因為消費者抗議新的商標字型看起來較平凡無奇,失去原本的品牌形象。

字型影響了消費者對於品牌的視覺感受,無論是網頁設計還是品牌設計,使用適切的字型可以讓使用者對網站產生良好的第一印象。本篇文章將列舉 Google Fonts 所提供的英文字型,並分析其造型,教你如何妥善應用於網站中。

Google Fonts 應用於網頁設計中

WordPress 在 3.8 版本之後自動引入 Google Fonts 外部字型資源,以筆者使用的 AstraElementor 在編輯頁面中即可透過內建字型選單選擇所需要使用的 Google Fonts 字型。

什麼是 Google Fonts?
Google Fonts 為一套開放、免費、可商用的字型資源網站,提供數百種字型 (主要為英文字型),善用 Google Fonts 不僅可以讓網站更加美觀,使用得宜更可提升網頁的易讀性與辨識度;但需要注意若在中國大陸使用這些字型會造成網頁讀取延遲,使用時請考量目標客群。

英文字型的分類

了解英文字型的分類可以快速了解字型的特點,讓你在網頁設計中快速的找到適切的字型。英文字型大致上分為三類:無襯線字、襯線字和裝飾性字型。

第一類、無襯線字 (Sans-serif)

無襯線字具有現代感,經常應用於科技相關產業,於網頁以及行動裝置具有較高的辨識度。    

(1) Roboto

Google Fonts

Roboto 其骨架剛硬,字型略為修長,保留手寫字型比例,可以從 D、G、O、Q 這些單字感受到其特性,另外 Roboto 字裡的封閉空間較大,在行動裝置以及字級較小的情況閱讀性較高,適合應用於響應式網站以及介面設計,Roboto 結合了許多字型的元素,同時具有幾何機械感與人文感,在編排上實用度高;但須注意字型元素不太統合,在有些專業人士眼裡覺得它比較不像是一套字型。

(2) Source Sans Pro

Google Fonts

Source Sans Pro 為 Adobe 所推出的字型,主打專門針對 UI 設計所使用,Source Sans Pro 在字型的一致性上勝於 Roboto,且多了一分人文氣息與柔和感。一個良好的 UI 字型需要有良好的視認性與閱讀性,我們可看到 Source Sans Pro 英文字小寫 a 以及 g 屬於雙層型 (如下圖),此類型於較小的行動裝置閱讀時辨識度較高。

網頁字型

(3) Oswald

Google Fonts

Oswald 屬於 Condensed (壓縮) 的無襯線字型,我們在閱讀網頁時很容易注意到瘦長、垂直空間佔用較大的字型,妥善的運用不僅可以增加閱讀的節奏性還可以提升標題的注目性;但此字型較不適合做為內文閱讀,容易產生視覺疲乏。

第二類、襯線字 (Serif)

此類字型每個字母在筆畫開始及結束的位置有額外的裝飾,其粗細有所不同,由於強調了開始及結束,因此易讀性較高,具有懷舊、親切之意象,應用於網頁可展現優雅、文青風的效果。

(1) EB Garamond

Google Fonts

Garamond 是一款舊式的字型,具復古、墨韻感,這類型的字型與傳統的中文字型相當的搭配,應用於網頁中可以展現出人文氣息。

(2) Rufina

Google Fonts

Rufina 適合應用於網頁的主標題,展現時尚雜誌感,此種字型相當優雅,宛如走在巴黎時尚伸展台;但其字型頭尾的裝飾極細,較不適合做為內文使用。

第三類、裝飾性字型 (Display fonts)

英文字型除了以無襯線字及襯線字的分類外,也可依照用途分為兩類:Text font 以及 Display font。Text font 大多為內文、副標題所使用;而 Display font 則用於較大、需提升注目性的主標題,可以展現其風格特色、增加標題的裝飾性。

(1) Lobster

Google Fonts

常常使用 Instagram 的朋友有沒有覺得這個字型格外眼熟呢? Lobster 具有休閒的視覺感受,其連字特性使其手寫感更加強烈,在 Lobster 2 還額外提供了斜體以及兩種字重可以選擇,Lobster 輕易的營造出快樂的氛圍,常常應用於派對、非正式場合的活動中,在歐美國家廣泛地受到使用。

當你對網頁字型毫無頭緒,不妨查詢網頁使用字型排行做參考吧!

FontReach 收錄各網站所使用的字型,將網頁最熱門字型做排名

font reach

FontReach 可以快速查訊字型被哪些網站使用,並且可以透過排行榜了解目前熱門的字型,當你對網頁字型毫無頭緒時,不妨利用這個網站當作你的設計參考吧!

小結

Google Fonts 截至目前為止提供了 900 多種字型可以選擇,每種字型的使用皆有不同的情境模式,例如襯線字應用得宜,可以讓網站營造出文青風、典雅的感覺;而無襯線字可以輕易營造出現代感與科技感,需要注意不是每一種字型都適合當作內文使用,需要顧及較小的行動裝置閱讀性是否良好、是否容易辨識出每個字母。好的字型應用不僅可以提升使用者對於網站的操作印象及觀感,同時也是展現身為一位網頁設計師的專業與細膩。
歡迎分享你們的網站字型應用!我們下次見 ~

參考資料

Winston (2019.05.28)。英文UI字型大評比:視認性測試【 Justfont Blog 】。取自 http://blog.justfont.com/2013/01/ui-font-testing-legibilit/
Poen (2019.05.28)。Google fonts 的字體 (display 篇)【 Justfont Blog 】。取自 http://blog.justfont.com/2014/06/google-fonts-3/
Winston (2019.05.28)。Google fonts 的字體 (sans-serif 篇)【 Justfont Blog 】。取自 http://blog.justfont.com/2014/06/google-fonts-2/
Winston (2019.05.28)。Google fonts 的字體 (serif 篇)【 Justfont Blog 】。取自 http://blog.justfont.com/2014/06/google-fonts-1/
掘金 (2019.05.28)。漂亮的字體組合的秘密【 nicedesign 】。取自http://www.niceui.cn/html/blogs/view-48.html
三采文化  (2019.05.28)。字體,真的有差嗎? 一窺生活中字型設計的秘密【 創業小聚 】。取自 https://meet.bnext.com.tw/articles/view/39930

Scroll to Top