選擇合適的單位

  • em的缺點在於它是一個相對單位,一切都是根據其他園區浮動的,缺少一個參照物。
  • px的缺點在於會因為dpi的不同而產生不理想的視覺效果。
  • pt的缺點在於對於某些細微的調整,會因為計算結果的不同而產生差別。

因此建議在設計中,基本元素使用pt與px,其下的元素使用em來代替百分比。

每行的寬度

排版學推薦的行寬喂52~78個英文字符,30~40個中文字符。

次間距

默認的詞間距通常微0.25em。為了視覺的美觀,可以適當縮小字體較大出文本的词間距,對於使用了粗體,斜體的文本,應當適當增大詞間距。

航間距

由於英文字體存在基線,所以不應該用em來設置行間距。建議以百分比來設置行高,默認為120%。

對齊

其實這篇文章的重點是對齊。在CSS2與IE6的時代裡,有一個排版規則是「永遠不要使用左右對齊」。而現代的瀏覽器以及CSS3的調整,左右對齊的效果提高很多了。但是需要注意一些事情:

  • 有大量的英文與中文混合的時候,需要慎重使用左右對齊。
  • 純中文的情況下,最好的情況是保證字號加間距是欄寬的整數倍。
  • 純英文的情況下,在句尾斷開單詞并自動增加省略號,可以用CSS3的hyphenation或是這里的js腳本。
  • 字體的選擇真心是一個學問,目前我只知道一些比較安全的字體,而英文的花體字體用使用Google web font,缺點是需要一定的載入速度。中文字體還在積累,主要方法是多看看排版發燒友經常使用什麼字體。