字體使用指南

專業字體使用指南,包括安裝、選擇、配對,以及最佳實踐。

字體安裝指南

Windows 安裝

  1. 1. 下載字體檔案 (TTF, OTF 等)
  2. 2. 右鍵點擊字體檔案並選擇 "安裝"
  3. 3. 或將字體檔案拖至 C:\Windows\Fonts
  4. 4. 重新啟動您的應用程式以使用新字體

macOS 安裝

  1. 1. 下載字體檔案
  2. 2. 雙擊字體檔案以開啟 Font Book
  3. 3. 點擊 "安裝字體"
  4. 4. 字體將在系統範圍內可用

網頁字體安裝

對於網頁專案,使用 CSS @font-face 或網頁字體服務如 Google Fonts:

@font-face {
  font-family: 'YourFont';
  src: url('path/to/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

字體選擇原則

考慮您的受眾

選擇與您的目標受眾預期和閱讀習慣相符的字體。正式內容可能需要襯線字體,而現代介面通常與無襯線字體效果更好。

匹配您的品牌

字體應反映您的品牌個性。科技公司可能選擇乾淨的無襯線字體,而奢侈品牌可能偏好優雅的襯線字體。

考慮可讀性

確保字體在您計劃使用的尺寸上可讀。在不同情況下測試它,並在各種設備上測試。

字體配對指南

襯線 + 無襯線

一個經典組合。使用襯線字體作為標題,無襯線字體作為正文。這創造了良好的對比度和層次結構。

範例:

Georgia (襯線) + Arial (無襯線)

無襯線 + 無襯線

選擇不同重量或樣式的字體。一個用於標題,一個用於正文。確保它們互補。

範例:

Helvetica (標題) + Open Sans (正文)

字體配對提示

  • 每個專案限制為 2-3 個字體
  • 確保字體之間有足夠的對比度
  • 考慮字體重量和樣式
  • 在不同情況下測試可讀性

排版層級

創建視覺層級

標題 (H1, H2, H3)

使用較大的、較粗的字體來創建清晰的層級結構

正文文本

選擇可讀的字體,並有良好的行距

標題和標籤

使用較小的、較輕的字體來表示次要信息

常見字體使用錯誤

使用過多字體

堅持 2-3 個字體的最大值以保持一致性並避免視覺混亂。

忽略可讀性

不要為了風格犧牲可讀性。在預期尺寸下測試字體。

對比度不足

確保字體和背景顏色之間有足夠的對比度。

不一致間距

在您的設計中保持一致的行距和字距。

最佳實踐

字體使用最佳實踐

  • 始終在上下文中測試字體,然後最終確定
  • 考慮網頁字體的加載時間
  • 為網頁專案提供字體備用
  • 根據不同用途使用適當的字體重量
  • 在所有觸點上保持一致性
  • 考慮可訪問性和可讀性標準