打開新裝 WordPress 站，內文預設字級多落在 16px 左右，行高約 1.5，看似規矩——但讀久就浮現問題。中文字密度比英文高出許多，預設值是為拉丁字母調的，套到方塊字上會出現視覺壓迫感。

區塊編輯器（Block Editor，慣稱 Gutenberg）從 6.1 版納入流體字級機制，到 2026 年的 6.9 版又重做了計算曲線。換句話說，字型排版不再是改主題 CSS 那種手工做法，而是用 theme.json 一次定死規則，全站文章自動套用。

以下從中文閱讀特性出發，談主字與副字怎麼挑，談字級階層、行高、段距如何配搭，最後示範把這套規則寫進編輯器與 theme.json，讓編輯與作者不用每篇手動調整。

為什麼中文網站不能照搬英文排版預設

英文是字母拼成的字，字寬窄、有上下凸出的字母（如 g、p、h），自然在每一行製造視覺呼吸點。中文方塊字寬度幾乎一致，筆畫密度高，整段排下來像一面磚牆。

這也是為什麼直接套英文主題預設的 1.5 倍行高，中文讀起來會悶。台灣設計圈共識落在 1.7 至 1.9 倍，正文字級 17 至 18 像素，視螢幕與字型而定。思源黑體（Noto Sans TC）這類常見免費字型，字面本身偏大，預設行高又被原廠設高，主題若未覆寫，標題之間會空到讓人以為斷章。

另一個常被忽視的點是字重對比。英文字型動輒七、八個字重，思源黑體也有 ExtraLight 至 Heavy 七階，但網頁通常只挑 2 至 3 個字重以控制檔案大小。一篇文章的主標、副標、內文若只用 Regular 一個字重，等於放棄排版層級的最強訊號。

主字與副字怎麼挑才不互打

中文網站字型策略多半是「中文主字＋拉丁副字」雙軌制。中文字型負責方塊字，副字負責穿插在內文裡的英文單字、數字、代號。兩者分開挑，才能各自發揮。

中文主字優先考慮可讀字面與授權

挑中文主字時，先看授權再看可讀性。商業站台要避開只限個人使用的字型，否則改版麻煩。思源黑體走 SIL 開放授權，台灣本土的「台北黑體」「俊羽源黑體」「源樣明體」也都可商用，是預設首選。

可讀性判斷很直觀——把同一段文字鋪在實際版面上，瞇眼看是否還能辨認字形。字面太緊或筆畫過細，在亞洲螢幕標準觀看距離下會糊掉。思源黑體 Regular 在 16 至 18 像素表現穩定，更細的 Light 字重則慎用於長段落。

拉丁副字要與中文字面高度匹配

副字常見選擇是 Inter、Source Sans、Roboto 這類無襯線字型。挑選時要看 x-height（小寫字母高度）是否與中文字面相當——差太多會讓內文英文字看起來忽大忽小，像貼上去的。

操作上把副字寫在 CSS 字型堆疊前面、中文字型寫後面，瀏覽器先用副字渲染拉丁字母，遇中文自動 fallback。寫法如 font-family: "Inter", "Noto Sans TC", sans-serif，英文採用 Inter 較窄字寬，中文維持思源方正，兩者並陳不互搶。

標題字考慮反差但不要太花

標題與內文用同一字型族也行，靠字重與字級拉開層級，這是日系與北歐排版常見做法。要做更強反差，可在標題換成襯線體（如 Noto Serif TC、源樣明體）與黑體對照，但限定主標與大節，內文一律回黑體，避免一頁出現三種以上字型。

字級階層用模組化比例而不是隨手填數字

「H1 給 32、H2 給 24、H3 給 20」這種拍腦袋的做法，會讓階層視覺差距忽大忽小。穩妥作法是用模組化比例（Modular Scale）。

選一個基準字級（多半是內文 16 或 18 像素），再選一個比例係數（常見 1.2、1.25、1.333），把每一階用係數乘出來。內文 16px、係數 1.25 的話，H3 是 20px，H2 是 25px，H1 是 31.25px，往上是 39px，算出數字四捨五入到整數。

選好比例後一路套到 H1 至 H6 與輔助字級（標籤、註腳、按鈕文字），整個系統就有共同數學基礎，視覺自然和諧。內容導向部落格用 1.25 是穩妥起點，層級不夠分明再升到 1.333，不要在不同階層用不同係數拼湊。

行高、段距、字距三個容易被低估的設定

字級調好，行高、段距、字距沒跟著校，整篇還是讀起來累。這三項數值與英文預設差距最大，是中文排版必修課。

