排版佔了介面資訊量的絕大部分,但它常常是設計流程裡最先被草草帶過的一塊。多數介面上使用者要消化的內容都是文字,一個沒有階層、行距擁擠、行長失控的頁面,即使配色與元件再精緻,也會讓人讀得吃力、抓不到重點。這篇把字級比例、視覺階層、行高、行長、字距、字體搭配、對比與留白,以及 responsive typography 收斂成一組可以直接套用的準則,讓排版從「憑感覺調」變成「有系統可依循」。
📖 學
字級比例:用一個比例生出整套字級
隨手挑字級(13px、15px、22px、28px 混著用)是階層崩壞的主因。模組化比例(modular scale / type scale)的做法是:定一個基準字級(通常 16px 或 1rem),再用一個固定比例往上乘,得到整套彼此和諧的尺寸。常見比例有 1.2(Minor Third)、1.25(Major Third)、1.333(Perfect Fourth)、1.5(Perfect Fifth),數字越大,大小標題之間的落差越戲劇化。
以 16px 基準搭配 1.25 為例:16 → 20 → 25 → 31.25 → 39 → 48.8……每一階都是前一階乘以 1.25。這樣算出來的字級之間有數學上的一致關係,視覺上自然「對得起來」,就像音階一樣。實務上不需要每一階都用:body 用基準、小字用往下一階、H3/H2/H1 各取一階即可,通常五到七個尺寸就足以撐起整個產品。
比例的挑選要看內容型態。內容型網站(部落格、文件、新聞)標題與內文落差不必太大,1.2 到 1.25 較穩;行銷首頁、landing page 需要強烈視覺衝擊,1.333 甚至 1.5 能讓主標題壓場。要提醒的是,大比例在小螢幕上容易讓最大字級爆出可視範圍,所以大比例通常要搭配後面講的流體字級一起用。
視覺階層:讓眼睛一秒知道先看哪裡
視覺階層決定使用者掃視頁面時的順序,而字級只是其中一個工具。真正有效的階層靠三個維度協作:大小、字重、顏色(明度/對比)。Refactoring UI 有個關鍵觀點——不要只靠字級拉開階層。想強調某段文字時,與其把它放大,不如加重字重或用較深的顏色;想弱化次要資訊(如說明文字、時間戳),與其縮到很小,不如降低顏色對比(用中灰而非純黑)。這樣主要內容的字級不必被推到極端,版面也更沉穩。
實務上可以把文字分成三層:主要(primary,標題與關鍵內容,深色 + 較重字重)、次要(secondary,一般內文)、輔助(tertiary,標籤、註解、metadata,較淺灰、較小)。三層各自有明確的字級/字重/顏色組合,整個產品共用這套規則,階層就會自動一致。切忌一個畫面裡出現五六種同等強度的元素互相搶注意力——當所有東西都被強調,等於沒有東西被強調。
行高:字級越大,行高越小
行高(line-height)控制每一行之間的垂直呼吸感。Butterick 的建議是行距設在字級的 120% 到 145%(換算成 CSS 的 unitless line-height 約 1.2 到 1.45)。行距太緊,兩行文字會黏在一起、眼睛難以換行;行距太鬆,一段文字會散成互不相干的橫條,失去「一段」的整體感。內文一般落在 1.5 上下最穩,這也是多數易讀性研究與 WCAG 建議的區間。
一個常被忽略的規則:行高應隨字級反向調整。大標題用小行高(1.1–1.25),因為大字本身佔空間、行與行的關係一眼就看得出,行高太大反而鬆散;小字與長段內文用大行高(1.5–1.7),讓密集的文字有足夠喘息。line-height 建議用無單位數值(如 1.5)而非固定 px,這樣它會依各元素自己的字級等比縮放,不會在改字級時忘了同步調行高。此外行長越長,越需要略大的行高來幫助眼睛準確地跳回下一行開頭。
行長:每行 45 到 75 字元
行長(measure)指一行文字的寬度,是最容易被 RWD 忽略卻最影響閱讀的參數。衡量行長最實用的單位不是像素或公分,而是「每行平均字元數」,因為字元數在任何字級下都成立。Butterick 給的區間是每行平均 45 到 90 字元(含空格);更常被引用的舒適甜蜜點是 45–75 字元,單欄內文以約 66 字元為理想。
行太長,眼睛從行尾跳回下一行開頭時容易找錯行、漏讀或重讀,長時間閱讀特別疲勞;行太短則換行過於頻繁,閱讀節奏被打斷。控制行長最直接的做法是給文字容器設最大寬度,CSS 可用 max-width: 65ch(ch 單位約等於一個字元寬),或 max-width 給約 600–700px。中文字沒有空格、單字密度高,舒適行長通常更短,約每行 30–45 個漢字。切記:不要因為容器是滿版就讓內文也拉到滿版,大螢幕上一定要限制內文的量測寬度。
字距、字重與字體搭配
字距(tracking / letter-spacing)在小地方能拉開明顯差距。全大寫(uppercase)文字因為字母都是同高、缺少小寫的高低起伏,天生擁擠,適度加一點正字距(如 0.05em)能改善辨識;反之大號標題常有微微偏鬆的預設字距,收一點負字距(-0.01 到 -0.02em)會更緊湊有力。內文正常字級一般不需要動字距,原廠設計的字型 metrics 已經最佳化過。
字重對比是建立階層最省成本的手段。與其多用一種字體,不如善用同一字體家族的字重(Regular / Medium / Semibold / Bold),用字重差異區分標題與內文。字體搭配上,經典策略是「對比而非衝突」:一個襯線(serif)配一個無襯線(sans-serif),讓標題與內文在氣質上有區隔又不打架;或者乾脆全站只用一套設計精良的無襯線,靠字重與字級撐場面,反而更耐看、更好維護。無論哪種,整個產品的字體種類建議控制在一到兩套之內。
可讀性 vs 易辨性,以及對比與留白
可讀性(readability)與易辨性(legibility)是兩件事。易辨性指單個字元/單字是否容易被認出來,取決於字體本身的設計(x-height 高、字腔開放、易混字母如 I/l/1 有區隔的字體易辨性高);可讀性指整段長文是否好讀,取決於排版決策——字級、行高、行長、對比、留白全部加起來的結果。一套易辨性極佳的字體,若行長爆表、行距擁擠,可讀性依然很差。UI 設計師大部分時間在優化的是可讀性。
對比方面,WCAG 要求一般內文與背景的對比至少 4.5:1,大字(約 18pt 或 14pt 粗體以上)至少 3:1。要避免的反模式是為了「柔和」而把內文設成淺灰配白底,對比不足在強光下、老花眼或低品質螢幕上幾乎讀不到。留白(white space)則是排版的隱形骨架:段落間距、標題與內文之間的空隙、行長兩側的留白,都在無聲地劃分區塊與建立節奏。與其用線條和框把內容框起來,常常留白就足以把資訊分組。
Responsive Typography:用 clamp() 做流體字級
固定字級在跨裝置時進退兩難:桌機上剛好的 48px 大標,在手機上會撐爆;手機上舒服的 16px 內文,在大桌機上又顯得偏小。傳統做法是用媒體查詢(media query)在幾個斷點各設一組字級,但那是階梯式的跳動,斷點之間仍然不理想。CSS 的 clamp() 提供了更優雅的流體字級:clamp(最小值, 偏好值, 最大值),瀏覽器會在最小與最大之間、依偏好值連續縮放。
典型寫法是偏好值混用視窗單位與 rem,例如 font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem):小螢幕鎖在 2rem,大螢幕封頂 3rem,中間隨視窗寬度平滑變化。clamp() 自 2020 年起主流瀏覽器全面支援,如今可放心使用,幾乎能取代大部分為字級而設的媒體查詢。實務準則:標題這類大字最需要流體處理(落差感明顯),內文則以維持在 45–75 字元的舒適行長為優先,不必讓每個字級都流體化。務必給 min/max 設合理邊界,並記得 vw 純比例縮放會影響無障礙的縮放能力,所以偏好值一定要保留一個 rem 項,讓使用者的字級偏好仍然生效。
🧠 記
- 模組化比例:定基準字級(16px/1rem),用固定比例(1.2/1.25/1.333/1.5)往上乘,生出整套和諧字級,通常五到七階夠用。
- 階層靠三維度協作——大小、字重、顏色;強調用加重字重或加深顏色,弱化用降低對比,別只靠拉大字級。
- 行高設字級的 120–145%(內文約 1.5),用無單位數值;字級越大行高越小,長段落與長行需略大行高。
- 行長舒適區為每行 45–75 字元(理想約 66),中文約 30–45 字;用
max-width: 65ch限制內文寬度。 - 全大寫加正字距(約 0.05em)、大標題收負字距(-0.01~-0.02em),內文正常字級不需動字距。
- 易辨性看字體本身,可讀性看整體排版;內文對比至少 4.5:1,別用淺灰配白底。
- 字體種類控制在一到兩套,靠同家族字重對比建立階層;搭配求對比不求衝突。
clamp(min, preferred, max)做流體字級,偏好值須含 rem 項以保留無障礙縮放,優先用在標題。
✍️ 實踐
- 為專案建一份 type scale token:選定基準與比例,把算出的五到七個字級存成設計變數(如
--text-sm / --text-base / --text-lg / --text-xl),之後所有元件只引用 token,不再手填數字。 - 把文字分三層落地:primary(深色 + Semibold)、secondary(一般內文)、tertiary(中灰 + 較小),為每層寫死字級/字重/顏色組合並全站共用。
- 檢查每個文字區塊的行高:內文設約 1.5、標題設 1.1–1.25,全部改用無單位數值;凡是用固定 px 行高的地方一律替換。
- 給所有長內文容器加
max-width: 65ch(中文可用約 40ch 或 600–700px),用瀏覽器縮放實測每行字元數是否落在 45–75。 - 把主要標題改成流體字級,例如
clamp(1.75rem, 1.25rem + 2vw, 3rem),在手機與大桌機各檢查一次,確認不爆版也不過小。 - 用對比檢測工具(如 DevTools 或 contrast checker)掃過所有文字/背景組合,把內文低於 4.5:1、大字低於 3:1 的顏色調到合格。
🔗 延伸學習
- Line length | Butterick’s Practical Typography
- Typography in ten minutes | Butterick’s Practical Typography
- Generating font-size CSS Rules and Creating a Fluid Type Scale | Modern CSS
- font-size | MDN Web Docs
💬 問 AI
我在設計一個 [產品類型,例如:內容型部落格 / SaaS 儀表板 / 行銷 landing page],
目前的排版問題是 [具體症狀,例如:標題內文分不出階層、內文一整片很難讀、手機上大標爆版]。
請幫我:
1. 依內容型態建議一組 type scale(基準字級 + 比例 + 五到七階的實際數值)。
2. 給出內文的行高、行長(max-width)與三層文字(primary/secondary/tertiary)的字級/字重/顏色建議。
3. 為主要標題寫一段 clamp() 流體字級,並說明 min/preferred/max 各自的考量與無障礙注意事項。