網頁字體設計完整指南：字型、字級、行距與中英文混排

字體如何影響網站第一印象

使用者通常先感受到字體的粗細、密度與留白，之後才真正讀進內容。黑體乾淨直接，適合企業、科技與服務網站；襯線字具有書刊與傳統氣質，適合少量品牌標題，但不應在沒有理由時大量混用。

一個網站以一套主要中文字體與一套英數字體為主即可。字體越多，載入成本與視覺噪音越高。喬絲朵目前的共用原則是以 Inter 搭配 Noto Sans TC、PingFang TC、Microsoft JhengHei，並使用 font-display: swap 避免字體載入時出現空白。

桌機 H1 建議控制在 36～48px，H2 為 28～32px，H3 為 22～26px，主要內文 16～18px。手機 H1 約 28～36px，內文維持 15～17px，不把桌機字級直接等比例縮小。

同一層級必須跨頁一致。首頁、服務頁與條款頁的 H1 應共享規格，不應因模板不同而忽大忽小。可使用 clamp() 建立有限度的流動字級，但必須設定合理的最小值與最大值。

中文筆畫密集，內文行高建議 1.6～1.8；標題可收緊到 1.2～1.4。段落之間以 CSS margin 控制，不用連續空行製造距離。

文字欄位也不能無限延伸。桌機文章內文建議控制在約 680～820px，讓視線換行距離自然；資訊表格與圖片則可使用較寬容器。這種寬窄交替能讓長文更容易閱讀。

中英文之間加入半形空白，英文與數字使用半形符號；中文句子維持全形標點。英文字體應排在中文字體之前，避免英文字母被中文黑體代替而顯得笨重。

中文內文通常不需要額外字距。英文小標可使用 0.02～0.05em，全大寫標籤可放寬至 0.05～0.1em，但中文標題不應套用負字距。

手機版需要重新檢查換行、按鈕高度與段落長度，而不是只確認畫面沒有溢出。內文字級不低於 15px，主要內容以 16px 為安全基準，互動文字也要保留足夠點擊區域。

上線前應檢查文字與背景對比、真實手機渲染、最長標題換行及字體載入狀態。好的排版不會搶走內容注意力，而是讓使用者自然地讀完並知道下一步要做什麼。

企業網站一定要使用網路字體嗎？

不一定。系統字體速度快且穩定；只有品牌確實需要特定字型時才載入 Web Font。

手機內文可以使用 14px 嗎？

輔助文字可以，但主要內文建議維持 15～17px，通常以 16px 最穩妥。

先整理需求、參考網站與現有素材，我們可以透過 LINE 或 E-mail 一起確認適合的方向。