走進圖書館，多數人第一眼不是先讀完書背的每一個字，而是先被最大、最粗的那行字抓住視線。書名通常字級最大、字也最粗，作者名次之，分類編號跟館藏代碼小到幾乎要瞇眼才看得清楚。整排書背資訊量差不多，眼睛卻自動知道先看哪裡、後看哪裡，靠的不是運氣，是字級大小跟字重粗細這兩個變數搭配出來的結果，這正是文字排版裡的「資訊層級」。
網頁文章、電子報、簡報投影片也是同一套邏輯。如果整頁字級一樣大、字重全部一樣粗細，讀者掃過幾秒鐘完全分不出誰是重點、誰是補充，只能從頭到尾逐字讀完才找得到答案，這種情況在手機螢幕上尤其明顯，讀者滑過去往往直接關掉分頁。字級粗細搭配得當，資訊層級就自動浮現，讀者不用思考就知道先看標題、再看重點，最後才看細節。
先搞懂字級跟字重各自扮演什麼角色，再一步步從挑基準字級、選比例尺，到套進標題、副標、內文、註解四個層級，最後看幾個最容易失手的地方，接下來就照這個順序拆開講。
字級大小，怎麼決定讀者先看到什麼？
排版裡最先被看到的訊號，永遠是字級大小。同一頁裡最大的那個字，幾乎不用學過設計就知道那是標題，眼睛會不自覺先掃過去，這是最直覺、也最不需要解釋的層級訊號。只靠字級大小卻還不夠，如果標題跟內文一樣粗細，層級的落差就會被削弱一半，字重（也就是筆畫的粗細）其實是常常被忽略的第二個變數，同一組字級搭配不同粗細，層級感受會完全不同。
Material Design 3 是 Google 官方的設計系統，它公開的字級對照表就是「字級加字重合力分層」的實際範例：大標題是 32px、一般字重；中標題縮到 16px，卻改用中等字重撐出份量；內文同樣是 16px，卻用最輕的一般字重；到了標籤只剩 14px，字重又拉回中等。同一個 16px 大小，靠字重不同就分出「中標題」跟「內文」兩種角色，這也印證字級跟字重從來不是各管各的，是搭配著用的一組系統。
這篇接下來只聚焦「字級級距」跟「字重配置」這組純文字排版比例尺，顏色對比、留白間距、對齊方式這些同樣會影響視覺層次，但不在這篇的討論範圍內。
步驟一：抓一個基準字級，所有層級都從這裡往外推
多數人排版時，直覺是先想標題要多大，但比例尺該從另一頭往回推，先定的其實是內文，也就是讀者會花最多時間停留的那個字級。內文定歪了，後面不管標題、副標怎麼套比例尺往上推，整套系統都會跟著歪掉，因為使用者感受到的舒不舒服，多半來自內文，不是標題。
網頁常見的內文基準字級，多半落在 16px 上下，這個範圍不是隨便訂的，是長期累積下來、在多數螢幕解析度跟正常閱讀距離下都還算舒適的折衷值。基準字級如果訂得比這更小，後果不只是看起來比較擠這麼單純，而是真的會造成閱讀障礙。W3C 的 WCAG 官方文件在訂定對比度門檻時，把文字大小列為影響中低視力使用者辨識難度的關鍵因素，字級越小，需要的對比度就得越高才能通過檢測，反過來說，字級一旦小過某個門檻，不管對比再怎麼調，對中低視力讀者來說都還是吃力。
步驟二：選一個字級比例尺，一次推出所有層級的大小
不必每一層都憑感覺手動挑數字，設計圈慣用「字級比例尺」（也叫 modular scale）這個做法，先定好基準字級，再選一個固定比率，用這個比率一路往上乘，就能一次算出標題、副標、內文、註解這些層級各自該多大，不用每加一個層級就重新猜一次。
常見的比率有 1.2、1.25、1.333、1.618 幾種，數字越接近 1，層級之間的落差就越含蓄、越溫和；數字越大，層級之間的落差就越戲劇化，標題會明顯比內文大上一大截。這幾個比率其實是音樂音程跟古典幾何比例挪用過來的通用換算手法，算是排版圈的公開常識，不是哪家公司獨創。
比率該挑大還是挑小，要跟著內容密度走。文字量大、段落多的長文件，適合選接近 1.2、1.25 這種小反差比率，層級落差太大反而讓版面顯得破碎；標題主導、內文只是輔助說明的行銷素材，則可以選 1.5、1.618 這種大反差比率，讓標題一眼就跳出來。實際套用上，大廠的字級系統也大致遵循這個邏輯，從大標題的 32px，一路收到中標題的 22px、再到內文的 16px，層級之間確實維持著不小的落差幅度，可以當作比例尺概念被落地執行的參考範例。
步驟三：把比例尺套進標題、副標、內文、註解四個層級
比例尺選好之後，實際分配並不複雜。通常一篇網頁文章或一份長文件，只需要四個層級就夠用：主標題、副標題（也就是文章裡的 H2）、內文，以及註解或圖說。主標題用比例尺往上推最多級的數字，副標題往上推一到兩級，內文維持在基準字級，註解或圖說則可以比基準再小一級，用來跟正文做出區隔。
層級不必貪多，很多人會覺得多分幾層資訊看起來比較有條理，實際上正好相反，層級數一多，每一層彼此的字級差距就會被壓縮，讀者反而分不出誰是主標題、誰是副標題，又誰只是強調用的小標。連 Google 自己的 Material Design 3 系統，把整套介面文字從大標題到標籤只分成五個等級，也沒有再往下切更多層。連官方大系統都收斂在五級以內，一般文章用四層通常就夠用。
步驟四：字重跟著分工，不是只把字級放大
字級級距處理的是「大小」的層級，字重處理的則是另一個維度，也就是「力度」。同一個級距底下，把某段文字的字重從一般改成粗體，不需要占用更多版面、也不必整段跳大一級字級，就能做出明顯的對比，這在版面空間有限的手機螢幕、側邊欄、卡片元件上特別實用。
字重不是裝飾用的點綴，它的份量其實跟字級放在同一個等級看待。WCAG 官方標準在判定多大的字算大字時，明確把 18 點的一般字重文字，跟 14 點的粗體文字列為同等級，原文寫道：「18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio.」換句話說，字級只要 14 點、但用了粗體，易讀性判準上就等同一個 18 點的一般字重文字。這也證明字重加粗能達到的層級效果，跟直接放大字級是同一個量級的工具，不是可有可無的裝飾。
步驟五：中文字重的選擇比英文少，比例尺要跟著讓步
英文字體要做出力度層級相對從容，常見的字重選擇有從 100 到 900 共九個檔次，設計師可以在同一個字級底下，用 Light、Regular、Medium、SemiBold、Bold 這些不同檔次細細分出好幾層力度。中文字體就沒有這麼寬裕，中文筆畫結構複雜，每個字重都要重新繪製上萬個字，造字成本遠比英文字體高，能選的字重檔次通常少很多。
以 Google 跟 Adobe 合作開發的思源黑體為例（Adobe 那邊發行的版本叫 Source Han Sans），這已經是設計最完整、字重最齊全的開源中文字體之一，也就只提供 ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy 共七種字重。多數網頁常用的免費中文字體，實際能用的往往只有 Regular 跟 Bold 兩檔而已。
在這個限制下，比例尺系統的力度層級，不能像英文排版那樣指望靠多檔字重去細分，字重最多只能當輔助，真正撐起層級對比的，還是得靠字級本身的落差做得夠明顯，這也是為什麼中文網頁的字級比例尺，通常不會選太保守的比率，得靠字級落差彌補字重檔次不夠的先天限制。
步驟六：上機測試對比，調整到每個層級都站得住腳
級距系統算完數字並不等於做完，數字只是起點，還得實際套進真實內容裡檢查。同一組字級比例尺，套進一句五個字的標題跟套進一句十五個字的長標題，視覺效果完全不同，同一份設計拿到手機小螢幕跟桌機大螢幕上看，層級是否還撐得住，也得重新確認一次。
上機測試主要看三件事：字級之間的落差，是不是真的一眼就分得出層級，而不是要瞇眼比對才看得出差異；字重加粗之後，中文筆畫密集的字會不會糊成一團（這點下一段會展開）；還有顏色對比夠不夠，這是最後一道、也最容易被忽略的檢查關卡。WCAG 訂出的門檻是一般文字要達到 4.5 比 1 以上的對比度，大字或粗體文字則放寬到 3 比 1，如果你的網站服務對象包含政府機關、學校這類場域，還得對齊數位發展部發布的《網站無障礙規範》，這份規範本身就是依照 WCAG 2.1 訂定，對比度門檻一脈相承，不是另一套獨立標準。
字重不是越粗越好，層級也不是越多越清楚
前面六個步驟把比例尺怎麼計算、字重怎麼分工都拆完了，但實務上最容易翻車的，反而不是算得對不對，是動手套用時的幾個慣性動作：加粗加過頭、層級切太細、手機版直接沿用桌機比例尺。這幾個地方沒顧到，前面算得再精準的系統，到讀者眼前還是會走鐘。
中文用 CSS 模擬粗體，筆畫容易糊成一團
字體檔案本身如果沒有內建粗體版本，瀏覽器不會就此放棄，Mozilla 官方的技術文件說明，瀏覽器這時會用「字體合成」的方式，直接把原本的筆畫用演算法硬描粗，模擬出視覺上的粗體效果。這招在筆畫單純的英文字母上還算過得去，但中文筆畫本來就密集，再被演算法硬加粗，很容易讓筆畫黏在一起、糊成一團，可讀性不但沒變好，反而更差。
真的需要粗體層級時，第一件事是先確認手上這款字體有沒有內建 Bold 或 Medium 檔次，沒有的話，與其靠 CSS 的字重屬性硬壓一個假粗體出來，不如直接換一款字重檔次齊全的字體，才不會犧牲中文的可讀性去換一個層級效果。
全篇都加粗，等於沒有層級
粗體是一種稀缺資源，用在對的地方才有效果。如果內文、註解、標題全部都套上粗體，力度的對比就整個消失了，讀者掃過頁面時反而找不到重點在哪裡，跟完全不用粗體比起來，結果其實差不多，都是一片平等、沒有輕重之分。粗體應該只留給真正要優先被看到的少數元素，像是一句話裡最關鍵的那個詞，或是清單裡真正該優先處理的項目，而不是看到重要的字就順手加粗。
層級超過五層，讀者反而抓不到重點
前面提過，連 Material Design 3 這樣的官方系統，也只把文字角色收在五個層級以內，這不是巧合。層級數一旦超過五層，每一層跟上下層的字級、字重差距就得壓得更小才塞得下，差距一小，讀者眼睛就分辨不出兩個層級誰比較重要，層級系統存在的目的本來就是幫讀者省下判斷的力氣，層級切太細，反而是在增加讀者的判斷負擔。
實務上的建議很單純，不管是網頁文章還是長文件，層級數控制在四到五層以內就夠用。真的覺得資訊量大、非得再多分一層不可，通常代表某個層級底下的內容該再拆成獨立段落或另立小標，而不是硬塞進既有的層級系統裡。
手機螢幕比例尺跳太快，標題直接爆版
桌機螢幕寬，套用大反差比率（尤其是黃金比例 1.618 這種）做出來的標題氣勢十足，同一組數字直接搬到手機小螢幕上，問題就跟著來了，標題可能占掉螢幕上半部的一大半，長一點的標題甚至會被迫換行、跑版，原本用來凸顯重點的大字級，反而變成閱讀障礙。
解法是響應式情境下，手機版不要沿用桌機的比例尺數字，改用反差較小的比率，讓標題跟內文的落差沒那麼極端；或者把桌機比例尺算出來的每個層級，整體往下降一到兩級再套用到手機版，維持相對的層級關係，但把絕對數字壓在手機螢幕能負荷的範圍內。
字級比例尺跟字重分工，其實不是拿來炫技的排版技巧，湊滿七八種字重、切出十幾層級距，對讀者來說反而是負擔，不是貼心。它真正要解決的問題很單純，讓讀者掃過一篇文章、一份文件的頭幾秒鐘，眼睛就自動知道該先看哪裡、哪些是重點、哪些只是補充，這就是字級粗細搭配出來的資訊層級真正的價值。
下次動手排版前，不妨先問自己兩個問題：基準字級定在哪裡，這次要用哪一個比例尺。從這兩個決定開始往外推，再套進標題、副標、內文、註解四個層級，會比逐層憑感覺手動調數字，更快做出一套讀者一眼就看得懂的層級系統。