9 個排版設計技巧：字體、行距到視覺層次指南

你是不是也這樣：打開自己網站，說不上哪裡醜，就是覺得「哪裡怪怪的」。字好像有點擠、行好像有點窄、標題好像沒有比正文更有存在感，但你又指不出一個明確的錯。於是你打開佈景主題的設定頁，把字級調大一級、把行距拉開一點、換一個看起來比較有設計感的字體，存檔，重新整理，看起來好像好一些，但其實你也說不清楚為什麼變好，更不知道下禮拜會不會又看不順眼。

我接下來要給你的，不是九個零碎的排版小訣竅，而是一套可以重複套用的排版判斷系統。我會把字體選擇、字級比例、行距、欄寬、視覺層次、留白、對齊對比、手機校準、載入效能這九個面向，一個一個拆成可以量化、可以檢查的判斷條件。讀完之後，你應該要能回答兩個問題：我的版面現在究竟哪一個環節出問題，以及下一步該調哪一個變數。如果你想要的是更宏觀的版面配置邏輯，可以先看網頁版面設計完全攻略，那篇談的是骨架，這篇談的是骨頭上面的肉怎麼長。

重點摘述：排版的好壞不只看單一字體，也要看整套系統。許多「看起來怪怪的」版面，問題出在字級、行距、欄寬與留白各自為政，缺少共同節奏。接下來九個技巧可以當成檢查流程，依序找出版面問題；實際改善幅度仍取決於原始設計與內容。

排版為什麼常常「看起來怪怪的」：系統缺位的四個症狀

以內容站來說，這類網站最常見的通病只有一個：排版沒有統一系統。每篇文章由不同作者、不同時期套用各自習慣的字級與留白，A 作者喜歡 18px 正文，B 作者習慣 16px，C 作者把標題設成 28px，D 作者設成 36px。單看每一篇都還過得去，把十篇擺在一起，整個網站就像一間每面牆都交給不同設計師各自裝潢的房子，走進去就是說不出的不舒服。整理舊文時，可以照單篇文章的排版體檢逐篇走過一輪，先把每一篇拉回同一套標準。

換句話說，排版問題的根源幾乎不是「字體選錯」這件事，而是「沒有系統」。底下這四個症狀，只要中了任何一個，幾乎就可以斷定你的版面缺乏一套共同的比例骨架，後面九個技巧就是在逐一把這套骨架搭起來。

• 症狀一，字級尺寸太多。全站用過的 font-size 數值超過十個，而且彼此之間找不到明確的倍率關係，每一個都是當下「看感覺」調出來的。
• 症狀二，行距到處不一致。首頁用 1.5、文章頁用 1.8、側邊欄又用 1.2，讀者每滑到一個新區塊都要重新適應一次閱讀節奏。
• 症狀三，留白沒有基準。段落之間的間距有時 16px、有時 40px、有時 60px，找不到一個共通的間距單位，看起來就像隨手撒出來的。
• 症狀四，層級落差不夠。標題只比正文大一點、粗一點，讀者用「掃的」方式根本分不出哪一段才是重點。

排版系統的四個底層變數

把排版拆到最底層，真正在決定版面長相的變數只有四個：字級（font-size）、行距（line-height）、欄寬（一行能放幾個字，又稱 measure）、留白（區塊之間的距離）。這四個變數只要彼此之間共用同一套比例節奏，版面就會立刻穩下來；只要其中一個脫隊，整個版面的氣場就會散掉。後面九個技巧，本質上都是在告訴你怎麼讓這四個變數對齊到同一套節奏，而不是各自為政。

這個觀念先建立起來，接下來的技巧才不會變成「頭痛醫頭」的零碎調整。你會發現，當字級有了一套比例尺，行距和留白就跟著能推導出來，這就是系統的力量。

技巧 1：字體選擇從「角色分工」開始，不是從「好看」開始

