排版者應(yīng)像手藝人一樣遵循一條原則：做好自己的工作并隱于無形

關(guān)于

網(wǎng)頁上百分之九十五的信息是「文字」，大多數(shù)人瀏覽網(wǎng)頁的狀態(tài)就是閱讀，也就是你目前正在做的事情. 因此作為一名前端工程師，讓文字更好地在網(wǎng)頁顯示，是一件極其重要的工作.

字體排印有兩種形式，一種稱為 Creative Typography，另一種稱為 Technical Typography. 前者傾向于設(shè)計，比如選擇的字體表達(dá)的情緒，字間距的設(shè)定帶來的視覺影響. 而后者更傾向于技術(shù)，以一套有跡可循的規(guī)則進(jìn)行應(yīng)用，比如實現(xiàn)「齊頭尾」如何避免中西文混排造成的字間距拉伸，以及選擇什么樣的 font-family 可以在多平臺上最優(yōu)顯示等等.

本文主要圍繞 Technical Typography 進(jìn)行討論.

選擇字體

在 Web 上應(yīng)用字體，是一門技術(shù)，同時也是一門藝術(shù). 由于計算機(jī)歷史發(fā)展的原因，西文有大量優(yōu)秀的字體可供選擇，可對于中文來說就是一項挑戰(zhàn). 主流操作系統(tǒng)提供的本地中文字體極少，另一方面中文字體組成的特殊性，其體積過于龐大，無法良好地使用 webfont. 所以編寫健壯的 font-family 是一件需要深思熟慮的事情.

以下列出各種平臺下合適的中西文字體：

• 桌面端 Mac, Windows, Linux 上適合網(wǎng)頁顯示的優(yōu)秀中文字體

• 移動端 iOS, Android 上適合網(wǎng)頁顯示的優(yōu)秀中文字體

• 主流操作系統(tǒng)上適合網(wǎng)頁顯示的優(yōu)秀西文字體

拋開宋/明體長時間作為系統(tǒng)默認(rèn)字體，所產(chǎn)生的審美疲勞，宋/明體相比黑體是更合適作為內(nèi)文字體. 大多的宋/明體針對內(nèi)文設(shè)計，橫細(xì)直粗，造型方正，筆畫在小字號的情況下，不會糊在一起，給人一種素雅的感覺. 而黑體筆畫粗壯有力，引人注目，更適合作為標(biāo)題使用.

但大部分人已經(jīng)習(xí)慣在網(wǎng)頁上閱讀黑體，以及宋/明體在字重過大的情況下，顯示效果還是不太理想. 所以內(nèi)文默認(rèn)提供黑體，可選擇性的切換宋/明體.

按照以上表格提供的中文字體，為此我為內(nèi)文和標(biāo)題編寫兩套 font-family. 關(guān)于這兩套 font-family 的選擇和排序，等空閑時，再寫一篇文章談下.

p { font-family: "Georgia", "Times New Roman", "Songti SC", "SimSun", serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", "Helvetica Neue", "Arial", "Hiragino Sans GB", "Noto Sans CJK SC", "Heiti SC", "Microsoft YaHei", "WenQuanYi Microhei", sans-serif; }

垂直的旋律

音階

Robert Bringhurst 在《The Elements of Typographic Style》談到字號大小之間的比例，形似于音樂中的音階. 作曲時以某個特定的音階為基礎(chǔ)，才會形成特定的風(fēng)格. 字號的排版同樣如此，有規(guī)律的字號變化，才會形成特定的排版風(fēng)格.

將內(nèi)文以 16px 作為字號  

標(biāo)題 h1, h2, h3, h4, h5, h6 以 16px 作為字號基礎(chǔ)，按同比例的遞減

p  { font-size: 16px; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5, h6 { font-size: 1.2em; }

節(jié)拍

此外，Robert Bringhurst 還談到版式中的空間就像音樂中的時間(Space in typography is like time in music)，言下之意，把握間距（行高）就如把握節(jié)拍. 節(jié)拍是對時間的分割，倘若搶拍便失去節(jié)奏. 文字的間距（行高）亦是對空間的分割，不一致間距（行高）比例，便會失去「垂直的旋律」.

將內(nèi)文以 1.7em 作為行高

標(biāo)題 h1, h2, h3, h4, h5, h6 以 1.5em 作為行高.

p { line-height: 1.7em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5em; }

段首縮進(jìn) VS 段落間距

段落分隔對于中文排版而言也是特別重要，主要以「段首縮進(jìn)」和「段落間距」兩種方式表現(xiàn)，它們的唯一目的就是將段落分隔.

「段首縮進(jìn)」主要用于印刷書籍，節(jié)省縱向空間，保持文本連貫，但一般在網(wǎng)頁上的閱讀速度較快，會使文字過于密集產(chǎn)生壓力. 

相反「段落間距」主要用于網(wǎng)頁，充分利用網(wǎng)頁無限的縱向空間，保障文本塊的整潔，同時給予長篇閱讀休息的間隙. 

所以一般網(wǎng)頁排版，會考慮選擇「段落間距」，可以設(shè)置以下屬性實現(xiàn)「段落間距」.

p { margin-bottom: 1.7em; }
h1, h2, h3, h4, h5, h6 {
  margin-top: .7em;
  margin-bottom: 0.2em;
}

對齊

漢字的方塊性質(zhì)構(gòu)成了漢字獨有的藝術(shù)美感，使其具有工整的特點，從而顯現(xiàn)出中文排版的重要原則：所有元素都是正方體. 但從二十世紀(jì)開始使用標(biāo)點后，以及中西文混排的情況越來越多，為了保證「禁則處理」和「齊頭尾」實現(xiàn)，可能需要在不同條件下進(jìn)行適當(dāng)?shù)臄嘣~處理.

「禁則」是來自日語的排版術(shù)語，主要指的就是禁止一些標(biāo)點等字符出現(xiàn)在行首或行尾的規(guī)則，大致相當(dāng)于漢語常說的「避頭尾」.

可以設(shè)置以下屬性實現(xiàn)「齊頭尾」，其中inter-ideographic意思是「通過調(diào)整單詞和字符之間的留白來實現(xiàn)兩端對齊」.

p {
text-align: justify;
text-justify: inter-ideographic;
}

但這樣的「齊頭尾」并不是完美的，主要由于技術(shù)遺留原因，在 Windows 和 Linux 上的 webkit 瀏覽器并沒有實現(xiàn) inter-ideographic 導(dǎo)致中西文混排的時候，容易出現(xiàn)過度拉伸字間距的情況.

左側(cè): inter-ideographic | 右側(cè): break-all

為此有一種不優(yōu)雅的解決方案，在極易出現(xiàn)字間距拉伸的小尺寸屏幕（手機(jī)）上使用「斷詞處理」，避免字間距拉伸，可是這樣也帶來「無視避頭尾規(guī)則」和「西文單詞斷詞」的壞毛病. 這是用一種不優(yōu)雅解決另一種不優(yōu)雅，按需抉擇吧.

可以設(shè)置以下屬性進(jìn)行「斷詞處理」

p { word-break: break-all; }

未作說明...

• 單行字?jǐn)?shù)
• 沒有斜體
• 圖片樣式
• 引用文字
• Kerning
• 有序/無序列表
• 「.」作為句號相比「?！沟膬?yōu)勢

參見：
     Technical Web Typography: Guidelines and Techniques
     Web Design is 95% Typography
     The Elements of Typographic Style
     Best Practices for Chinese Layout
     JUSTFONT BLOG
     Google
     維基百科
     知乎