前言：字體之於網頁的重要性
為了讓自己的職涯能有更多選擇，不少平面設計師選擇跨足網頁設計領域，筆者身邊也有同事與朋友在完全沒有網頁設計經驗的情況下進入這個產業。剛開始接觸網頁設計，除了會碰到排版規則、元件狀態等等大方向與平面設計不同以外，其實有一個重要的小細節，會讓前端工程師第一眼看到就打槍設計稿 ── 那就是字體的選擇與使用。
身為設計師的大家，對於各種字型、字重的特性，以及如何搭配不同字型、在畫面中安排文字區塊，讓畫面有節奏、內容有層級之分等等……都相當熟悉了，在這裡先不多提。這系列文章主要是想由前端工程師的角度，補充網頁設計中對於字體運用的觀察與建議，列出一些在網頁中使用字體的基本觀念，希望能讓大家少走一點冤枉路（工程師真的沒有很想打槍設計稿！）。
以筆者自身的經驗，因為字體而需要和設計師進一步討論的原因大致有以下幾種：
- 用了需要另外購買授權的字體
- 選用的字體在網頁上呈現不佳
- 用了超過一種以上的中文字體
- 中文字體用了超過三種以上的字重
- 文字層級樣式定義不明確：
例如明明一樣是內文，在不同頁面位置卻有不同的設計，或是同樣大小的文字卻使用不同的行高、字間距……
最後一項牽涉到設計規範，暫不討論，其餘都與字體在網頁上的應用息息相關，如果一開始就考慮到，設計稿就不用全部重換字體了 XD！
字體使用大前提：商用授權
和圖片素材一樣，字體使用需注意的大前提就是需要取得版權，更具體地說，是「商用授權」；而在網頁設計領域又更進一步，需要的是「網頁用字體授權」（Web Font License）。
前幾年從 Youtuber 圈展開討論、曾經吵得沸沸揚揚的 Window 系統預設字體商用授權問題，肯定已讓許多設計師瞭解到字體商用授權的重要性。不過，進一步的「網頁用字體授權」又是什麼呢？
簡單來說，字體的商用授權一般涵蓋平面設計、印刷、招牌看板、簡報等等情境，對平面設計師而言已經堪用；不過大部分的商用授權會包含但書，排除掉使用在網站的情境，更甚者，還會進一步區分使用於網站伺服器、內嵌於軟體或APP、運用於電子書內文……等等不同型態的授權。而這些授權更常常會採訂閱制的方式，以月費、年費或是按流量計費。
圖片文字 v.s. 網頁文字分屬不同授權
在網頁上使用字體有很多種方式，後文中有更詳細的區分，在這個段落中，先簡單區別成兩種情形以釐清授權範圍的不同：
1. 圖片上的文字
大部分廣告圖、需要時常更新不同排版的 Banner 設計、或是特殊設計的版面……等，常常會直接把文字做在圖上。這種使用方式含括於平面設計的授權中，因此並不需要特別取得網頁用字體授權（但還是要有一般的授權喔！）。
順帶一提，如果想要把整個網頁所有的文字都用圖片來呈現……也不是不行（而且前端工程師可以少做很多事XD）。然而，這種做法只能確保在特定解析度的螢幕上看到的網站內容完全符合設計稿，一旦螢幕尺寸放大或縮小，圖片上的文字就會有模糊失真、過小不易閱讀等情形，在追求響應式設計的現在可說是比較落伍的方式了。況且對於內容需要頻繁更新的網站來說，每次更改文字就要重新做圖，也不太現實。
網頁中的文字
這種使用方式才是這系列文章要著重探討的，也就是網頁中呈現出來可以被選取、複製、能被爬蟲讀取的文字內容。想在網頁文字運用特殊的字型，就要注意取得該字型的網頁用授權。
使用需要授權的字體之前，務必先確認業主（甲方）是不是願意為字體買單。如果業主覺得每年額外為字體支付一筆固定成本不划算，市面上仍有不少能夠免費商用、甚至開源的字體可以挑選。當然，如果業主銀彈充足、對網頁質感的要求高，那麼選擇就更多一些囉！
中英文字體資源
以下簡單列舉一些付費和免費的字體網站，供大家參考：
- 付費中英文字體（各家授權範圍、使用方式不同，使用前要好好研究）：
- justfont
說到台灣近年的字型設計公司，一定不能不提到 justfont。他們的網頁字型授權（不包含商標、內嵌於系統或 APP 的授權）費用方案有三種，付費方案以年費計算，可以依照頁面流量來評估選擇哪種規模。 - 華康字型
老字號字型公司威鋒數位現在也有提供 Web Font 服務，中文字型選擇非常多！ - iFontCloud文鼎雲字庫
也是老字號的字型公司，字型列表有很便利的篩選功能，可以按需求找到需要的字型，且語言種類相當多樣。 - MyFonts
- Fonts.com
- TypeNetwork
英文字體網站種類繁多，實務上通常會依客戶需求，直接找有目標字型的網站購買授權。
- justfont
- 免費中英文字型：
- Google Fonts
Google Fonts 收集了大量能免費商用的字體（主要是英文），且搜尋結果也包含不少付費字體，可以導向購買的網站。呈現方式簡單易用，目錄上方有多種選項能過濾出需要的字體，簡直是設計師們的福音！Google Fonts 還有一個巨大的優勢，就是提供優化過的雲端字體，採 cdn 的方式嵌入網頁中，可以避免網頁載入速度變慢。真是太好用啦，誠摯推薦！不過要注意的是，若目標客群包含中國使用者，由於 Google 被擋會造成頁面載不出來。 - Adobe Fonts
Adobe 後來也開發出了一套相當便利的字體系統，和 Google Fonts 頗類似，也有 cdn 可以便利地載入網頁中，不過需要有Adobe 帳號登入後才能使用。登入後可以新增多個 Web Project，將字型加入不同專案中分開管理。具體如何使用可參考操作說明。 - butTaiwan
一系列根據思源改作的開源黑體、明體，包含源樣黑體、源石黑體、源泉黑體、源樣明體、源流明體、源雲明體等。 - justfont
你以為 justfont 都只有付費字體嗎？其實他們目前有出一套開源字型「open 粉圓」哦！在他們的雲端字型列表裡，也可以點擊右下角的「免費」選項，篩選出不少免費繁中/簡中/日文字型。 - 100 font
雖然我一般會建議從字體設計的源頭去找檔案來下載，不過有這樣一個中文的統整網站還是相當方便的！站方在各個字體介紹內頁都有提供原始下載連結，比較方便驗證來源和授權狀態。 - BEfonts
英文免費字體真的是族繁不及備載，BEfonts 有根據免費商用、付費商用建立標籤，建議使用時，還是要先好好確認字體來源，是不是真的有網頁使用授權。
- Google Fonts
字型資源族繁不及備載，說明字體設計的文章也有各式各樣，這系列文章旨在建立網頁設計與前端間的橋樑，把一些筆者常常遇到設計師會提出的問題，做一個系統性的整理（以後再遇到有人問就可以直接請他來看文章了）。希望這篇文章能讓初入網頁設計這行的各位設計師們更瞭解網頁字體授權，在選擇字體前能先考慮到這個授權的大前提，以免到了實作頁面時，才發現需要和業主討論購買字體的預算。
系列的下一篇文章，將說明最前面提到的另外幾個打槍原因：
- 選用的字體在網頁上呈現不佳
- 用了超過一種以上的中文字體
- 中文字體用了超過三種以上的字重
下一篇文章要探討的就是：電腦和瀏覽器渲染字體的不同，而前端工程師又如何設定字體，為什麼設定多種字體會導致頁面載入速度變慢？
系列文章目錄：
To 設計師：入門網頁字型指南 -1（網頁字體授權）← 現在在這裡！
To 設計師：入門網頁字型指南 -2（網頁字體呈現基礎）
To 設計師：入門網頁字型指南 -3（網頁字體設定的複雜度光譜）
To 設計師：入門網頁字型指南 -4（實用工具：Google Fonts介紹）
To 設計師：入門網頁字型指南 -5（設計彈性與多語系網站）
