為什麼排版如此重要

用戶掃描一個網站，在最初的 0.05 秒就形成第一印象，而文字排版佔了這個印象的很大比例。

好的網站排版讓内容「自然流入」閱讀者的眼睛，讀者幾乎感覺不到字型和排版的存在——只感受到內容本身。

差的排版則讓讀者感覺「有些不對勁」，即使他們說不清楚哪裡不好。常見的排版問題：字型太多（超過 2-3 種）、行距太窄（文字擠在一起）、字重使用不一致（到處都是粗體）。

選擇字型的三個思考方向

1. 字型傳達的情感必須和品牌一致

每種字型都有特定的視覺情感調性：

襯線體（Serif）：如 NotoSerif、Georgia、Playfair Display——傳達穩重、傳統、文學感、高端。適合法律、金融、高端品牌、出版。

無襯線體（Sans-serif）：如 Noto Sans TC、Inter、Geist——傳達現代、乾淨、技術感、親近。適合科技、新創、數位服務、年輕品牌。

展示字型（Display）：如各種手寫風格、裝飾體——個性強烈，適合用在標題或品牌名稱，不適合內文大量使用。

2. 網站字型要選擇螢幕可讀性高的

專為印刷設計的字型在螢幕上未必好看。選擇字型時，建議選用有「hinting」優化（為螢幕顯示優化過的字形邊緣處理）的字型版本。

Google Fonts 提供的字型大多有螢幕優化版本，而且完全免費。

台灣繁體中文網站常用字型：

  • Noto Sans TC：最常用的無襯線繁體中文字型，乾淨易讀
  • Noto Serif TC：對應的襯線版本，質感更加文學氣息
  • LXGW WenKai TC：帶有手寫感的開源字型，個性較強

3. 一個網站最多使用 2-3 種字型

超過 3 種字型通常讓版面看起來凌亂。

最常見的組合方式：

  • 英文展示字型（用於標題） + 繁體中文字型（用於內文和導航）
  • 1 種標題用字型 + 1 種內文用字型（最簡潔的方式）

字型大小的設定原則

建立明確的字型層次（Type Scale）

不要隨意設定 18px、23px、16px 這樣沒有系統的字型大小，而是用一套有規律的比例關係。

常見的比例尺：1.25（小幅放大）或 1.333（四分之一音程）。

以基礎字型 16px 為起點，按 1.25 比例：

  • 內文（base）：16px
  • 小標（sm）：13px
  • 段落標題（lg）：20px
  • 區塊標題（xl）：25px
  • 頁面大標（2xl）：31px
  • 英雄大字（3xl）：39px

Tailwind CSS 的預設字型比例就近似於此，不需要手動計算。

中文內文字型建議 16-18px

中文字的複雜度較高，在手機螢幕上過小的中文字非常難讀。繁體中文的網站內文，建議至少 16px，如果是大量閱讀的部落格，17-18px 體驗更好。

英文小字別小於 12px

用於版權說明、免責聲明、注意事項的小字，最小 12px，否則在大多數螢幕上難以辨識。

行距（Line Height）

行距是影響可讀性最容易被忽略的因素。

太窄的行距（1.2-1.3 倍）：文字行與行之間擠在一起，閱讀時眼睛容易「跑錯行」，疲勞感強。

太寬的行距（1.8 倍以上）：閱讀節奏被打斷，視線從行尾移動到下一行首需要更大幅度的移動。

適中的行距：

  • 英文內文：1.5-1.6 倍
  • 中文內文：1.7-1.85 倍（中文字比英文密集，需要稍多的行距）
  • 標題（通常較大，行距可以收緊）：1.2-1.4 倍

字重（Font Weight）的使用原則

字重從 100（極細）到 900（極粗）。使用字重製造視覺層次，而不是靠大小或顏色。

一般網站的常見用法：

  • 正文（Regular）：400
  • 導航、按鈕：500（Medium）或 600（Semi-bold）
  • 強調重點、小標題：600 或 700
  • 主要品牌標語、英雄大字：700 或 800

不要把整段文字都設為粗體。粗體的作用是強調某些特別重要的文字，如果全部都粗，等於沒有強調，只是讓頁面看起來很「沉重」。

實作建議：從 Tailwind 的預設值開始

對於剛接觸排版設計的開發者，Tailwind CSS 的預設排版設定（text-base、leading-normal 等）是個很好的起點。

進階調整建議：把中文內文的行距設為 leading-relaxed（1.625）到 leading-loose（2），大多數情況下比預設值的 leading-normal（1.5）更舒適。

好的排版需要用眼睛觀察，多看設計精良的網站（如 Linear、Vercel、Framer 的官網），你的排版品味自然會提升。