網路架站

中文網站排版怎麼調?行高比字距更該先處理

多數人一想到「幫中文網站做排版優化」,第一個念頭通常是字距——把字排開一點,留出呼吸空間,看起來比較有質感。但真正該優先動手的其實不是字距,而是行高。不少網站從來沒有真正為中文調整過這個數值,套用的還是瀏覽器與前端框架替拉丁字母訂出來的舒適值。

中文是方塊字,筆畫密度、視覺重量都跟拉丁字母不一樣,直接沿用同一套行高,讀起來就是比原生為中文設計的頁面擁擠。多數人調整排版時,注意力多半放在字體、顏色這些看得到的元素,很少回頭檢查行高目前的實際計算值是多少,這一步沒處理好,後面再怎麼調字級、調字距,讀起來還是卡頓。

行高該落在哪個區間,為什麼排序要比字距、字級都優先,先從這個落差有多大講起。

中文網頁排版四個變數的優先序:行高 1.5 到 1.8 倍排第一,接著才是字級與字重、字距、斷行與標點
先把行高抓進字級的 1.5 到 1.8 倍,字級、字距、斷行才輪得到談。

中文網站的行高預設值其實是英文的舒適值

CSS 規格裡的 line-height: normal,本來就是替拉丁文字訂出來的一套折衷值。桌面瀏覽器(含 Firefox)在什麼都不手動設定的情況下,實際套用的行高大約落在字級的 1.2 倍左右,依字型而略有差異。也就是說,一段完全沒動過行高的中文段落,字與字之間的垂直留白,最高也只到字級的 1.2 倍,這個數字是替拉丁字母的閱讀節奏抓的,不是替方塊字抓的。

就算網站用的是主流開源前端框架、行高有被明確寫死,落點依然偏低。Bootstrap 3 的內文行高變數預設是 1.428(以 14px 字級為基準換算出 20px 的行高);到了 Bootstrap 4、5,這個數字才調整為 1.5。1.5 已經是主流框架裡偏高的設定,但對中文來說仍然只是卡在建議區間的下緣,完全沒有餘裕。

這個落差長期沒被注意到,不是因為沒有人研究過中文排版的特殊需求。W3C 的《中文排版需求》這份正式標準文件,就明確定義了行高、行首行尾禁則、孤行孤字、行尾點號懸掛這些拉丁文字完全不需要處理的規則。這份文件本身的存在,就是「中文不能直接沿用西文排版慣例」最直接的佐證。只是多數人排版時,想到的還是字體跟顏色,很少回頭查行高的計算值。

瀏覽器預設約 1.2、Bootstrap 3 為 1.428、Bootstrap 4/5 為 1.5,全都落在中文建議行高 1.5 到 1.8 倍之下
常見的預設行高多是替拉丁字母抓的舒適值,全都低於中文建議的 1.5 到 1.8 倍。

行高才是中文排版該優先處理的第一件事

面對有限的時間和精力,行高是所有排版變數裡投報率最高的一項。具體的建議區間,是把中文內文行高設定在字級的 1.5 到 1.8 倍之間;文字密度特別高的長文,可以再往上抓到接近 2.0,但超過這個範圍反而會讓行距顯得鬆散,削弱段落原本的視覺結構。

1.5 倍不是某種中文排版偏好,而是有國際依據的可讀性基準線。W3C 網頁無障礙標準 WCAG 2.1 的成功準則 1.4.12(文字間距)明文要求,使用者把行高調整到至少字級的 1.5 倍時,網頁內容不能破版、不能遺失。這代表 1.5 倍已經是拉丁文字都要守住的底線,中文因為字形密度更高,建議值只會落在這條線之上,不會更低。

國際字型鑄造廠 Typotheque 針對 CJK(中日韓)文字排版的說明也指向同一個方向。拉丁文字預設的行距多落在字級的 120% 上下,但 CJK 文字因為單一字符本身的資訊密度較高,建議把行高抓在字級的 170% 左右,才能同時兼顧可讀性與版面的視覺平衡,換算成 CSS 寫法就是 line-height: 1.7