很多人挑字體的方式是打開字體網站，看到一個喜歡的就載下來用，然後過幾天又換一個。這種做法的問題在於，你把字體當成裝飾品，可是字體在版面上扮演的是「角色」。一齣戲不會每一個角色都找長相最帥的演員來演，排版也是，每一個字體位置都有它該承擔的工作。分配角色之前，先把你欣賞的網站用了哪些字體查清楚，交給字體辨識工具把名稱、字級與行距一併抄下來，比憑印象回憶可靠。

一個版面只需要三個字體角色

一個健康的版面，字體角色最多三個就夠了，超過這個數字幾乎都是災難。這三個角色各自的挑選標準完全不同，混在一起挑才會挑到走鐘。

角色	工作內容	挑選標準
標題字（Display）	大標題、Hero 區、章節名	個性鮮明、辨識度高，可以犧牲長文可讀性
正文字（Body）	內文、段落、列表	中性、安定，連續閱讀 500 字不會累
強調字（Accent，可選）	數字、引文、標籤、價格	等寬或特色字體，用來製造對比與節奏

標題字你可以大膽，挑一個有個性的襯線體或變體字都行，因為它只出現幾個字，重點是讓人一眼記住。正文字你反而要選最無聊、最中性的那種，黑體家族是中文正文的安全牌，因為它要在小字級、長篇幅下連續服役，任何花俏都會變成閱讀疲勞。想把這一塊挑得更精，可以對照中文字體設計指南裡對黑體、明體、圓體各自的特性整理，以及英文字體推薦裡襯線與非襯線的適用情境。

中英混排的兩條潛規則

中文網站幾乎一定會遇到中英混排，而混排最容易翻車的地方有兩個。第一個是 x-height（字體的小寫字高）對不齊：你選的中文字體和英文字體如果 x-height 差太多，同一段落裡中英文交錯時就會高低跳動，看起來像喝醉。第二個是字寬節奏不一致：中文是等寬的方塊字，英文是比例字寬，兩者放在一起時，英文單字之間的空白要稍微收緊，否則會出現一段段「空洞」。

實務上比較穩的做法，是挑同一個字體家族裡同時提供中文版與拉丁版的配對（例如思源黑體配 Source Sans、Noto Sans CJK 配 Noto Sans），這樣設計師本來就把兩者的視覺重心調整過，混排起來會自然很多。這兩條潛規則不解決，你後面字級行距調得再漂亮，讀者還是會隱隱覺得「字在跳」。

技巧 2：用模數比例尺釘死字級，拒絕憑感覺

症狀一「字級尺寸太多」的解法，是導入模數比例尺（modular scale）。觀念很簡單：你先訂一個基準字級（通常是正文，例如 16px），再訂一個固定的倍率（例如 1.25），然後所有字級都從這個基準乘以倍率的幾次方得出來。這樣一來，你全站的字級只會出現在幾個固定的階梯上，不會再冒出任何「憑感覺」的數字。

這件事的價值在於，字級一旦有了一套共同的數學骨架，它們彼此之間就會自動產生和諧的關係，視覺上立刻「安定」。這比你在設定頁裡反覆試 17px、18px、19px 哪個好看，要有效率太多，而且結果更穩。

比例名稱	倍率	適用情境
次三方（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.250 當倍率，那麼往上的字級階梯會是：16、20、25、31.25、39、49，取整數後大概是 16、20、25、31、39、49 這六階。你的 H1 用 39、H2 用 31、H3 用 25、正文用 16、輔助說明用 13（往下除一階）。從此你的全站字級只會在這幾個數字上出現，再也不會有「這個標題到底要比另一個大多少」的爭論，因為答案由倍率決定，不由你當下的感覺決定。

內容密度越高的網站，倍率要選越小（1.2 左右），因為層級之間的落差不需要太戲劇化，讀者要的是穩定可讀；反之，文字量少、視覺導向的網站可以選大倍率（1.5 以上），讓層級之間的落差更有戲劇性。如果你在設計階段就想把這套網格先拉好，可以把上面的字級階梯直接畫成設計稿裡的 Layout Grid，讓設計檔與最終的 CSS 共用同一把尺，避免從設計到開發之間出現字級走樣。

