字體排版在運作良好時是隱形的。但壞的字體選擇會讓內容難讀、損害你的信譽、增加跳出率。以下是7個區分業餘與專業設計的字體規則。
1. 最多兩種字體
一種用於標題、一種用於內文。三種或以上的字體看起來就是混亂。大型科技網站都堅持一兩種 — 跟著做。
2. 配對字體要有對比
如果標題字體是粗體裝飾性的,內文字體應該乾淨簡單。如果兩者太相似,設計感覺渾濁。好配對:襯線標題配無襯線內文,或相反。
3. 內文應該是16-18像素
再小手機用戶看不清。再大感覺幼稚。手機16像素、桌面18像素越來越普遍。
4. 行高比你想像更重要
內文需要1.5-1.7倍行高(例如16像素字體配24-27像素行高)。太緊感覺擁擠。太寬感覺脫節。做對了,閱讀變得輕鬆。
5. 一行50-75字元
研究顯示這是閱讀的最佳寬度。太寬讓眼睛疲勞。太窄感覺斷斷續續。為內容區域設定max-width。
6. 透過大小和粗細建立層次
訪客應該能瀏覽就理解結構。H1 > H2 > H3 > 內文。用大小、粗細、間距 — 不只是字體變化 — 來區分。
7. 色彩對比不可妥協
內文與背景至少需要4.5:1的對比度。淺灰色配白色是經典錯誤。使用WebAIM的對比度檢查器驗證。
免費字體資源
Google Fonts(免費、為網絡優化、易於使用)、Adobe Fonts(包含在Creative Cloud)、Fontshare(免費的專業字體)。
字體的隱藏力量
做對字體,用戶幾乎察覺不到 — 只感覺你的網站「專業」。做錯每一頁都感覺哪裡不對。
English