同一段中文只把 line-height 從 1.2 改成 1.7 倍,右欄行距明顯變寬,整段閱讀空間比左欄寬鬆許多
字級與文字完全相同,行高從 1.2 改到 1.7 倍,一整段的閱讀餘裕就明顯不同。

這一步之所以該排第一,理由不只是數字本身,還有改動的風險。調整行高只需要改一個 CSS 數值,不會動到版面寬度,不需要重新挑字體,也幾乎不會跟既有設計稿的視覺結構衝突,是所有排版變數裡最容易獨立測試、最不容易連動出錯的一項。

加寬字距看似優雅,其實是排版陷阱

不少人覺得把中文字排得鬆一點比較有質感,讓版面多一點呼吸空間,於是往 letter-spacing 加值。但這個做法在排版規範裡其實是該避免、而不是該優化的項目,中文字沒有拉丁文字那種靠字距做視覺調校的傳統。

拉丁字母寬窄不一,字距本來就需要微調才能排得整齊;中文字是方塊結構,本身就是等寬等距排列。W3C《中文排版需求》正式定義了「密排」(字與字之間不額外加間距的預設排列方式)與「緊排」(刻意壓縮字距)這兩個對照概念,說明「不調字距」本來就是中文排版的預設狀態,加字距是需要特定理由才會用的例外做法,不是常態的優化選項。

CSS letter-spacing 的官方文件裡,也沒有像 line-heightword-break 那樣針對 CJK 文字給出對應的專屬參數(word-break 甚至有專門為 CJK 設計的 keep-all 值)。這說明在整套 CSS 排版屬性裡,字距從來不是一個需要為中文校準的變數。

而且硬加字距要付出代價。拉丁文字靠空格分詞,字距的細微調整不太會影響斷詞判讀;中文字沒有這層保護,換行的位置本來就得靠行高與標點節奏來標示。字距一旦加寬,這個既有的視覺節奏就會被打亂,通常還得連帶放大行高才能維持可讀性,等於用兩個變數去解決一個變數就能處理好的問題。真正想要的呼吸感,該調整的是行距與段落間距,不是字距。

字級與粗細決定閱讀門檻,排序仍在行高之後

字級(font-size)與字重(font-weight)確實有一個不能低於的底線,但排序仍然在行高之後。WCAG 2.1 的成功準則 1.4.4(文字縮放)要求,使用者把頁面文字放大到 200% 時,內容不能破版、不能遺失、功能也不能失效。這條標準隱含一個做法:字級該用 remem 這類相對單位設定,而不是寫死的 px,否則使用者調整字級時很容易撞到版面。

中文字體多為等寬的方塊結構,標題與內文之間缺乏拉丁文字那種因字型家族差異(serif 與 sans-serif)帶來的天然視覺區隔。這也是為什麼不少中文網站的標題從 H1 排到 H6,字級依序縮小,讀起來卻還是分不出層次,少了搭配的字重差異,光靠放大字級撐不出視覺階層。中文標題比拉丁文字更依賴粗細對比,才能真正建立起層次感。

但這一項排在行高之後,是有明確理由的。調整行高只需要改一個 CSS 數值,不會動到任何既有版面;要重新校準字級與字重的階層,通常得連帶檢查整份設計系統裡其他元件,按鈕、表單標籤、卡片標題的字級是不是也該一起調,改動範圍與成本都明顯比行高高。

斷行與標點禁則多半該交給瀏覽器處理

不少人擔心中文排版裡標點跑到行首行尾、詞組被硬生生切斷,這類問題聽起來需要人工介入,實際上多半是瀏覽器與作業系統層級早就該處理好的規則,不是需要逐一調整的日常維運項目。

版位不夠、文字溢出時,word-break: break-all 是常見的急救做法,它能解決溢出,代價卻是連帶打斷標點禁則,讓逗號、句號這類原本不該出現在行首的符號被推到下一行行首。CSS 官方為 CJK 文字另外提供了對應的屬性。word-break: keep-all 讓中日韓文字不會被強制從任意字元之間斷開,維持一般的自然斷行邏輯;另一個 line-break 屬性可以設為 autoloosenormalstrictanywhere,專門用來控制 CJK 標點符號與斷行的鬆緊程度。瀏覽器層級本來就有處理標點禁則的機制,不需要網站經營者手動逐字調整。