技巧 3：行距與欄寬綁在一起設定，一行字數才是關鍵

絕大多數人設定行距的方式，是直接在 CSS 裡寫一個 line-height: 1.6 或 1.8，然後就不管了。問題是，行距的最佳值跟一行有幾個字高度相關，而一行有幾個字又跟欄寬綁在一起。這三個變數是連動的，把它們分開設定，幾乎一定會踩到其中一個極端。

排版經典裡常被引用的一行字數區間是 45 到 75 個字元（拉丁字母為主）。中文可先用每行約 28 到 40 字作為桌面版測試起點，再依字體、字級、裝置與讀者實測調整。行長過短會提高換行頻率，過長則可能讓視線較難找到下一行起點；這是可讀性檢查用的經驗範圍，不是硬性標準。

行距則跟著欄寬走，兩者的對應關係有點反直覺：欄寬越窄，行距反而要放大；欄寬越寬，行距要收緊。原因是窄欄位裡每一行字數少，眼睛換行的頻率高，需要更大的行距來避免視線在換行時滑錯行；寬欄位裡每一行字數多，眼睛橫向掃視的距離長，行距太大反而會讓相鄰的兩行失去「群組感」。一個好用的起點是：欄寬接近上限（40 字）時用 1.5 到 1.6，欄寬偏窄（25 字左右）時拉到 1.7 到 1.8。

所以正確的設定順序是：先決定欄寬（讓一行字數落在健康區間），再根據欄寬推導行距，最終才微調字級。把這個順序顛倒過來，先調字級再硬塞欄寬，就會出現「字很小、行很擠」或「字很大、行很鬆」這兩種常見的失敗組合。

行距還有一個進階的用法，叫做垂直韻律（vertical rhythm）。做法是把所有元素的行高與間距都對齊到一個固定的基準行高，例如以 24px 為一個單位，讓整個頁面由上到下都由這個 24px 的格子堆疊出來。段落之間留一個單位的空白、標題上方留兩個單位、圖片高度湊成單位的整數倍。這樣一來，你的版面從頁首到頁尾都維持同一個垂直心跳，讀者捲動時會感受到一種穩定的節奏，即使說不出原因，也會直覺認為這個站排得很整齊。垂直韻律是把技巧 2 的字級比例尺、技巧 3 的行距、技巧 5 的留白三者統一起來的黏著劑，當三者都對齊到同一個基準行高，整個排版系統才算真正閉環，不會出現三組各自漂亮的數字硬湊在一起的尷尬。

技巧 4：視覺層次靠「落差」，不靠裝飾

症狀四「層級落差不夠」是內容站最普遍的問題。很多網站的標題跟正文比起來，只是稍微大一點、稍微粗一點，讀者用「掃」的方式看過去，根本感受不到層級，於是整頁看起來像一塊均勻的灰色方塊。視覺層次的本質是落差，落差要夠大，讀者的眼睛才會被牽著走。

判斷層級落差夠不夠，有一個很老派但很好用的方法，叫做眯眼測試（Squint Test）：你把眼睛眯成一條線，讓畫面變模糊，這時候你還能不能分辨出哪一塊是標題、哪一塊是正文、哪一塊是次要說明。如果眯著眼還看得出層級，代表你的落差夠；如果眯著眼之後整頁糊成一片，代表你的層級根本沒做起來，再多的顏色和底線都救不回來。

層級落差要做出來，靠的是三個工具的組合，不是單靠其中一個。第一是字級跳躍，相鄰層級要有肉眼可辨的差異，但不必硬套 1.5 倍；內容密集的介面通常會用較小比例，再搭配字重與留白。第二是字重對比，例如標題用 700、正文用 400，但仍要看字型實際提供的字重。第三是間距對比，標題上方留比較大的空間、下方留比較小的空間，用留白把標題跟它帶領的段落綁成一組。