• 行高 1.7 至 1.9 倍：內文段落用此區間，每一行有充分空間；標題行高要收緊到 1.2 至 1.35 倍，避免兩行標題斷開
• 段距等於 1 行高：段與段間留出與一行文字相當的空白，視覺節奏才穩；常見錯誤只留半行，段落黏一起
• 字距 0 至 0.02em：中文不需明顯字距；輕微正字距（0.02em 左右）讓密集筆畫透氣，超 0.05em 反讓段落像散沙
• 段落最大寬度 32 至 38 個中文字：超過讀者眼球在行末需長距回掃，視線易跳行；換算約 600 至 720 像素，比英文建議短

這四個值互相關聯，行高放寬段距就要對應加大，否則段落間層級會消失。先定行高，再用「段距等於 1 行高」推段距，比較不會跑掉。

用 theme.json 把規則固定下來

前述所有數值，若靠區塊手動調，作者一多就會走樣。WordPress 6.0 以後的區塊主題把字型設定全集中在 theme.json，是現在最該掌握的工具。

settings.typography 開啟流體字級

在 theme.json 根層的 settings.typography 物件下，把 fluidTypography 或 fluid 設為 true，WordPress 就用 CSS clamp() 自動生成隨螢幕寬度縮放的字級。預設行為是各字級在最小視窗用最小值、最大視窗用最大值，中間線性插值。

WordPress 6.9 把流體字級的插值演算法換成更線性的曲線，視覺縮放比舊版的 0.852 倍平滑很多。主題若還停在 6.5 以前的演算法，建議升上去再校字級，否則手機與桌機視覺落差會比預期大。

settings.typography.fontSizes 註冊字級階層

在 fontSizes 陣列裡定義每一階，包含 slug（識別碼）、name（編輯器顯示名稱）、size（預設值）、fluid（流體最小最大值）。典型內容站台會註冊 small、medium、large、x-large、xx-large 五階，對應模組化比例算出的數值。

每階的 fluid 子物件可分別指定 min 與 max。例如內文預設 18px、流體區間 16 至 20px，標題 H2 預設 28px、流體區間 24 至 36px，手機讀者拿到的字級不會太小，桌機讀者也不被巨大標題壓迫。不填 fluid 的字級，6.9 版會依全域設定自動補區間，但建議手動標清楚比較好維護。

styles.typography 套用全域樣式

fontSizes 註冊的是可選清單，要實際綁到內文與標題，得在 styles.typography 與 styles.elements.h1 至 h6 裡指定 fontSize、lineHeight、fontFamily。

行高在這用無單位數值寫（如 1.8），不要寫 28px，否則字級流體縮放時行高不跟著動。中文字距用 letterSpacing: "0.02em" 補透氣感即可。styles.spacing.blockGap 控制段與段間距離，記得校到約等於 1 行高的數值。

settings.typography.fontFamilies 統一字型來源

把中文主字與拉丁副字寫進 fontFamilies 陣列，每筆指定 fontFamily（CSS 字型堆疊）、name、slug。需從 Google Fonts 或自架字型載入的，搭配 fontFace 子陣列宣告 src 來源、字重、字風。

Google Fonts 在歐盟與部分隱私法規下不建議直連，務實做法是把字型檔下載到主機本地，再用 fontFace.src 指到本地路徑，讀者載入時不會把 IP 傳到第三方。思源黑體因檔案龐大（單字重動輒幾 MB），通常只載 Regular 與 Bold 兩個字重，並用 font-display: swap 讓內容先以 fallback 字型顯示。

區塊編輯器端怎麼讓作者不能亂改

設定好 theme.json 後，下一步是壓制編輯器內的自由度。預設下每個區塊都能個別調字級、字色、字重，作者一多就出現五花八門的版型。

簡單做法是在 settings.typography 把 customFontSize、fontStyle、fontWeight、letterSpacing、lineHeight、textDecoration 全設為 false，編輯器對應控件就消失。作者只能從預先註冊的 fontSizes 清單挑值，不會出現有人填 19px、有人填 21px 的混亂。

要再嚴格，可在 settings.typography.fontFamilies 只留一兩組，作者連字型族都不能換。標題層級則靠網站編輯器（Site Editor）的範本部件鎖死，文章區塊範本（Block Pattern）預先寫好結構，作者新增文章時直接套用，把每篇骨架統一。

這套做法的取捨在於彈性。個人部落格、作者只有自己，留彈性沒問題；多人協作或交給客戶接手的站，越早把規則寫死越省事，後期才不用一篇篇手動修。把 theme.json 當排版設定檔，把編輯器當填空題介面，作者只負責填字、不負責調版，全站閱讀體驗才會穩定。