排版基礎知識：讓你的設計更專業
排版（Typography）是設計中最基本也最強大的元素之一。正如 Ellen Lupton 在《Thinking with Type》中所說：「排版是設計師最強大的工具。」好的排版能讓內容清晰易讀，壞的排版則會讓讀者感到困惑和疲憊。
字型的分類
了解字型分類是排版的基礎。主要的字型類別包括：
| 類別 | 特徵 | 適用場景 | 範例 |
|---|---|---|---|
| 襯線體（Serif） | 筆劃末端有裝飾 | 印刷品、長文閱讀 | Times New Roman, Georgia |
| 無襯線體（Sans-serif） | 筆劃乾淨無裝飾 | 螢幕顯示、UI 設計 | Helvetica, Arial, Roboto |
| 等寬字型（Monospace） | 每個字元等寬 | 程式碼、數據表格 | Courier, Fira Code |
| 手寫體（Script） | 模仿手寫風格 | 邀請函、品牌Logo | Pacifico, Dancing Script |
行距、字距與段落
行距（Line Height）
行距是兩行文字基線之間的距離。適當的行距能大幅提升可讀性。一般建議：
- 內文 — 行距為字體大小的 1.5-1.8 倍
- 標題 — 行距為字體大小的 1.1-1.3 倍
- 中文 — 由於字元較密，建議行距為 1.8-2.0 倍
字距（Letter Spacing）
字距是字元之間的間隔。大多數情況下，字型本身的預設字距已經夠好。但在特定場景下需要調整：
- 全大寫文字 — 增加 5-10% 的字距提升辨識度
- 大標題 — 可能需要微調（kerning）特定字元對
- 小字 — 略微增加字距改善可讀性
重點摘要：排版的黃金法則是「不要讓讀者注意到排版」。好的排版是透明的，讀者只會注意到內容本身。當排版出問題時，讀者會感到不適但往往說不出原因。
網頁排版的關鍵原則
1. 建立字型層級
Richard Rutter 在《Web Typography》中建議，一個網頁通常只需要 2-3 種字型大小的變化就能建立清晰的層級。過多的大小變化會讓頁面看起來雜亂。
2. 適當的行寬
研究顯示，最佳的行寬（measure）是每行 45-75 個字元。太窄的行會讓眼睛頻繁換行，太寬的行則讓讀者容易迷失在文字中。
3. 對比與留白
文字需要足夠的「呼吸空間」。段落之間的間距、內容區塊的邊距，都是排版的重要組成部分。
4. 響應式排版
在不同螢幕尺寸上，字體大小、行距和行寬都需要相應調整。CSS 的 clamp() 函式和相對單位（rem、em）是實現響應式排版的好工具。
Google Fonts 的使用
Google Fonts 提供了超過 1,500 個免費字型家族，是網頁設計師的重要資源。使用 Google Fonts 時的建議：
- 只載入你需要的字重（font-weight），減少載入時間
- 使用
font-display: swap避免文字閃爍（FOIT） - 考慮使用系統字型作為後備（fallback）
- 中文字型檔案較大，考慮使用子集化（subsetting）
排版與假文的關係
在排版設計的初期階段，假文扮演著重要的角色。它讓設計師可以專注於字型選擇、行距調整和視覺節奏，而不被內容的含義所干擾。使用我們的 Lorem Ipsum 產生器，可以快速取得各種長度的假文來測試你的排版設計。
立即使用 Lorem Ipsum 產生器 →結語
排版是一門既是科學又是藝術的學問。掌握基本原則後，持續觀察和練習是進步的關鍵。每個優秀的設計背後，都有精心考量的排版。
參考文獻
- Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students, 2nd Edition. Princeton Architectural Press, 2010.
- Google. "Google Fonts." Google Developers, 2024. https://fonts.google.com/
- Rutter, Richard. Web Typography: A Handbook for Designing Beautiful and Effective Digital Typography. Ampersand Type, 2017.