9 個排版設計技巧：字體、行距到視覺層次指南
用九個面向檢查網頁排版：字型、字級、行距、欄寬、層級、留白、對比、手機與字型載入，分清設計起點和 WCAG 要求。
你是不是也這樣：打開自己網站，說不上哪裡醜，就是覺得「哪裡怪怪的」。字好像有點擠、行好像有點窄、標題好像沒有比正文更有存在感，但你又指不出一個明確的錯。於是你打開佈景主題的設定頁，把字級調大一級、把行距拉開一點、換一個看起來比較有設計感的字體，存檔，重新整理，看起來好像好一些，但其實你也說不清楚為什麼變好，更不知道下禮拜會不會又看不順眼。
我接下來要給你的，不是九個零碎的排版小訣竅，而是一套可以重複套用的排版判斷系統。我會把字體選擇、字級比例、行距、欄寬、視覺層次、留白、對齊對比、手機校準、載入效能這九個面向，一個一個拆成可以量化、可以檢查的判斷條件。讀完之後，你應該要能回答兩個問題：我的版面現在究竟哪一個環節出問題，以及下一步該調哪一個變數。如果你想要的是更宏觀的版面配置邏輯，可以先看網頁版面設計完全攻略，那篇談的是骨架，這篇談的是骨頭上面的肉怎麼長。
重點摘述：排版的好壞不只看單一字體，也要看整套系統。許多「看起來怪怪的」版面，問題出在字級、行距、欄寬與留白各自為政，缺少共同節奏。接下來九個技巧可以當成檢查流程，依序找出版面問題；實際改善幅度仍取決於原始設計與內容。
排版為什麼常常「看起來怪怪的」：系統缺位的四個症狀
以內容站來說，這類網站最常見的通病只有一個：排版沒有統一系統。每篇文章由不同作者、不同時期套用各自習慣的字級與留白，A 作者喜歡 18px 正文，B 作者習慣 16px，C 作者把標題設成 28px，D 作者設成 36px。單看每一篇都還過得去，把十篇擺在一起，整個網站就像一間每面牆都交給不同設計師各自裝潢的房子，走進去就是說不出的不舒服。整理舊文時，可以照單篇文章的排版體檢逐篇走過一輪，先把每一篇拉回同一套標準。
樣式不一致值得檢查，但不能單憑字級數量或某個間距就判定設計失敗。先看各樣式是否有明確角色，以及讀者能否理解與操作，再決定哪些應共用、哪些需要不同設定。
- 字級是否有清楚角色，避免相同用途卻任意設定不同值；沒有全站最多十個字級的標準。
- 行距是否配合字型、欄寬與用途，標題、正文和側欄不必完全相同。
- 間距是否有可說明的規則，也保留內容與元件需要的例外。
- 標題與正文是否可辨識，並以語意標記、字重與間距共同表達層級。
排版系統的四個底層變數
字級、行距、欄寬與留白是四個方便一起檢查的變數，字型、對比與內容也會影響結果。共用比例可方便維護，但不能由數學一致推定一定好讀。
這個觀念先建立起來，接下來的技巧才不會變成「頭痛醫頭」的零碎調整。你會發現，當字級有了一套比例尺，行距和留白就跟著能推導出來，這就是系統的力量。
技巧 1：字體選擇從「角色分工」開始，不是從「好看」開始
很多人挑字體的方式是打開字體網站，看到一個喜歡的就載下來用，然後過幾天又換一個。這種做法的問題在於，你把字體當成裝飾品，可是字體在版面上扮演的是「角色」。一齣戲不會每一個角色都找長相最帥的演員來演，排版也是，每一個字體位置都有它該承擔的工作。分配角色之前，先把你欣賞的網站用了哪些字體查清楚，交給字體辨識工具把名稱、字級與行距一併抄下來，比憑印象回憶可靠。
先區分標題、正文與特殊資訊
可先從標題、正文與特殊資訊三種角色規劃，同一字型也能用不同字重完成。這是整理方法，不是字型或角色數量的硬上限。
左右捲動檢視完整表格
| 角色 | 工作內容 | 挑選標準 |
|---|---|---|
| 標題字（Display） | 大標題、Hero 區、章節名 | 適合短標題，仍需辨識清楚並能容納長標題 |
| 正文字（Body） | 內文、段落、列表 | 以實際語言、字級與長文測試可讀性 |
| 強調字（Accent，可選） | 數字、引文、標籤、價格 | 等寬或特色字體，用來製造對比與節奏 |
標題可以有個性，但仍要辨識清楚；正文需用實際內容、螢幕與縮放測試。黑體與明體都可能適用，不能只看字型分類就決定可讀性或疲勞程度。 延伸可參考中文字體設計指南、英文字體推薦。
中英混排的兩條潛規則
中英混排需一起看漢字字面、拉丁字母 x-height、基線、筆畫與標點。x-height 描述拉丁小寫字母高度，不能直接當作中文字高；英文也不必一律收緊字距，應按字型與語言實測。
可先測試字庫已包含的中西文字形，再評估是否另配拉丁字型。名稱相近或來自同一系列，不保證混排比例完全合適；核對實際字形、fallback、授權與版本。
技巧 2：用比例尺整理字級，再按內容校正
症狀一「字級尺寸太多」的解法，是導入模數比例尺（modular scale）。觀念很簡單：你先訂一個基準字級（通常是正文，例如 16px），再訂一個固定的倍率（例如 1.25），然後所有字級都從這個基準乘以倍率的幾次方得出來。這樣一來，你全站的字級只會出現在幾個固定的階梯上，不會再冒出任何「憑感覺」的數字。
比例尺能減少零散設定並方便溝通，但視覺是否合適仍取決於實際字型、內容和螢幕。必要時可以調整個別角色，不必為維持數學比例犧牲閱讀。
左右捲動檢視完整表格
| 比例名稱 | 倍率 | 可試用的方向（非固定分類） |
|---|---|---|
| 小三度（Minor Third） | 1.200 | 內容密度高的長文站、文件站、部落格 |
| 大三度（Major Third） | 1.250 | 一般企業站、服務頁、購物網站 |
| 完全四度（Perfect Fourth） | 1.333 | 內容與視覺並重的媒體站、雜誌風 |
| 增四度（Augmented Fourth） | 1.414 | 作品集、設計感重的形象站 |
| 完全五度（Perfect Fifth） | 1.500 | 強對比、文字量少的活動頁、登入頁 |
| 黃金比例（Golden Ratio） | 1.618 | 戲劇化層級、需要單一視覺焦點的 Hero 區 |
例如以 16px 為基準、1.25 為倍率，向上約為 20、25、31.25、39.06、48.83px，向下一階是 12.8px。這是比例計算範例，不代表 H1 必須 39px 或輔助字必須 13px；應另外驗證小字可讀性、長標題和放大文字。
較小倍率可以讓密集介面有細緻層級，較大倍率可測試較強對比，但不按網站類型固定配對。設計檔應以文字樣式或變數記錄字級；Layout Grid 主要處理位置與對齊，不能代替文字樣式。 延伸可參考設計稿裡的 Layout Grid。
技巧 3：行距與欄寬綁在一起設定，一行字數才是關鍵
絕大多數人設定行距的方式，是直接在 CSS 裡寫一個 line-height: 1.6 或 1.8，然後就不管了。問題是，行距的最佳值跟一行有幾個字高度相關，而一行有幾個字又跟欄寬綁在一起。這三個變數是連動的，把它們分開設定，幾乎一定會踩到其中一個極端。
排版經典裡常被引用的一行字數區間是 45 到 75 個字元（拉丁字母為主）。中文可先用每行約 28 到 40 字作為桌面版測試起點，再依字體、字級、裝置與讀者實測調整。行長過短會提高換行頻率，過長則可能讓視線較難找到下一行起點；這是可讀性檢查用的經驗範圍，不是硬性標準。
行距需和字型、欄寬、字級一起試讀，沒有「窄欄一定放大、寬欄一定縮小」的通則。過密可能難以換行，過鬆也可能分散段落；以代表性內容與不同寬度比較，再測試使用者調整文字間距是否仍可用。
可以先選可讀的正文字級與可用欄寬，再調行距，之後反覆校正。這些變數需要共同測試，沒有不可顛倒的設定順序。
垂直韻律可用共用間距與行高協助對齊，24px 只是示例。網頁會隨字型、內容與縮放變動，不應強迫圖片或段落高度都為同一倍數；優先保留完整內容與可調整性。
技巧 4：視覺層次靠「落差」，不靠裝飾
症狀四「層級落差不夠」是內容站最普遍的問題。很多網站的標題跟正文比起來，只是稍微大一點、稍微粗一點，讀者用「掃」的方式看過去，根本感受不到層級，於是整頁看起來像一塊均勻的灰色方塊。視覺層次的本質是落差，落差要夠大，讀者的眼睛才會被牽著走。
眯眼或模糊預覽可幫忙檢查整體層級，但只是輔助。還要直接閱讀、檢查語意標題和對比，並在縮放及窄螢幕下驗證；不能由這項測試單獨判定可讀或無障礙。
層級落差要做出來，靠的是三個工具的組合，不是單靠其中一個。第一是字級跳躍，相鄰層級要有肉眼可辨的差異，但不必硬套 1.5 倍；內容密集的介面通常會用較小比例，再搭配字重與留白。第二是字重對比，例如標題用 700、正文用 400，但仍要看字型實際提供的字重。第三是間距對比，標題上方留比較大的空間、下方留比較小的空間，用留白把標題跟它帶領的段落綁成一組。
顏色可以協助層級，但不應成為唯一資訊線索。字重、大小、位置與語意標記可共同表達結構；實際配色數量沒有固定標準。
技巧 5：把留白當成主動元件，不是剩下的空氣
留白大概是排版裡最被低估的元素。多數人把它理解為「沒有放東西的剩餘空間」，於是只要還塞得下，就想辦法再塞一個區塊進去。留白其實是版面上最有生產力的主動元件，它做三件事：分群、呼吸、引導視線。少掉這三個功能，你的版面就會從「好讀」退化成「資訊海」。
留白可以分成兩個層次，兩個都要顧。第一個是巨觀留白（macro whitespace），指的是區塊與區塊之間的距離，例如標題列跟內文區之間、文章跟側邊欄之間、頁首跟第一個區塊之間。巨觀留白決定讀者怎麼「分群」：距離夠遠，讀者會把兩個區塊理解成獨立的單元；距離太近，讀者會把它們看成同一坨。第二個是微觀留白（micro whitespace），指的是字裡行間、段落內部、表單欄位之間的距離，它決定連續閱讀的舒適度。
可建立共用的間距尺度，例如 4px 或 8px 為基礎，再依元件調整。這是設計系統選擇，不是所有間距都必須為 8 的倍數；邊框、字型與可觸控範圍也要一起處理。
可比較不同留白版本，觀察分群、可讀性與操作是否改變。把間距減半是一種草稿測試，不能由一次比較就斷定原本留白毫無用途。
相關內容較近、不同區塊較遠，可以協助分組；邊框、背景、標題與佈局也會共同作用。32px 和 16px 等數字只適合當示例，不是只要區塊距離大於段落距離就一定理解正確。
技巧 6：對齊、對比、顏色這三條紀律
排版的細節裡，有三個動作最常被誤用，一旦誤用，前面所有系統都會破功。這三條紀律不複雜，但它們是版面的基本衛生，違反任何一條都會讓讀者產生「這站不太專業」的直覺，即使他說不出具體原因。
第一條，長篇正文優先左對齊，謹慎使用強制兩端對齊。兩端對齊若缺乏良好的斷詞與標點處理，可能產生不均勻的字間空白，形成垂直的「白色河流」，阻礙閱讀。標題、引文、數字表格可以依內容置中或靠右；連續閱讀的正文，左對齊通常是較穩妥的起點。
第二條，文字與背景的對比要達到 WCAG 標準。WCAG 2.1 的 AA 等級要求正文文字與背景的對比比至少 4.5:1，大字（18pt 以上或 14pt 粗體）至少 3:1，這些門檻出自 W3C 的 WCAG 2.1 Contrast (Minimum) 準則。很多網站為了「質感」喜歡用淺灰字配白底，對比比常常只有 2 出頭，在年輕人的亮螢幕上還勉強能看，在較舊的螢幕或強光環境下根本看不見。對比檢查有免費線上工具，把你前景與背景的色碼丟進去就能算出比值，這個動作花不到三十秒，卻能擋掉一大類可讀性問題。更系統化的色彩觀念，可以搭配色彩學完整指南一起看。
顏色可參與層級與強調，仍需有其他辨識線索，並測試文字、連結及狀態。不要只以兩三個顏色或四五個顏色判定版面好壞。
技巧 7：中英混排與字距微調的細節
技巧 1 談過中英混排的宏觀問題（字體配對），這裡談微觀的字距。中文字與字之間、英文單字與單字之間、中英文交界處，這三種間距各有不同的處理邏輯，處理不好就會出現「看起來沒事但讀起來卡卡的」那種微妙的不舒服。
中英文的字距可先使用字型預設，再依語言、字形、字級與實際閱讀效果調整。中文標題或英文大寫標題都可能受益於適度調整，但沒有共用的 0.05em 到 0.1em 必要範圍，仍要檢查窄螢幕換行及使用者覆寫間距。
中西文交界的間距可由內容與 CSS 一起管理。text-autospace能控制部分自動間距，但實際支援與預設行為需在目標瀏覽器確認；不要預設所有環境都會自動排出相同結果，也要檢查換行與複製文字。
字型支援時，font-variant-numeric: tabular-nums 可使用等寬數字，方便比較；但它不會自動讓不同位數或小數點對齊。仍需配置欄位、文字對齊及格式，並核對字庫實際提供的 OpenType 功能。詳見數字字形設定。
中文排版還有一個容易被忘記的細節，是標點符號的佔位。中文習慣用全形標點，每一個標點佔一個字寬，在段落邊緣會出現標點把字推開的視覺缺口。進階的排版引擎有標點擠壓（punctuation kerning）功能，能把連續標點、或落在行首行尾的標點的多餘空白壓縮掉，讓文字塊的左右邊緣更整齊。一般網站不一定要做到這個程度，但至少要避免一個常見失誤：中英文標點混用。同一句話裡出現半形逗號配全形句號，或用英文括號包住中文，視覺上會立刻產生不協調感，這是比字體選擇更基礎的衛生問題，改起來成本極低，放著不管卻會讓整段文字看起來廉價。
技巧 8：手機版是另一個版面，桌面規則要全部重校
手機與桌機可以共用排版規則，再按可用寬度、內容及操作需求調整；不是每個值都一定要不同。重點是驗證窄螢幕與放大後仍完整可讀。
本站的手機佔比需要看自己的資料，全球統計不能直接當作讀者組成。無論佔比多寡，仍應測試手機內容、縮放與操作，找出實際障礙。
手機版的調整方向有幾個重點。正文字級可先以 16px 到 18px 測試，不必預設一定大於桌面；行距、行長與留白也要配合實際字體和螢幕寬度重校。窄螢幕常需要更短的行長與更清楚的區塊間距，但表格裡的數值都應視為起始範圍，再以真機閱讀與無障礙測試確認。
左右捲動檢視完整表格
| 項目 | 可作起點的設定 | 需要驗證 |
|---|---|---|
| 正文字級 | 例如 16 至 18 CSS px，不按裝置強制加大 | 字型、閱讀距離、使用者縮放及偏好 |
| 行高 | 例如 1.5 至 1.8，依內容校正 | 長行、短行及文字間距調整後是否裁切 |
| 行長 | 桌面中文 28 至 40 字可作試讀範圍 | 字型、標點、語言與可用寬度，非合格門檻 |
| 留白 | 以共用尺度開始，再按內容調整 | 分群、可觸控區與過度捲動 |
| 層級 | 用字級、字重及間距共同表達 | 語意結構與長標題，不固定倍率 |
手機排版還有一個關鍵是觸控目標。44×44 CSS px 是常見的實務目標；WCAG 2.2 的 AA 最低要求為 24×24 CSS px，或符合間距等例外條件。按鈕、連結與可點擊圖示仍應盡量保留較寬裕的點擊範圍，並拉開間距避免誤觸。這雖然屬於互動設計，但會直接影響排版留白。CTA 按鈕的尺寸、位置與留白可延伸參考CTA 行動呼籲按鈕設計指南。
手機版還有一個觀念上的轉換：桌面上你習慣的多欄佈局，到手機上幾乎都要變成單欄。這是重新排列，不只是把桌面等比縮小。側邊欄要決定是往下推還是收合進選單，圖文並列要決定是圖在上還是縮圖，表格要決定是橫向滾動還是改寫成卡片式。這些都是響應式網頁設計 RWD在處理的核心問題，排版技巧在這裡要跟版面配置邏輯一起想，不能各做各的。
技巧 9：字體載入與效能，速度也是排版的一部分
排版做到這裡，還有一個很多人漏掉的面向：你的字體下載需要多少時間。再漂亮的字體組合，如果載入要三秒鐘，讀者在第一秒看到的就是沒有字體樣式的陽春文字，或者是一片空白。這個「載入前的瞬間」也是排版體驗的一部分，而且它直接影響讀者要不要繼續等。
FOUT 指先以備用字型顯示再替換，FOIT 指字型等待期間文字暫時不可見；發生時間依瀏覽器與設定而異。font-display可選 swap、fallback 或 optional 等策略；swap 不是所有情境唯一最佳解，替換也不必然造成可見位移，仍需測試備用字型度量。
先確認實際使用的字型、字重與授權，再評估子集化及託管方式。子集需涵蓋動態內容與 fallback，避免缺字；自行託管可能減少第三方請求，但不保證更快，也不等於自動符合 GDPR 或其他個資規範。 延伸可參考本機託管 Google Fonts 教學、網頁字體 Webfont 完全指南。
搭配 font-display: swap，還要認真選擇備用字體（fallback font）。備用字體是正式字體載入前或載入失敗時顯示的字體，它跟正式字體的度量越接近，切換時的跳動通常越小。CSS 的 size-adjust、ascent-override 等屬性可調整備用字體度量，但效果要用實際字型、語言與版面測試，不能保證完全消除跳動。
載入速度在手機上又更敏感。行動網路可能比家用寬頻不穩定，外嵌字體與大圖的代價更明顯。圖片改用 WebP 等合適格式，並依螢幕提供對應解析度，可以縮小傳輸量。Google 的排名系統會使用 Core Web Vitals，但官方也說明，良好分數不保證進入前段排名，相關性仍然更重要，可對照 web.dev 的 Core Web Vitals 說明。因此字體與圖片效能應先視為使用體驗問題，不應推算固定的排名權重。
九步排版健檢：把你的版面一次拉回軌道
九個技巧講完，把它們收成一個可以照著做的檢查清單。建議你打開自己流量最高的那一頁，對著底下一步步走一遍，這比看十篇排版文章都有效，因為你會在自己的版面上親眼看到每一個問題長什麼樣子。
- 盤點文字與間距樣式，確認相同角色是否一致，不以字級數量作硬上限。
- 選擇共用比例或尺度作起點，再保留內容需要的例外。
- 用代表性文章檢查行長、換行及標點，不以每行固定字數直接判定合格。
- 一起調整字型、字級、行距與欄寬，並測試文字間距設定。
- 以閱讀及語意標題檢查層級，模糊預覽只作輔助。
- 整理間距尺度，檢查分組與操作，不強迫所有值為 8 的倍數。
- 依適用 WCAG 條件檢查實際前景／背景對比，調整前景、背景或兩者。
- 在手機與放大情境驗證內容、重排、觸控及焦點，不只看靜態截圖。
- 分別檢查字型請求、LCP 與 CLS；INP 需有互動量測，不能用一般導覽跑分直接代替。
特效、置中與留白都可使用，但應有明確用途。長文可從左對齊開始測試，視覺特效需保留可讀性；內容在第二屏不必然造成轉換下降，應看讀者能否找到需要的資訊。
排版是一個可以一直精修的工藝。九步走完後，再用真實讀者與裝置回頭看，發現哪裡卡就調整對應變數，讓比例節奏逐步穩定。停留時間、跳出率與捲動深度可以協助觀察讀者是否順利閱讀，但它們會同時受內容、來源與頁面目的影響，不能單獨證明排版好壞，更不能直接推論搜尋排名。把它們當成站內測試線索，比當成演算法訊號可靠。
