字體排版

網頁功能： font-size rem em 單位 line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min()、max() 和 clamp() 可視區域單位

整體最佳做法

  • line-height 請使用不含單位的數字 (例如 1.5)，確保字型大小繼承時能相對縮放。
  • 使用 overflow-wrap: break-word (或 anywhere) 包含長網址。
  • 請勿使用 px 設定字型大小。建議使用 rem 遵循使用者的瀏覽器字型大小偏好設定 (根字型大小)，或使用 em/百分比調整內容大小。

可讀性

  • 避免過長的文字行：段落區塊寬度上限為 80 個字元。
  • 避免文字間距過大：避免使用 text-align: justify，因為這會使文字難以閱讀。如果必須使用，請與 hyphens: auto 搭配，避免字詞之間出現過多空白。
  • 避免使用華麗字型：主要閱讀內容請勿使用草寫字體。
  • 不要使用全大寫強調內容：建議使用粗體強調視覺效果，並在強調語意時使用 <em>/<strong>。
  • 限制整體強調效果：如果到處都強調，強調效果就會失去意義，因此請只在需要改變內容閱讀方式的地方套用強調效果。
  • 支援使用者縮放偏好設定：允許使用者將文字放大至 200%，且不會遺失內容或功能。
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

文字換行

  • 使用 text-wrap: balance 讓標題和類似標題的內容 (例如 <th>) 達到平衡
  • text-wrap: pretty 適用於長篇內文 (段落、引用區塊等)
  • 請謹慎使用 text-wrap: balance 或 text-wrap: pretty，請勿將其套用至 *，因為這會產生效能成本。
  • 請避免在具有可見方塊 (背景、邊框、陰影等) 的元素上使用 text-wrap: balance，因為這不會變更容器的寬度，只會影響文字在該寬度內的文字換行方式。這可能會在容器結尾留下空白空間，通常不建議這麼做。

回應式字體排版

  • 建議在 clamp() 中結合可視區域相對單位和字型相對單位，讓字型大小隨可視區域大小調整，同時確保字型大小保持在所需範圍內。例如 clamp(2rem, 1rem + 5vw, 4rem)。調整可視區域相對單位和字型相對單位的比例，控制字型大小變更的速度。
  • 請勿單獨使用 vw 設定字型大小，而不使用 clamp()，因為這可能會導致文字在極端螢幕上縮放得太小或太大。