打開一個剛裝好的 WordPress 站，內文預設字級多半落在 16px 左右，行高大約 1.5，看起來規矩，但讀久就有問題。中文字密度比英文高出一截，預設值是給拉丁字母調的，套到方塊字上會出現黏成一團的視覺壓力。

WordPress 區塊編輯器（Block Editor，慣稱 Gutenberg）從 6.1 把流體字級寫進核心後，到 2026 年的 6.9 版又把計算曲線重做了一次。換句話說，wordpress 字型排版這件事不再是改主題 CSS 那種繞遠路的做法，而是用 theme.json 把規則一次定死，全站文章自動套用。

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

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

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

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

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

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

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

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

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

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

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

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

操作上把副字寫在 CSS 字型堆疊（font-stack）前面、中文字型寫在後面，瀏覽器會先用副字渲染拉丁字母，遇到中文再自動 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 像素，比英文建議的 65 至 75 字元短

這四個值之間不獨立，行高放寬了段距就要對應加大，否則段落間的層級會消失。先定行高，再用「段距等於 1 行高」的關係式去推段距，比較不會跑掉。

用 theme.json 把規則固定下來

前面講的所有數值，如果靠每個區塊手動調，作者一多就會走樣。WordPress 6.0 以後的區塊主題（Block Theme）把字型相關設定全部集中在 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 當成排版的設定檔，把區塊編輯器當成填空題的介面，作者只負責填字、不負責調版，全站的閱讀體驗才會穩定下來。