很多人以為層級是用顏色做出來的，於是把每個標題都塗成鮮豔的藍色或紅色。顏色確實能增加層級感，可是它不該是主要工具，原因有兩個：一是對色弱或色盲讀者不友善，二是顏色一多，版面就會開始「吵」。讓字級、字重、間距先撐起層級，顏色只在真正需要強調的少數地方出現，這個順序倒過來，版面一定亂。

技巧 5：把留白當成主動元件，不是剩下的空氣

留白大概是排版裡最被低估的元素。多數人把它理解為「沒有放東西的剩餘空間」，於是只要還塞得下，就想辦法再塞一個區塊進去。留白其實是版面上最有生產力的主動元件，它做三件事：分群、呼吸、引導視線。少掉這三個功能，你的版面就會從「好讀」退化成「資訊海」。

留白可以分成兩個層次，兩個都要顧。第一個是巨觀留白（macro whitespace），指的是區塊與區塊之間的距離，例如標題列跟內文區之間、文章跟側邊欄之間、頁首跟第一個區塊之間。巨觀留白決定讀者怎麼「分群」：距離夠遠，讀者會把兩個區塊理解成獨立的單元；距離太近，讀者會把它們看成同一坨。第二個是微觀留白（micro whitespace），指的是字裡行間、段落內部、表單欄位之間的距離，它決定連續閱讀的舒適度。

讓留白有紀律的方法，是讓它對齊到一個固定的基準網格，最常見的是 8px 網格。你所有的間距都從 8 的倍數挑：8、16、24、32、48、64。這樣一來，巨觀與微觀留白會自動產生一致的節奏，整個版面看起來會「乾淨」，而乾淨的本質其實就是所有距離都來自同一把尺。這跟技巧 2 的字級比例尺是同一套邏輯：用一個共通的比例，把所有變數綁在一起。

一個反向的自我檢查：把你現在版面上某一個區塊的留白砍掉一半，看看版面會不會崩壞。如果砍掉一半之後，分群還在、可讀性還在，代表你本來的留白是「裝飾性」的，並沒有在做事；如果砍掉之後立刻變得一團亂，代表這塊留白是「功能性」的，正在工作。有功能的留白要留，沒功能的留白只是讓版面看起來空虛，兩者要分清楚。

舉一個常見的對比：兩個資訊量相同的服務頁，A 頁把每個區塊之間留 32px，區塊內段落之間留 16px；B 頁反過來，區塊之間只留 16px，段落之間卻留 24px。讀者在 A 頁能清楚分出「這是第一項服務、那是第二項服務」，在 B 頁則會把兩項服務看成糊在一起的內容。差別不在資訊量，只在巨觀留白有沒有大於微觀留白。這是一個判斷留白是否有效的簡單原則：區塊之間的距離，要明顯大於區塊內部的距離，分群才會成立。違反這條原則，再多的內容分類都救不回版面的混亂，讀者只會覺得這一頁資訊好多、好雜、不想看。

技巧 6：對齊、對比、顏色這三條紀律

排版的細節裡，有三個動作最常被誤用，一旦誤用，前面所有系統都會破功。這三條紀律不複雜，但它們是版面的基本衛生，違反任何一條都會讓讀者產生「這站不太專業」的直覺，即使他說不出具體原因。

第一條，長篇正文優先左對齊，謹慎使用強制兩端對齊。兩端對齊若缺乏良好的斷詞與標點處理，可能產生不均勻的字間空白，形成垂直的「白色河流」，阻礙閱讀。標題、引文、數字表格可以依內容置中或靠右；連續閱讀的正文，左對齊通常是較穩妥的起點。

