Modular Scale / 字級的韻律
打開一個沒有設計系統的專案，常會看到這樣的 CSS：font-size: 13px、14px、15px、17px、18px、22px、24px、26px……每個數字當初都有理由，合起來卻沒有規律。結果是標題之間的差距忽大忽小，h3 和 h4 看起來差不多，某個區塊的小標又莫名比 h2 還大。
Modular scale（模數字級、比例字級）是解決這件事最常用的方法：選一個基準字級和一個比例，所有字級都是「基準 × 比例的 n 次方」。字級不再一個一個挑，而是從同一條數列裡取用。
這篇從原理講起，再談不同比例給人的感受、在手機與大螢幕上的差異、各種網站適合哪一種，最後一步一步建立一套實際可用的字級系統。
一、從活字到數列：modular scale 的來源
傳統的字級表
金屬活字時代，印刷廠不可能每種大小都鑄一套字，所以發展出一組固定的字級。Robert Bringhurst 在《The Elements of Typographic Style》裡稱為「經典字級」（the classical scale），從 16 世紀沿用至今：
6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72這組數字不是嚴格的等比數列，但有明顯的規律：小字級之間差 1 點，越大差距越大。大字之間的差距要大，眼睛才分得出來。這正是 modular scale 的核心觀察。
Bringhurst 在同一本書裡也把音樂的音程比例拿來討論版面與字級，並示範用兩組數列交錯組成字級表。
網頁上的 modular scale
2011 年 Tim Brown 在 A List Apart 發表〈More Meaningful Typography〉，把這個概念帶進網頁設計，並和 Scott Kellum 做了 modularscale.com 計算工具。之後幾乎所有設計系統的字級，都能看到它的影子。
公式只有一行：
字級(n) = 基準 × 比例ⁿ- 基準（base）：通常是內文字級，例如 16px，這是第 0 級。
- 比例（ratio）：相鄰兩級的倍數，例如 1.25。
- n：級數，往上是標題，往下（負數）是註解、圖說等小字。
以基準 16px、比例 1.25 為例：
| 級數 | 計算 | 字級 | 可能的用途 |
|---|---|---|---|
| −1 | 16 ÷ 1.25 | 12.8px | 圖說、註解 |
| 0 | 16 | 16px | 內文 |
| 1 | 16 × 1.25 | 20px | h4 |
| 2 | 16 × 1.25² | 25px | h3 |
| 3 | 16 × 1.25³ | 31.25px | h2 |
| 4 | 16 × 1.25⁴ | 39.06px | h1 |
| 5 | 16 × 1.25⁵ | 48.83px | 首頁大標 |
二、為什麼是「等比」而不是「等差」
如果每級固定加 4px（16、20、24、28、32），看起來也很整齊，為什麼要用乘法？
眼睛感受的是比例，不是差值
心理物理學有一個基本觀察：人對刺激強度的感受，大致和「相對變化」有關，而不是絕對差值。19 世紀的韋伯–費希納定律（Weber–Fechner law）描述的就是這件事；後來 S. S. Stevens 的冪次定律（Stevens’ power law）修正了細節，但「感受近似於比例」的方向沒變。
放到字級上：
- 從 12px 變 16px（+4px），差異非常明顯，大了三分之一。
- 從 60px 變 64px（+4px），幾乎看不出來，只大了不到 7%。
等差數列在小字級跳得太猛、在大字級又幾乎沒有變化。等比數列讓每一級「看起來」差一樣多，層級感才會均勻。這是 modular scale 最實在的理由，比任何美學主張都重要。
xychart-beta
title "基準 16px，不同比例在各級的字級（px）"
x-axis "級數" [-1, 0, 1, 2, 3, 4, 5]
y-axis "字級（px）" 0 --> 120
line [14.2, 16, 18, 20.2, 22.8, 25.6, 28.8]
line [13.3, 16, 19.2, 23, 27.6, 33.2, 39.8]
line [12, 16, 21.3, 28.4, 37.9, 50.6, 67.4]
line [9.9, 16, 25.9, 41.9, 67.8, 109.7, 177.4]
由下到上四條線：大二度 1.125、小三度 1.2、完全四度 1.333、黃金比例 1.618。比例越大，曲線越早往上衝；黃金比例到第 5 級已經超出圖表。
少數幾個字級，彼此之間有關係
modular scale 的第二個好處是限制。數列裡的字級有限，設計時只能從中挑選，不會出現 15px、17px 這種「差不多」的數字。所有字級來自同一個比例，彼此之間有一致的關係，版面就有一種說不出來、但感覺得到的秩序感。
三、常見比例與它們的性格
modular scale 的比例多半借用音樂的音程名稱。一個音和高八度的音頻率比是 2:1，完全五度是 3:2，完全四度是 4:3，依此類推。
要先說清楚：音樂的和諧與視覺的和諧之間，沒有已證實的對應關係。用音程命名只是方便記憶和溝通的慣例，「完全五度」的字級不會因為名字好聽而比較和諧。真正影響感受的，是比例的大小。
以基準 16px 計算，各比例的第 −1 到第 6 級：
| 名稱 | 比例 | −1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
|---|---|---|---|---|---|---|---|---|---|
| 小二度 | 16:15（1.067） | 15.0 | 16 | 17.1 | 18.2 | 19.4 | 20.7 | 22.1 | 23.6 |
| 大二度 | 9:8（1.125） | 14.2 | 16 | 18.0 | 20.2 | 22.8 | 25.6 | 28.8 | 32.4 |
| 小三度 | 6:5（1.2） | 13.3 | 16 | 19.2 | 23.0 | 27.6 | 33.2 | 39.8 | 47.8 |
| 大三度 | 5:4（1.25） | 12.8 | 16 | 20.0 | 25.0 | 31.2 | 39.1 | 48.8 | 61.0 |
| 完全四度 | 4:3（1.333） | 12.0 | 16 | 21.3 | 28.4 | 37.9 | 50.6 | 67.4 | 89.9 |
| 增四度 | 1:√2（1.414） | 11.3 | 16 | 22.6 | 32.0 | 45.3 | 64.0 | 90.5 | 128.0 |
| 完全五度 | 2:3（1.5） | 10.7 | 16 | 24.0 | 36.0 | 54.0 | 81.0 | 121.5 | 182.2 |
| 黃金比例 | 1:1.618 | 9.9 | 16 | 25.9 | 41.9 | 67.8 | 109.7 | 177.4 | 287.1 |
小比例：1.067–1.125（小二度、大二度）
感受：平穩、密集、克制。相鄰兩級的差異小，有時要搭配字重或顏色才分得出來。
- 優點：可以排出很多層級而不失控，適合資訊密度高、標題不該搶戲的介面。
- 缺點：層級不明顯，讀者掃視時抓不到重點；若只靠字級區分，h4 和 h5 幾乎一樣。
- 適合：後台、儀表板、文件網站、表單多的應用程式介面、手機上的介面文字。
中等比例：1.2–1.25（小三度、大三度）
感受：均衡、清楚、可靠。標題明顯比內文大，但不會壓過內容。
- 優點：最萬用；四到五個標題層級都能清楚分辨，最大字級也不會超出手機畫面。
- 缺點：個性不強，比較「安全」；在大螢幕上，大標題的氣勢可能不夠。
- 適合：部落格、新聞、知識型內容、大多數企業網站。很多設計系統的預設值落在這個範圍。
偏大比例：1.333–1.414（完全四度、增四度）
感受：有編輯感、戲劇性，標題和內文的對比強烈，像雜誌。
- 優點：層級一眼就清楚，大標題有存在感，適合用版面本身塑造風格。
- 缺點：能用的級數少，第 6 級已經接近 90–128px；小字級下降得快，第 −1 級可能太小（16px 基準時只剩 11–12px）。
- 適合：作品集、雜誌風格的文章、品牌網站、以閱讀為主但想要個性的部落格。
增四度（√2）和 A 系列紙張的長寬比相同，與印刷品或 A4 版面搭配時有一致性。
大比例：1.5–1.618（完全五度、黃金比例）
感受：海報式、強烈、宣言式。少數幾個字級就有極大的反差。
- 優點：極強的視覺衝擊；適合只有「大標」和「內文」兩層的版面。
- 缺點：可用級數極少；第 4 級就超過 80–110px，在手機上不可能使用；中間層級（h3、h4）很難安排。
- 適合：形象網站的首屏、活動頁、簡報、海報，通常只用在一個區塊，不適合整站。
關於黃金比例
黃金比例常被說成「最美的比例」，但證據沒那麼強。費希納在 1876 年做過矩形偏好實驗，認為受試者偏好接近黃金比例的矩形；後續研究的結果並不一致，偏好往往受實驗方法、選項排列和文化影響。用在字級上，它的實際效果就是「一個很大的比例」，和 1.6 沒有可以察覺的差別。
選黃金比例沒有問題，但理由應該是「我需要很強的對比」，而不是「它天生比較美」。
四、比例背後的視覺心理
字級比例影響的不只是大小，還有讀者對內容的整體印象。下面是設計上常見的觀察，可以當作選擇的參考：
| 面向 | 小比例（≤ 1.2） | 大比例（≥ 1.333） |
|---|---|---|
| 第一印象 | 冷靜、專業、工具感 | 自信、有主張、戲劇性 |
| 閱讀節奏 | 連續、均勻，適合長時間閱讀與操作 | 有明顯的停頓與段落感，像翻雜誌 |
| 掃視 | 需要靠字重、顏色、留白輔助 | 只靠字級就能抓到結構 |
| 資訊密度 | 一個畫面能放更多內容 | 標題占掉大量空間，內容往下推 |
| 品牌語氣 | 平實、可信、低調 | 鮮明、前衛、情緒化 |
幾個值得注意的現象：
- 對比會被「用量」稀釋。大比例只用在一個大標題時很有力量；每個區塊都放大標題，反而沒有重點。
- 層級要靠多個維度建立。字級、字重、顏色、大小寫、字距、留白都能區分層級；字級比例越小，越需要其他維度幫忙。
- 大字要收緊。字級越大，字距和行高看起來越鬆。大標題通常要把行高降到 1.1–1.3，西文可以略收字距；內文的行高則維持 1.5 以上（中文 1.7–2）。
- 小字是比例的隱藏成本。比例越大，往下的級數下降越快；圖說、註解、表格這些小字很容易小到難以閱讀。可以讓小字級另外處理，或用半級補上（見第七節）。
五、不同裝置與螢幕大小
同一個比例，放在不同大小的螢幕上效果完全不同。
為什麼手機要用較小的比例
假設桌面版用完全四度、基準 16px，h1 是第 4 級 50.6px。放到 375px 寬的手機上，扣掉左右留白只剩約 340px，一行只能放 6–7 個中文字，標題常常斷成三四行，第一個畫面全被標題佔滿。
反過來，如果全站都用大二度，在 27 吋螢幕上 h1 只有 25.6px，大標題顯得畏縮，版面空曠沒有焦點。
所以常見的做法是：手機用較小的比例，寬螢幕用較大的比例，中間平滑過渡。
| 裝置 | 常見閱讀距離 | 建議比例 | 說明 |
|---|---|---|---|
| 手機 | 30–40 公分 | 1.125–1.2 | 畫面窄，大字很快塞滿；手機本身拿得近，內文不必太大 |
| 平板 | 35–45 公分 | 1.2–1.25 | 介於兩者之間 |
| 筆電、桌機 | 50–70 公分 | 1.25–1.333 | 空間足夠，可以有明顯的層級 |
| 大螢幕、電視 | 1 公尺以上 | 1.333 以上，內文也要放大 | 看得遠，所有字級都要變大，層級也要更強烈 |
內文字級也要考慮
基準字級要依閱讀距離和字型決定：
- 西文網站的內文常用 16–20px。x 高度（小寫字母的高度）大的字型看起來比較大，可以用小一點的字級。
- 中文是方塊字，每個字都佔滿整個字身框，同樣 16px 看起來比西文大、也比西文密。中文內文常用 15–18px，行高拉到 1.7–2。
- 中文沒有大小寫與 x 高度，層級更依賴字級和字重；但大比例的中文大標題，筆畫密度會讓它看起來很「重」，可以用較細的字重平衡。
流動字級：用 clamp() 平滑過渡
舊的做法是用 media query 在幾個斷點切換字級，視窗寬度跨過斷點時字會突然跳一下。現在可以用 CSS 的 clamp() 讓字級隨視窗寬度連續變化：
font-size: clamp(最小值, 隨寬度變化的值, 最大值);中間的值是一條直線：在最小寬度時等於手機字級，在最大寬度時等於寬螢幕字級。計算方式：
斜率 = (寬螢幕字級 − 手機字級) ÷ (最大寬度 − 最小寬度)
截距 = 手機字級 − 斜率 × 最小寬度
中間值 = 截距 + 斜率 × 100vw例如本站的 h2：手機上是小三度的第 2 級（18.72px），寬螢幕是完全四度的第 2 級（23.11px），在 320px 到 914px 之間過渡：
斜率 = (23.11 − 18.72) ÷ (914 − 320) = 0.00739 → 0.739vw
截距 = 18.72 − 0.00739 × 320 = 16.35px → 1.022rem--fs-h2: clamp(1.17rem, 1.022rem + 0.739vw, 1.444rem); /* 18.7 → 23.1px */如果不想手算，Utopia 是專門產生流動字級的工具：輸入手機與寬螢幕的基準字級與比例，直接輸出整組 clamp()。
無障礙：不要只用 vw
字級只寫 vw 時，使用者用瀏覽器放大（Ctrl +）不會讓字變大，因為 vw 只跟視窗寬度有關。這會違反 WCAG 1.4.4「文字能放大到 200%」的要求。
- 中間值一定要混合
rem和vw（如上例的1.022rem + 0.739vw），放大時rem的部分會跟著變大。 - 最小值、最大值都用
rem，尊重使用者在瀏覽器設定的預設字級。 - 最大值與最小值的差距不要太大。差距越大，
vw的部分越重，放大的效果越差；一般建議最大值不超過最小值的 2.5 倍。
六、不同類型網站的選擇
| 網站類型 | 建議比例 | 層級需求 | 注意事項 |
|---|---|---|---|
| 後台、儀表板、SaaS 介面 | 1.067–1.2 | 多但都不大 | 介面文字多半在 12–20px 之間；層級靠字重與顏色 |
| 技術文件 | 1.125–1.2 | h1–h4 都會用到 | 文件層級深，比例大會讓 h1 過大；程式碼字級要和內文對齊 |
| 部落格、知識內容 | 1.2–1.333 | h1–h3 為主 | 內文舒適最重要；標題清楚即可 |
| 新聞、雜誌 | 1.25–1.414 | 頭條、次標、內文 | 首頁需要多種大小的標題區分新聞的重要性 |
| 電商 | 1.2–1.25 | 商品名、價格、說明 | 價格與按鈕的層級常比標題重要 |
| 品牌、作品集 | 1.333–1.618 | 少而強烈 | 大標題就是設計的一部分；注意小字別太小 |
| 活動頁、首屏 | 1.5 以上 | 大標與內文兩層 | 可以只在這個區塊使用另一套比例 |
七、一步一步建立字級系統
flowchart TD
A["1. 決定內文字級<br>（基準，第 0 級）"] --> B["2. 盤點需要的角色<br>內文、h1–h4、圖說、按鈕…"]
B --> C["3. 選寬螢幕的比例<br>依網站類型與層級數"]
C --> D["4. 計算數列，把角色對到級數"]
D --> E{"最大字級放得進<br>手機嗎？"}
E -- 否 --> F["5. 手機改用較小的比例<br>用 clamp() 過渡"]
E -- 是 --> G
F --> G["6. 用真實內容測試<br>不同語言、不同裝置"]
G --> H{"有兩級太接近<br>或差太多？"}
H -- 是 --> I["加半級，或調整角色對應"]
I --> G
H -- 否 --> J["7. 寫成設計 token<br>CSS 只用角色變數"]
建立字級系統的流程。第 6 步之後通常要來回調整幾次。
步驟 1：決定基準字級
先決定內文，因為內文是讀者看得最久的文字。直接用實際的字型和內容測試，在目標裝置上用平常的距離讀幾段，再決定。不要從標題開始倒推。
步驟 2：盤點角色
列出網站實際會用到的文字角色，不要預設一定要 h1 到 h6：
- 內文、引言、表格
- 文章標題、h2、h3、h4
- 圖說、meta（日期、作者）、頁尾
- 導覽、按鈕、標籤
- 特殊的大字：首頁大標、404 頁、數據呈現
角色的數量決定需要幾級。級數越多，比例要越小，否則最大字級會失控。
步驟 3：選比例
依第六節的表格選擇寬螢幕的比例，再檢查最大的角色會落在幾級、是多少 px。最大字級合理，就繼續；太大就換小一點的比例，或讓最大的角色少用幾級。
步驟 4：把角色對應到級數
不需要每一級都用，也不需要連續使用。例如：
| 角色 | 級數 | 大三度（1.25），16px |
|---|---|---|
| 圖說、meta | −1 | 12.8px |
| 內文 | 0 | 16px |
| h4 | 1 | 20px |
| h3 | 2 | 25px |
| h2 | 3 | 31.25px |
| 文章標題 | 4 | 39.06px |
| 首頁大標 | 6 | 61.04px |
首頁大標刻意跳過第 5 級，和文章標題拉開距離，讓它成為唯一的視覺焦點。
步驟 5：手機的比例與流動字級
手機用較小的比例（通常比寬螢幕小一到兩檔，例如寬螢幕 1.333、手機 1.2），兩端用同樣的級數計算，再用 clamp() 連起來。
CSS 現在有 pow()，可以直接在 CSS 裡算比例；2023 年底起主流瀏覽器都已支援：
:root {
--base: 1rem;
--ratio: 1.25;
--fs-h3: calc(var(--base) * pow(var(--ratio), 2));
--fs-h2: calc(var(--base) * pow(var(--ratio), 3));
}
/* 手機改用較小的比例，所有字級跟著改 */
@media (max-width: 40rem) {
:root { --ratio: 1.2; }
}這種寫法易讀、好調整，但只能在斷點切換。要平滑過渡，還是用預先算好的 clamp() 值。比較實際的做法是寫一支小程式產生 CSS：
// 產生流動字級：手機與寬螢幕各自的比例，在 minVw 到 maxVw 之間線性過渡
function fluidScale({ base = 16, minRatio, maxRatio, minVw = 320, maxVw = 1280, steps }) {
const rem = (px) => +(px / 16).toFixed(4);
return Object.entries(steps).map(([name, step]) => {
const min = base * minRatio ** step;
const max = base * maxRatio ** step;
const slope = (max - min) / (maxVw - minVw);
const intercept = min - slope * minVw;
// 負級數時手機的字級反而比較大，clamp 的上下限要對調
const [lo, hi] = min < max ? [min, max] : [max, min];
const vw = +(slope * 100).toFixed(4);
const value = `${rem(intercept)}rem ${vw < 0 ? '-' : '+'} ${Math.abs(vw)}vw`;
return `--fs-${name}: clamp(${rem(lo)}rem, ${value}, ${rem(hi)}rem);`;
}).join('\n');
}
console.log(fluidScale({
minRatio: 1.2,
maxRatio: 1.333,
steps: { small: -1, h4: 1, h3: 2, h2: 3, h1: 4 },
}));注意註解裡提到的細節：負級數（比內文小的字）在手機上用較小的比例時，反而會比寬螢幕大。16 ÷ 1.2 = 13.3px，16 ÷ 1.333 = 12px。這其實是好事，手機上的小字稍大一點比較好讀。
步驟 6：用真實內容測試
數學只能給出起點，最後要用眼睛判斷：
- 放真實的內容：最長的標題、最短的標題、中英混排、數字、程式碼。
- 檢查最窄的螢幕：320px 寬時，最大的標題斷成幾行？有沒有單字或單一個中文字掉到下一行？
- 並排比較相鄰兩級：h3 和 h4 分得出來嗎？圖說和內文分得出來嗎？
- 調整的方法：兩級太接近，就讓角色跳一級；兩級差太多，就加入半級。
半級（或稱雙股數列，double-stranded scale）是在兩級之間再插入一級，等於用比例的平方根當間距。例如完全四度的半級間距是 √1.333 ≈ 1.155。這樣大比例的方案也能有細緻的中間字級，不必換掉整個比例。
Tim Brown 的原始做法是用兩個基準（例如內文 16px 和某個重要的尺寸，像是版面寬度的一部分）各自產生數列再交錯，效果類似：級數更密，但仍然有一致的比例關係。
步驟 7：寫成設計 token
最後，把字級寫成以角色命名的變數，CSS 只使用角色，不直接寫數字：
:root {
--fs-meta: …; /* 圖說、日期 */
--fs-body: …; /* 內文 */
--fs-h3: …;
--fs-h2: …;
--fs-title: …; /* 文章標題 */
}
h2 { font-size: var(--fs-h2); }
.post-meta { font-size: var(--fs-meta); }這樣換比例時只要改變數（甚至只改 --ratio），不用到處搜尋數字。用級數命名（--step-2）也可以，但以角色命名比較不容易誤用：工程師不會為了「讓它大一點」把 meta 改成 --step-1。
八、搭配行高與垂直節奏
字級系統完成後，行高與間距要跟著設計，否則字級再整齊，版面還是會亂。
- 內文行高是間距的單位。例如內文 16px、行高 1.75，一行是 28px，段落、標題的上下間距都用 28px 的倍數或一半。
- 標題的行高要依字級計算，並取整到基本行高的倍數（或半行），後面的內文才會回到同一條基線網格上。CSS 的
round()可以直接做到：
h2 {
font-size: var(--fs-h2);
line-height: 1.3; /* 不支援 round() 的瀏覽器 */
line-height: round(up, 1em * 1.3, var(--half-line)); /* 取到半行的倍數 */
}- 大字的行高比例要更小：內文 1.6–2，標題 1.1–1.3，展示用的大字可以到 1.0。
- 間距也可以用同一個比例產生（
--space-1、--space-2……），讓字級和留白都來自同一個系統。
九、實例：這個網站的字級
本站（blog.starcklin.com）用的是完全四度，以下是實際的設定與理由：
- 內文的基準是 13px。這是原本 WordPress 主題的風格：細字、行高兩倍、大量留白。字級系統裡內文不隨螢幕寬度變化，只有標題流動。
- 整體再用根字級放大：所有尺寸都是 rem，手機與平板把根字級設為 120%（內文 15.6px），兩欄版面（1056px 以上）再隨寬度放大到 150%（1440px 以上，內文 19.5px）。字級之間的比例不變，只是整套一起放大；視窗越寬字越大，不會在斷點縮回。下表是放大前的值。
- 寬螢幕每級 × 1.333、手機每級 × 1.2，在 320px 到 914px 之間用
clamp()過渡。914px 是原站兩欄版面出現的寬度。 - 用半級補足：完全四度的第 −1 級只有 9.75px，太小，所以 meta 用第 −0.5 級（手機 11.9px、寬螢幕 11.3px）；第 1 級和內文差太多，所以 h4 用第 0.5 級。
- 標題只用整數級，對應 HTML 層級：h1 第 3 級、h2 第 2 級、h3 第 1 級。首頁列表的文章標題是 h2，用第 2 級；點進文章後的標題是 h1，用第 3 級，兩者差一整級。原本文章頁標題用第 3.5 級，和列表只差半級（1.155 倍），看起來不像刻意的區分，反而像不一致，後來改成整數級。
- 大字刻意拉開：站名第 4 級（最大 41px），比文章標題大一整級；404 頁的大字第 6 級（最大 73px），跳過第 5 級。
- 行高取整到半行：標題的行高用
round()取到 13px（半行）的倍數，後面的內文回到 26px 的基線網格。
| 角色 | 級數 | 手機 → 寬螢幕 |
|---|---|---|
| meta、圖說 | −0.5 | 11.9 → 11.3px |
| 內文 | 0 | 13px |
| h4 | 0.5 | 14.2 → 15.0px |
| h3 | 1 | 15.6 → 17.3px |
| 內文 h2 | 2 | 18.7 → 23.1px |
| 列表的文章標題（h2） | 2 | 18.7 → 23.1px |
| 文章頁的標題（h1） | 3 | 22.5 → 30.8px |
| 站名 | 4 | 27.0 → 41.1px |
| 404 大字 | 6 | 38.8 → 73.0px |
開發時也做了小三度、大三度、大二度三種方案，用同一支 Python 程式產生，可以在網址加參數切換比較。實際並排看過後，選了對比最強烈、最有編輯感的完全四度。
十、常見錯誤
- 每一級都要用：數列只是候選清單。依角色挑選，跳級使用才有節奏。
- 為了數學犧牲閱讀：算出 12.8px 不代表一定要用 12.8px。可讀性永遠優先，必要時加半級或另外指定。
- 桌機和手機用同一個比例：大比例在手機上一定會出問題；小比例在大螢幕上又太平。
- 只用 vw 做流動字級：使用者無法放大文字，違反無障礙要求。
- 以為比例能解決所有層級問題：字重、顏色、留白和字級一樣重要。比例越小，越需要它們。
- 相信「神奇比例」：黃金比例和音程名稱沒有魔力。選比例的依據是內容需要多少層級、要多強的對比，以及在最小的螢幕上放不放得下。
- 忽略字型本身：同一個字級，不同字型的 x 高度、字面寬度差很多。換字型時，基準字級可能也要跟著調整。
結語
Modular scale 的價值不在數學本身，而在於它把「挑字級」這件事，從一連串零散的決定，變成一次有理由的決定：選一個基準、一個比例，剩下的都從同一條數列推導出來。
選比例時問自己三個問題：
- 這個網站需要幾個層級？
- 想要給人安靜的感覺，還是強烈的感覺？
- 最大的字級，在 320px 寬的手機上放得下嗎？
回答完，就有了起點。接著用真實內容和真實裝置去測試、微調，讓數學替你處理一致性，讓眼睛負責最後的判斷。