W3C《中文排版需求》正式把行首行尾禁則、行尾點號懸掛、孤行孤字等列為中文排版的標準需求項目,說明這些規則屬於排版系統該內建處理的規格層級問題,不是個別網站要手動修正的日常項目。真正常見、值得人工抽查的例外情境,是中文段落裡混排較長的英文單字或網址,若同時使用兩端對齊,瀏覽器可能為了維持左右對齊而強制拉寬那一行的字距,讓局部字距看起來異常鬆散。這種邊界情況才需要人工檢查,而不是整套斷行規則。

從行高開始逐一檢查,比一次全部重排更務實

不必找一整塊時間把網站重新排版一次,照著前面建立的優先序,一項一項確認就夠。第一步是找到瀏覽器內建的開發者工具,打開任一段落的「運算後樣式」(Computed)分頁,就能直接看到目前套用在這段文字上的實際 line-height 數值,CSS 原始碼寫的可能是 1.5 這種相對值,這裡會顯示換算後對應到目前字級的實際像素值。這是確認網站現在套用了多少行高最直接的方法,不必翻遍整份 CSS 檔案去猜。

檢查順序直接呼應前面建立的優先序:先確認行高是否落在字級的 1.5 到 1.8 倍之間,這一步風險最低、效果最大;接著看字級與字重的階層是否清楚,標題有沒有搭配足夠的粗細對比;再檢查有沒有誤加的字距,該拿掉的拿掉;斷行與標點交給 word-breakline-break 處理,只在中英文混排的段落抽查即可,不必逐字檢視。

中文排版真正缺的往往不是更多裝飾性的調整,而是把行高這一個最基礎的數值,從英文的舒適值搬回中文自己的區間。這一步做完,字距、字級、斷行才有意義可談;順序顛倒過來,做再多都補不回那個被壓縮掉的閱讀空間。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

中文網站的行高該設定在字級的幾倍?

建議把中文內文行高設定在字級的 1.5 到 1.8 倍之間,文字密度特別高的長文可以再往上抓到接近 2.0,但超過這個範圍反而會讓行距顯得鬆散,削弱段落原本的視覺結構。

瀏覽器預設的行高夠不夠中文閱讀?

不太夠,瀏覽器在什麼都不設定的情況下,實際套用的行高大約只落在字級的 1.2 倍左右,這是替拉丁字母的閱讀節奏抓的舒適值,對筆畫密度更高的中文方塊字來說明顯偏擠,需要另外調整。

中文排版適合加寬字距嗎?

不適合,中文字是方塊結構、本身就是等寬等距排列,不像拉丁字母需要靠字距微調才能排整齊;硬加字距還會打亂靠行高與標點節奏標示的換行邏輯,通常得連帶放大行高才能維持可讀性。

中文標題字級調整,為什麼排在行高之後?

因為調整行高只需要改一個 CSS 數值、不會動到既有版面,但要重新校準字級與字重的階層,通常得連帶檢查整份設計系統裡按鈕、表單標籤、卡片標題的字級是否也該一起調整,改動範圍與成本明顯更高。

中文段落的標點禁則需要自己手動調整嗎?

多半不用,行首行尾禁則、孤行孤字這類規則多半是瀏覽器與作業系統層級該處理好的規格問題,CSS 也提供對應屬性讓 CJK 文字維持自然斷行;真正值得人工抽查的,只有中英文混排又兩端對齊時字距被拉寬的情況。

資料來源
  1. Requirements for Chinese Text Layout(中文排版需求) — W3C
  2. Understanding Success Criterion 1.4.12: Text Spacing — WCAG 2.1
  3. Understanding Success Criterion 1.4.4: Resize Text — WCAG 2.1
  4. Typesetting principles of Chinese, Japanese, and Korean (CJK) text — Typotheque
  5. Bootstrap Reboot — base typography styles — Bootstrap