第二條，文字與背景的對比要達到 WCAG 標準。WCAG 2.1 的 AA 等級要求正文文字與背景的對比比至少 4.5:1，大字（18pt 以上或 14pt 粗體）至少 3:1，這些門檻出自 W3C 的 WCAG 2.1 Contrast (Minimum) 準則。很多網站為了「質感」喜歡用淺灰字配白底，對比比常常只有 2 出頭，在年輕人的亮螢幕上還勉強能看，在較舊的螢幕或強光環境下根本看不見。對比檢查有免費線上工具，把你前景與背景的色碼丟進去就能算出比值，這個動作花不到三十秒，卻能擋掉一大類可讀性問題。更系統化的色彩觀念，可以搭配色彩學完整指南一起看。

第三條，顏色是強調工具，不是層級工具。這一條跟技巧 4 的結尾呼應：層級用字級、字重、間距來做，顏色保留給真正需要被突出的少數元素，例如連結、按鈕、警示。一個版面如果同時出現四五種顏色的文字，視覺重心會整個散掉，讀者不知道該先看哪一個。把顏色收斂到兩三個，把表達層級的工作還給字級與字重，版面會立刻沉穩下來。

技巧 7：中英混排與字距微調的細節

技巧 1 談過中英混排的宏觀問題（字體配對），這裡談微觀的字距。中文字與字之間、英文單字與單字之間、中英文交界處，這三種間距各有不同的處理邏輯，處理不好就會出現「看起來沒事但讀起來卡卡的」那種微妙的不舒服。

中文正文字距通常維持預設即可，因為中文字本身已經包含字框間距，硬去加 letter-spacing 反而會破壞方塊字的節奏。但中文標題可以視字體特性微調，有些標題字體在放大後字與字之間會顯得過於擁擠，這時加 0.05em 到 0.1em 的 letter-spacing 會讓標題更舒展。英文大寫標題則相反，因為大寫字母視覺重量接近，加一點字距能避免字母黏在一起。

中英文交界處的間距，是中文網站一個隱形的品質指標。HTML 通常只會保留作者實際輸入的空白，不能假設瀏覽器都會自動加入俗稱「盤古之白」的間隔。CSS 的 text-autospace 可處理部分中西文間距，但瀏覽器支援仍要實測；在支援不一致時，優先由內容或排版流程維持一致，並檢查換行與複製文字是否正常。

數字與表格是另一個容易翻車的地方。表格裡的數字如果用比例字寬，每一列的數字會對不齊，看起來歪歪扭扭。解法是對數字使用等寬數字（tabular figures），CSS 裡是 font-variant-numeric: tabular-nums，這樣同一欄的數字會上下對齊，財務報表、價格表、數據清單都適用。這個細節很多人不知道，但它對「專業感」的影響非常大。

中文排版還有一個容易被忘記的細節，是標點符號的佔位。中文習慣用全形標點，每一個標點佔一個字寬，在段落邊緣會出現標點把字推開的視覺缺口。進階的排版引擎有標點擠壓（punctuation kerning）功能，能把連續標點、或落在行首行尾的標點的多餘空白壓縮掉，讓文字塊的左右邊緣更整齊。一般網站不一定要做到這個程度，但至少要避免一個常見失誤：中英文標點混用。同一句話裡出現半形逗號配全形句號，或用英文括號包住中文，視覺上會立刻產生不協調感，這是比字體選擇更基礎的衛生問題，改起來成本極低，放著不管卻會讓整段文字看起來廉價。

技巧 8：手機版是另一個版面，桌面規則要全部重校

手機不是縮小的桌面，這是排版觀念裡最重要的一句話。同一套字級、行距、欄寬，直接從桌面搬到手機上，幾乎一定會出問題，因為手機的閱讀距離、螢幕寬度、互動方式都跟桌面完全不同。把手機版當成另一個獨立的版面來設計，是技巧 8 的核心觀念。

