設計實務

電商網站的字體實務：中文字型選用、層級與授權須知

2026年4月28日・ViewInternet 編輯部

字體是電商設計裡存在感最低、影響面最廣的元素：整個網站九成的面積是文字，字體的選用與設定決定了「這個站看起來專不專業」的第一印象。中文字體又比西文多了兩道難題——檔案巨大與授權複雜。這篇把電商站的字體實務一次講清楚。

第一個決定：系統字還是 Webfont

系統字堆疊（蘋果的蘋方、微軟的微軟正黑、Android 的思源黑體）的優點是零載入成本——速度就是轉換率，這對電商是重量級優勢；缺點是各平台長相略有差異。Webfont（引入特定字型檔）品牌一致性好，但中文字型檔動輒數 MB，就算子集化（只打包用到的字）也仍有成本。務實建議：內文用系統字堆疊，品牌感交給標題與視覺——真的需要 Webfont 時，只給標題層級用、務必子集化與延遲載入，內文永遠跑系統字。多數電商站根本不需要為內文付出 Webfont 的速度代價。

字級層級：一套尺寸系統，全站遵守

字體混亂的站通常不是字型醜，是「每頁字級都不一樣」。解法是定義一套層級並全站執行：例如 H1（頁面主標）、H2（區塊標題）、內文、輔助說明、註腳共五級，每級固定字級、字重與行高。兩個電商特有的層級要特別定義：價格（通常介於標題與內文之間、字重加粗、可用品牌色）與按鈕文字（尺寸與字重固定，全站按鈕才有一致的份量感）。層級表寫進設計規範，之後不管誰接手，站的秩序感都在。

可讀性的三個參數：行高、行長、對比

中文內文的舒適設定有據可循：行高抓字級的 1.6 到 1.8 倍（中文字方塊密度高，行高比西文要多留）、行長每行 25 到 35 個中文字（太長讀到行尾找不到下一行的頭，商品描述區要限制最大寬度）、對比——內文別用淺灰（#999 以下的灰在手機亮度下就是災難），正文至少深灰 #333 起跳，無障礙對比標準 4.5:1 不只是規範，是真實的可讀性底線。年齡層偏高的客群（保健、居家品類），字級與對比都再上調一級。

商用授權：最容易踩雷的一段

中文字型的授權地雷比想像多：「免費下載」不等於「免費商用」——個人使用免費、商用要授權的字型一大堆，電商網站與廣告素材都是商用場景；開源字型是安全牌——思源黑體、思源宋體及其衍生字型（授權允許商用、可嵌入網頁），品質足以應付絕大多數電商需求；設計外包的字型責任——外包設計交來的素材用了未授權字型，法律責任常落在使用方（你）身上，驗收時把「字型授權清單」列入交付要求。曾有不少台灣電商收過字型公司的授權警告函，補授權的價格遠高於一開始就用對。

促銷字風格的節制

電商特有的誘惑是「促銷字效」：爆炸貼、斜體、描邊、漸層、七彩。原則只有一條：促銷的強調靠層級與色彩，不靠特效堆疊——一個放大加粗的「5 折」配上乾淨的版面，比五種特效疊在一起更有力。整站到處都在大叫的時候，等於沒有任何地方是重點。

快速自檢

打開你的網站問四題：內文在手機上讀起來吃力嗎？價格一眼就能找到嗎？全站的標題長得一致嗎？用的字型確定有商用授權嗎？四題有任何遲疑，字體這一課就值得補。

ViewInternet 的品牌視覺服務含字體系統的定義與規範文件，賣場裝修會把字級層級直接落實到版型。想讓網站看起來「就是專業」？加 LINE 聊聊。