text layout on Web

看一些書的筆記。

設計的關鍵則

  • 中英文間距一般為 .25em
  • 行距要照每行字數來調整。行寬越長、行距也越大。
    • 每行 20-30 中文字時,line-height: 150%
    • 每行 30-40 中文字時,line-height: 170%
  • 每排字數:最多 40 字左右
  • 調整文字、使其易讀的步驟:
    1. 調整行距:先依據字數設定對應值,再微調
    2. 設定字距:
      • 對英文來說是 word-spacing,對中文來說是 letter-spacing。
      • 但瀏覽器並不會針對文字不同而個別套用設定,所以真的要混用的話可能要用 <span lang="en"> 這種東西來包英文,再以 *[lang="en"] 的方式來設 letter-spacing: 0;
    3. 變換字型 - 幾家動態嵌入字型服務:
      • Google Fonts Dictionary - 免費(自由字體),可下載,沒有中文字,沒有 Dynamic Subsetting 技術
      • Fonts.com Web Fonts - 有免費版,多國文字、含 Dynamic Subsetting 技術,但讀取速度不夠快。
Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明