先看一個事實：根據 Statista 的長期追蹤（2026 年 4 月的資料），行動裝置佔全球網站流量的比例長年維持在六成上下。也就是說，超過一半的讀者是用手機看你的版面，手機排版做不好，等於把過半流量往外推。這不是可以拖著不處理的次要工作，它就是你版面真實的主戰場。

手機版的調整方向有幾個重點。正文字級可先以 16px 到 18px 測試，不必預設一定大於桌面；行距、行長與留白也要配合實際字體和螢幕寬度重校。窄螢幕常需要更短的行長與更清楚的區塊間距，但表格裡的數值都應視為起始範圍，再以真機閱讀與無障礙測試確認。

排版項目	桌面建議	手機建議	調整理由
正文字級	16px（14 到 16pt）	18px（16 到 18pt）	閱讀距離較遠、螢幕較小
行距倍數	1.5 到 1.8 倍	1.6 到 2.0 倍	窄螢幕需要更多呼吸
一行字數	28 到 40 字	20 到 25 字	避免單行過長難換行
留白比例	適中	放大	降低小螢幕資訊密度
層級落差	1.5 到 2 倍	1.4 到 1.6 倍	手機字級上限有限

手機排版還有一個關鍵是觸控目標。44×44 CSS px 是常見的實務目標；WCAG 2.2 的 AA 最低要求為 24×24 CSS px，或符合間距等例外條件。按鈕、連結與可點擊圖示仍應盡量保留較寬裕的點擊範圍，並拉開間距避免誤觸。這雖然屬於互動設計，但會直接影響排版留白。CTA 按鈕的尺寸、位置與留白可延伸參考CTA 行動呼籲按鈕設計指南。

手機版還有一個觀念上的轉換：桌面上你習慣的多欄佈局，到手機上幾乎都要變成單欄。這是重新排列，不只是把桌面等比縮小。側邊欄要決定是往下推還是收合進選單，圖文並列要決定是圖在上還是縮圖，表格要決定是橫向滾動還是改寫成卡片式。這些都是響應式網頁設計 RWD在處理的核心問題，排版技巧在這裡要跟版面配置邏輯一起想，不能各做各的。

技巧 9：字體載入與效能，速度也是排版的一部分

排版做到這裡，還有一個很多人漏掉的面向：你的字體下載需要多少時間。再漂亮的字體組合，如果載入要三秒鐘，讀者在第一秒看到的就是沒有字體樣式的陽春文字，或者是一片空白。這個「載入前的瞬間」也是排版體驗的一部分，而且它直接影響讀者要不要繼續等。

字體載入有兩種常見的失敗模式。FOUT（Flash of Unstyled Text）是字體還沒載完時，瀏覽器先用系統預設字體顯示文字，字體載完後瞬間切換，讀者會看到文字「跳一下」。FOIT（Flash of Invisible Text）是瀏覽器在字體載完前完全不顯示文字，讀者盯著空白畫面等。兩種都不好，但可以透過 font-display 屬性來控制：用 font-display: swap 讓瀏覽器先顯示預設字體、字體載完再換，這是對讀者體驗最友善的選擇，代價是會有一次跳動。

降低載入代價有幾個實際動作。第一，只載入實際用到的字重，不要把整個字體家族的九種字重全部載下來，很多網站其實只用上 400 與 700 兩個字重。第二，使用子集化（subsetting），中文字體動輒包含數萬字，但你的網站實際用到的可能只有幾千字，把沒用到的字切割出去能大幅縮小檔案。第三，把字體自我託管或使用支援子集的服務，避免依賴第三方 CDN 增加額外的連線成本。WordPress 站台如果想認真處理這一塊，本機託管 Google Fonts 教學把搬移與 GDPR 合規的步驟走了一遍，網頁字體 Webfont 完全指南則把字型選擇與載入優化講得更完整。

