把英文模板套上中文，問題通常不是字體醜，而是排版參數沒改：行高停在 1.5、欄寬沒有上限、中英數黏成一團、連續標點擠出空洞。這些換字體都救不了。2026 年瀏覽器陸續補上 text-spacing-trim、text-autospace、text-wrap 這些為東亞文字設計的屬性，繁中排版第一次能用 CSS 講清楚、也驗收得了。以下是一份可以直接貼進驗收單的規格。
先看幾個真實網站怎麼排
報導者 The Reporter 與 天下雜誌 的長文頁面是閱讀導向：行高偏鬆，正文欄寬壓得偏窄，單行大約三十幾個中文字，段落間的空白明顯大於行距，換段時有清楚的停頓點。
Apple 台灣官網則是混排示範。產品名稱、規格數字與中文說明交錯，標題字距收得偏緊、內文行高放得偏鬆，中文與英文、數字與單位之間都留有看得見的呼吸空間。
PChome 24h 與 momo 購物網相反：行高偏緊、標題常斷在奇怪的位置，用密度換掃讀速度。這不是做錯，是取捨。
反面示範常見於 Notion 中文介面與 GitHub 中文文件——版面原生為英文設計，中文套進去後行高偏緊、中英之間沒有間距；維基百科中文版在寬螢幕上的超長行也一樣。
為什麼中文需要不一樣的參數
中文是方塊字，詞與詞之間沒有空白。英文靠 word-space 提供天然的掃視停頓點，中文沒有，所以相同行高下中文密度更高，必須放鬆行距，行與行才分得開。
單行字數上限來自視線回掃（return sweep）：行太長，眼睛從行尾跳回下一行行首時容易對錯行，讀者被迫重讀。這是眼動行為，不是美感偏好。
中文也沒有 x-height 差異與上下伸部的起伏，整段接近一塊均勻灰磚，節奏只能靠段間距與小標建立。標點又各佔一個全形空間，連續標點會拉出空洞——這正是 W3C CLREQ（Requirements for Chinese Text Layout）詳細描述的問題。
技術成本與限制
text-spacing-trim 目前 Chrome 與 Safari 支援、Firefox 尚未跟上，還沒進入 Baseline，必須確保退化後仍可讀（見 MDN 文件）。text-autospace 自 Safari 18.4 起支援，其餘瀏覽器仍在開發（Chrome for Developers 有完整整理）。text-wrap: balance 支援較好，但多數實作只處理約六行以內。
工時上，完整規格加全站套用與跨瀏覽器驗證約 8–20 人時；要 token 化進設計系統並與 Figma 對齊約 24–40 人時。純 CSS 參數對檔案大小影響幾乎為零（不到 1KB），真正吃 LCP 的是字體檔——一個中文字重動輒 3–8MB，為了排版多載一組字重才是實際成本。排版不是排名因素，但可讀性影響停留時間與捲動深度；用 span 手動塞空白會污染純文字內容，AI 抓取時多出空白，優先用 CSS。
哪些網站值得下重本，哪些不用
| 值得投資 | 不必投資 |
|---|---|
| 媒體長文、知識庫、技術文件 | 電商列表與搜尋結果頁 |
| 法律、會計、顧問等專業服務 | 後台管理介面 |
| 品牌形象站與教育內容 | 儀表板與報表 |
| 閱讀時間長、需建立信任 | 密度優先，壓行高換掃讀 |
判斷方式很簡單：使用者是在「讀」還是在「找」。讀就給空間，找就給密度。
可驗收的排版規格
| 項目 | 建議值 |
|---|---|
| 內文行高 | 1.7–1.8 無單位值（例如 1.75），不沿用 1.5 |
| 標題行高 | 1.2–1.35 |
| 單行字數 | 30–40 字，約 max-width: 38em |
| 段間距 | 行距的 1.5 倍以上（1.75 對應 1.2em） |
| 中英數之間 | 約 0.25em，優先 text-autospace |
| 內文字級 | 桌機 17px 以上、行動 16px 以上 |
| 字距 | 內文 0 至 0.02em；標題 0.05em 以內 |
| 標點 | text-spacing-trim 處理連續標點空白 |
| 斷行 | line-break: strict 加 word-break: normal，標點不落行首 |
| 孤字 | 標題 text-wrap: balance、內文 pretty |
| 兩端對齊 | 可用但需配 pretty，否則靠左 |
| 粗體 | 避免假粗體，用真 700 字重或字級、色彩 |
怎麼套用到你的網站
- ☐ 量現況：DevTools 看 body 的 line-height 與 max-width，多數套版停在英文預設
- ☐ 建立四個變數：--lh-body: 1.75、--lh-heading: 1.3、--measure: 38em、--gap-para: 1.2em
- ☐ 只改一頁，與舊版並排對照後再全站推
- ☐ 漸進增強：加 text-spacing-trim、text-autospace、text-wrap，並在 Firefox 確認退化後仍可讀
- ☐ 混排空白優先靠 CSS，其次在 CMS 訂編輯規範，最後才考慮後端自動補空白
- ☐ 用最長的真實標題與段落驗收，不用 Lorem Ipsum
- ☐ 三個寬度都看過：375px、768px、1440px
常見錯誤 × 怎麼避開
- 沿用英文模板的 line-height: 1.5 → 內文改到 1.7–1.8。
- 幫內文加 letter-spacing: 0.1em 想顯得高級 → 中文本來等寬，加字距只會拖慢閱讀，留給標題或全大寫英文。
- 用 br 手動斷標題 → 換裝置就崩，改用 text-wrap: balance。
- 全站 text-align: justify → 中文會出現不規則字間，配 pretty 或靠左。
- 用假粗體撐層級 → 筆畫糊掉，改用真字重、字級或色彩。
延伸資源
- W3C CLREQ：中文排版需求的權威文件，行距、標點、避頭尾都有完整說明。
- MDN text-autospace 與 MDN text-wrap：語法與支援度。
- Chrome for Developers：四個新的 CSS 國際化功能：附實際範例，可直接給前端。
常見問題
行高 1.75 會不會太鬆，整頁變很長？
會變長，但捲動成本遠低於重讀成本。真要壓縮，先縮欄寬再降行高，別低於 1.5。
沒有 CMS 權限，可以只靠 CSS 處理中英混排嗎？
可以。Safari 已支援 text-autospace，其他瀏覽器只是暫時少了那 0.25em，不影響閱讀。
那字體要換嗎？
先把參數調對，多數擁擠感就消失了。只有需要真 700 字重時才必須換字體。
驗收要看什麼才算過？
三個寬度下標題無孤字、標點不落行首、單行不超過 40 字、段落之間看得出停頓。
想把排版規格寫進你的專案
ScriptWalker 同時做設計與開發，可以把上面的規格轉成你的設計系統變數，套進 Laravel、Vue/Nuxt 或 Flutter 專案，並附跨瀏覽器驗收清單。想知道你的網站差在哪，把網址寄給我們，我們回一份參數對照。
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p