字型是網頁設計中經常接觸到的視覺傳達元素，而一個網站中有很高的比例是由文字所組成，字型的樣式與視覺特性會直接影響到資訊的傳遞與感受。
設計師 Steven Heller 曾說：人類是「習慣」的產物。以品牌為例，我們可以輕易地將商標與字型做連結，例如：可口可樂充滿活力的曲線標準字、LV 時尚優雅的字型組合等，若將上述品牌的字型變更，我們會很快的意識到它們的改變，甚至因為不符合我們的價值觀，而懷疑它們是否為盜版商品。
知名服飾品牌 GAP 於 2010 年發佈新的商標形象 (上圖左)，但使用不到幾天就宣布取消這個新商標，改回原本的商標，原因是因為消費者抗議新的商標字型看起來較平凡無奇，失去原本的品牌形象。
字型影響了消費者對於品牌的視覺感受，無論是網頁設計還是品牌設計，使用適切的字型可以讓使用者對網站產生良好的第一印象。本篇文章將列舉 Google Fonts 所提供的英文字型，並分析其造型，教你如何妥善應用於網站中。
WordPress 在 3.8 版本之後自動引入 Google Fonts 外部字型資源，以筆者使用的 Astra 與 Elementor 在編輯頁面中即可透過內建字型選單選擇所需要使用的 Google Fonts 字型。
什麼是 Google Fonts？
Google Fonts 為一套開放、免費、可商用的字型資源網站，提供數百種字型 (主要為英文字型)，善用 Google Fonts 不僅可以讓網站更加美觀，使用得宜更可提升網頁的易讀性與辨識度；但需要注意若在中國大陸使用這些字型會造成網頁讀取延遲，使用時請考量目標客群。
了解英文字型的分類可以快速了解字型的特點，讓你在網頁設計中快速的找到適切的字型。英文字型大致上分為三類：無襯線字、襯線字和裝飾性字型。
無襯線字具有現代感，經常應用於科技相關產業，於網頁以及行動裝置具有較高的辨識度。
Roboto 其骨架剛硬，字型略為修長，保留手寫字型比例，可以從 D、G、O、Q 這些單字感受到其特性，另外 Roboto 字裡的封閉空間較大，在行動裝置以及字級較小的情況閱讀性較高，適合應用於響應式網站以及介面設計，Roboto 結合了許多字型的元素，同時具有幾何機械感與人文感，在編排上實用度高；但須注意字型元素不太統合，在有些專業人士眼裡覺得它比較不像是一套字型。
Source Sans Pro 為 Adobe 所推出的字型，主打專門針對 UI 設計所使用，Source Sans Pro 在字型的一致性上勝於 Roboto，且多了一分人文氣息與柔和感。一個良好的 UI 字型需要有良好的視認性與閱讀性，我們可看到 Source Sans Pro 英文字小寫 a 以及 g 屬於雙層型 (如下圖)，此類型於較小的行動裝置閱讀時辨識度較高。
Oswald 屬於 Condensed (壓縮) 的無襯線字型，我們在閱讀網頁時很容易注意到瘦長、垂直空間佔用較大的字型，妥善的運用不僅可以增加閱讀的節奏性還可以提升標題的注目性；但此字型較不適合做為內文閱讀，容易產生視覺疲乏。
此類字型每個字母在筆畫開始及結束的位置有額外的裝飾，其粗細有所不同，由於強調了開始及結束，因此易讀性較高，具有懷舊、親切之意象，應用於網頁可展現優雅、文青風的效果。
Garamond 是一款舊式的字型，具復古、墨韻感，這類型的字型與傳統的中文字型相當的搭配，應用於網頁中可以展現出人文氣息。
Rufina 適合應用於網頁的主標題，展現時尚雜誌感，此種字型相當優雅，宛如走在巴黎時尚伸展台；但其字型頭尾的裝飾極細，較不適合做為內文使用。
英文字型除了以無襯線字及襯線字的分類外，也可依照用途分為兩類：Text font 以及 Display font。Text font 大多為內文、副標題所使用；而 Display font 則用於較大、需提升注目性的主標題，可以展現其風格特色、增加標題的裝飾性。
常常使用 Instagram 的朋友有沒有覺得這個字型格外眼熟呢？ Lobster 具有休閒的視覺感受，其連字特性使其手寫感更加強烈，在 Lobster 2 還額外提供了斜體以及兩種字重可以選擇，Lobster 輕易的營造出快樂的氛圍，常常應用於派對、非正式場合的活動中，在歐美國家廣泛地受到使用。
Google Fonts 截至目前為止提供了 900 多種字型可以選擇，每種字型的使用皆有不同的情境模式，例如襯線字應用得宜，可以讓網站營造出文青風、典雅的感覺；而無襯線字可以輕易營造出現代感與科技感，需要注意不是每一種字型都適合當作內文使用，需要顧及較小的行動裝置閱讀性是否良好、是否容易辨識出每個字母。好的字型應用不僅可以提升使用者對於網站的操作印象及觀感，同時也是展現身為一位網頁設計師的專業與細膩。
想看看網頁字型如何應用到網頁設計上，可以閱讀這一篇：最佳化你的 Elementor – Fonts / Color / Section 一次搞定 🙂