搭配 font-display: swap，還要認真選擇備用字體（fallback font）。備用字體是正式字體載入前或載入失敗時顯示的字體，它跟正式字體的度量越接近，切換時的跳動通常越小。CSS 的 size-adjust、ascent-override 等屬性可調整備用字體度量，但效果要用實際字型、語言與版面測試，不能保證完全消除跳動。

載入速度在手機上又更敏感。行動網路可能比家用寬頻不穩定，外嵌字體與大圖的代價更明顯。圖片改用 WebP 等合適格式，並依螢幕提供對應解析度，可以縮小傳輸量。Google 的排名系統會使用 Core Web Vitals，但官方也說明，良好分數不保證進入前段排名，相關性仍然更重要，可對照 web.dev 的 Core Web Vitals 說明。因此字體與圖片效能應先視為使用體驗問題，搜尋影響則是多項訊號中的一小部分。

九步排版健檢：把你的版面一次拉回軌道

九個技巧講完，把它們收成一個可以照著做的檢查清單。建議你打開自己流量最高的那一頁，對著底下一步步走一遍，這比看十篇排版文章都有效，因為你會在自己的版面上親眼看到每一個問題長什麼樣子。

1. 盤點全站字級。用瀏覽器的開發者工具，把你這一頁所有用過的 font-size 數值列出來。如果超過十個、而且彼此找不到倍率關係，就是症狀一發作。
2. 選定一個模數比例尺。根據你的網站類型，從技巧 2 的表格裡挑一個倍率，把字級收斂成五到七階，多出來的全砍掉。
3. 檢查正文行長。數一數桌面正文一行有幾個中文字，落在 28 到 40 字之外就要調欄寬；手機版落在 20 到 25 字之外也要重校。
4. 依欄寬推導行距。欄寬接近上限用 1.5 到 1.6，欄寬偏窄用 1.7 到 1.8，不要再憑感覺寫死一個數字。
5. 對每一頁做眯眼測試。眯著眼看你的版面，分不出標題與正文就代表層級落差不夠，回頭加大字級跳躍與字重對比。
6. 把留白對齊到 8px 網格。所有間距改成 8 的倍數，巨觀與微觀留白都用同一把尺，版面會立刻乾淨下來。
7. 跑一次對比檢查。把所有文字與背景的色碼丟進 WCAG 對比工具，正文低於 4.5:1、大字低於 3:1 的全部加深。
8. 手機版逐一重校。對照技巧 8 的表格，把手機正文字級、行距、行長、留白、觸控目標分別設定，不要直接沿用桌面值。
9. 用 PageSpeed Insights 跑行動版。檢查字體載入與切換是否影響 Largest Contentful Paint 或 Cumulative Layout Shift；若字體載入伴隨主執行緒壅塞，再進一步檢查 Interaction to Next Paint。必要時做字重精簡、子集化與本機託管。

還有幾個在版面健檢時反覆出現的誤區，順便提出來。第一個是把字體特效當成排版主力，陰影、漸層、描邊樣樣來，這些只會放大層級問題，掩蓋不了背後沒有系統的事實。第二個是過度依賴置中對齊，標題置中、段落置中、圖片置中，整頁看起來像輓聯，其實左對齊才是連續閱讀的預設值，置中要留給真正的視覺焦點。第三個是迷信留白越多越高級，結果把重要資訊推到第二屏，轉換率跟著往下掉，留白要服務分群與視線引導，不能只追求空曠。把這三個誤區跟前面九步清單一起對照著檢查，你的排版判斷會比大多數自稱有設計感的網站更可靠，因為你做的是可重複的系統，別人做的是一次性的裝飾。

排版是一個可以一直精修的工藝。九步走完後，再用真實讀者與裝置回頭看，發現哪裡卡就調整對應變數，讓比例節奏逐步穩定。停留時間、跳出率與捲動深度可以協助觀察讀者是否順利閱讀，但它們會同時受內容、來源與頁面目的影響，不能單獨證明排版好壞，更不能直接推論搜尋排名。把它們當成站內測試線索，比當成演算法訊號可靠。