排版設計指南
掌握排版基礎與設計原則，提升設計專業度
排版基礎
什麼是排版？
排版是將文字進行藝術化與技術性編排，使其在展示時具備可讀性、美觀性與吸引力。內容涵蓋字體選擇、字級、行長、行距、字距等。
- 字體選擇與搭配
- 字級與間距關係
- 版面佈局與組成
- 視覺層級與可讀性
字體選擇原則
可讀性優先
選擇強調可讀性與辨識度的字體。
- 字形清晰易辨
- 適當的x高度
- 良好的字距
- 適合預期用途
情境與用途
根據內容與受眾選擇合適字體。
- 考慮內容類型
- 契合品牌個性
- 符合目標受眾偏好
- 媒介需求
字體搭配策略
對比原則
搭配具有足夠對比的字體，增強視覺層次。
襯線體 + 無襯線體
- 經典組合
- 適用於印刷與網頁
- 層級分明
- 專業形象
字重對比
- 標題用粗體
- 內文用一般字重
- 輕量字作點綴
- 清晰的視覺分隔
成功搭配範例
常見組合：
- Georgia + Arial（網頁）
- Times New Roman + Helvetica（印刷）
- Roboto + Open Sans（現代）
- Playfair Display + Source Sans Pro（優雅）
版面與間距
行長與間距
優化行長與間距，提升可讀性。
- 每行45-75字
- 行高1.4-1.6倍
- 段落間距適中
- 邊距一致
對齊與網格
利用對齊與網格系統建立結構。
- 內文左對齊
- 標題可置中
- 網格化版面
- 間距一致
視覺層級
尺寸層級
建立清晰的文字尺寸層級關係。
尺寸比例
- H1：2.5-3倍內文
- H2：2倍內文
- H3：1.5倍內文
- 內文：16px為基準
字重層級
- 標題用粗體
- 副標用中黑
- 內文用一般
- 說明用細體
層級最佳實踐
•
層級層數適中
建議3-4層，保持清晰
•
應用一致
全站層級規則一致
•
測試可讀性
確保所有文字易於閱讀
響應式排版
行動裝置考量
針對行動裝置優化排版。
- 較大觸控區域
- 簡化層級
- 增加行距
- 最佳化字級
流動式排版
實現響應式字級。
- CSS clamp() 函數
- 視窗單位
- 最小/最大字級
- 平滑縮放
精通排版設計
應用這些排版原則，打造美觀、易讀且高效的設計，清晰傳達訊息。