網站字型怎麼選？

客人打開網站，還沒讀內容，就先看到字。字型選得好，文章讀起來輕鬆，網站看起來專業；選得不好，字擠在一起、太細看不清楚，客人很快就離開。

這篇整理選網站字型時要考慮的事，寫給要做網站、或想替網站換個樣子的老闆。

內文：好讀最重要

內文是客人花最多時間讀的地方，選字型只看一件事：好不好讀。

• 用黑體類的字型：筆畫粗細一致，在手機小螢幕上也清楚。明體類的字型筆畫有粗有細，很細的部分在螢幕上容易糊掉，比較適合大一點的標題。
• 不要用太細的字重：很多網站為了「看起來精緻」用了最細的字，在陽光下、在舊手機上幾乎看不見。
• 整個網站只用一種內文字型。

標題：可以有一點個性

標題字數少，可以用比較有特色的字型，表現品牌的感覺：手寫感、圓體、粗黑體。但要注意：

• 只用在少數地方：大標題、首頁主標，不要連按鈕、選單都用。
• 確認每個字都有：有些特殊字型只做了常用字，遇到少見的字會變成別的字型，一句話裡兩種字混在一起。

英文和數字

中文字型裡的英文、數字常常不好看。可以另外指定一個英文字型，讓英文和數字用它，中文再用中文字型。寫法在〈網頁中文字型怎麼設定？〉。

價格、電話、營業時間這些數字很重要，挑一個數字清楚、0 和 O、1 和 l 分得出來的字型。

大小和行距

• 內文字級：手機上至少 16 像素，電腦上可以再大一點。年紀大的客人多的行業，例如醫療、保險、傳統產業，可以再放大。
• 表單的輸入框也要 16 像素以上：iPhone 上輸入框的字小於 16 像素時，點進去畫面會自動放大，客人要再手動縮回來。
• 行距：中文內文的行高大約是字級的 1.6 到 1.8 倍，太擠會很難讀。行距的寫法在〈CSS 文字左右對齊與行距設定〉。
• 字重：整個網站用兩三種就好，例如內文一般、標題粗體。

速度：中文字型檔案很大

英文只有幾十個字母，中文字型要包含幾千、上萬個字，檔案大很多。網站要客人下載字型才能顯示，字型越多越大，網站就越慢。

• 用系統內建的字型最快：手機、電腦本來就有中文字型，不用下載。
• 要用網頁字型的話：選有做「切分」的服務，只下載這一頁用到的字。
• 字型只載入需要的字重：用到兩種粗細，就不要把九種都載進來。

已經載入太多字型的 WordPress 網站，可以參考〈移除 WordPress 載入的 Google Fonts〉。

授權：電腦裡有，不代表網站可以用

這是最容易出問題的地方：

• 電腦或軟體附的字型：裝在你電腦裡的字型，授權通常只讓你在自己的電腦上用，不包含放到網站上給所有人下載。
• 「免費下載」的字型網站：很多字型下載站放的字型並沒有取得授權，下載得到不代表可以商用。
• 買字型時看清楚授權範圍：桌面印刷、網站、App、影片，常常是分開授權的。

想用免費又能商用的中文字型，思源黑體、jf open 粉圓這些開源字型可以放心用，整理在〈免費可商用圖庫、圖示、字型哪裡找？〉。字型侵權的風險在〈網站圖片和字型要有授權〉。

和品牌一起定

字型和品牌色一樣，最好網站、名片、DM、招牌都用同一套。定好之後寫下來，之後找人做設計時照著用。品牌色怎麼定，在〈品牌色怎麼定？〉。

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也服務台北和全台灣的客戶。想替網站換字型、或不確定現在用的字型能不能用，歡迎免費諮詢。