排版者應像手藝人一樣遵循一條原則:做好自己的工作并隱于無形.
關于
網(wǎng)頁上百分之九十五的信息是「文字」杆麸,大多數(shù)人瀏覽網(wǎng)頁的狀態(tài)就是閱讀褒脯,也就是你目前正在做的事情. 因此作為一名前端工程師,讓文字更好地在網(wǎng)頁顯示画机,是一件極其重要的工作.
字體排印有兩種形式摊沉,一種稱為 Creative Typography,另一種稱為 Technical Typography. 前者傾向于設計哲嘲,比如選擇的字體表達的情緒,字間距的設定帶來的視覺影響. 而后者更傾向于技術外邓,以一套有跡可循的規(guī)則進行應用撤蚊,比如實現(xiàn)「齊頭尾」如何避免中西文混排造成的字間距拉伸古掏,以及選擇什么樣的 font-family
可以在多平臺上最優(yōu)顯示等等.
本文主要圍繞 Technical Typography 進行討論.
選擇字體
在 Web 上應用字體损话,是一門技術,同時也是一門藝術. 由于計算機歷史發(fā)展的原因槽唾,西文有大量優(yōu)秀的字體可供選擇丧枪,可對于中文來說就是一項挑戰(zhàn). 主流操作系統(tǒng)提供的本地中文字體極少,另一方面中文字體組成的特殊性庞萍,其體積過于龐大拧烦,無法良好地使用 webfont. 所以編寫健壯的 font-family
是一件需要深思熟慮的事情.
以下列出各種平臺下合適的中西文字體:
拋開宋/明體長時間作為系統(tǒng)默認字體,所產(chǎn)生的審美疲勞钝计,宋/明體相比黑體是更合適作為內文字體. 大多的宋/明體針對內文設計恋博,橫細直粗齐佳,造型方正,筆畫在小字號的情況下债沮,不會糊在一起炼吴,給人一種素雅的感覺. 而黑體筆畫粗壯有力,引人注目疫衩,更適合作為標題使用.
但大部分人已經(jīng)習慣在網(wǎng)頁上閱讀黑體硅蹦,以及宋/明體在字重過大的情況下,顯示效果還是不太理想. 所以內文默認提供黑體闷煤,可選擇性的切換宋/明體.
按照以上表格提供的中文字體童芹,為此我為內文和標題編寫兩套 font-family
. 關于這兩套 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》談到字號大小之間的比例假褪,形似于音樂中的音階. 作曲時以某個特定的音階為基礎,才會形成特定的風格. 字號的排版同樣如此皆愉,有規(guī)律的字號變化嗜价,才會形成特定的排版風格.
將內文以 16px 作為字號
標題h1, h2, h3, h4, h5, h6
以 16px 作為字號基礎,按同比例的遞減
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é)奏. 文字的間距(行高)亦是對空間的分割瑟由,不一致間距(行高)比例搓幌,便會失去「垂直的旋律」.
將內文以 1.7em 作為行高
標題 h1, h2, h3, h4, h5, h6
以 1.5em 作為行高.
p { line-height: 1.7em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.5em; }
段首縮進 VS 段落間距
段落分隔對于中文排版而言也是特別重要晌梨,主要以「段首縮進」和「段落間距」兩種方式表現(xiàn),它們的唯一目的就是將段落分隔.
「段首縮進」主要用于印刷書籍梦谜,節(jié)省縱向空間督怜,保持文本連貫殴瘦,但一般在網(wǎng)頁上的閱讀速度較快,會使文字過于密集產(chǎn)生壓力. 相反「段落間距」主要用于網(wǎng)頁号杠,充分利用網(wǎng)頁無限的縱向空間蚪腋,保障文本塊的整潔,同時給予長篇閱讀休息的間隙. 所以一般網(wǎng)頁排版姨蟋,會考慮選擇「段落間距」屉凯,可以設置以下屬性實現(xiàn)「段落間距」.
p { margin-bottom: 1.7em; }
h1, h2, h3, h4, h5, h6 {
margin-top: .7em;
margin-bottom: 0.2em;
}
對齊
漢字的方塊性質構成了漢字獨有的藝術美感,使其具有工整的特點眼溶,從而顯現(xiàn)出中文排版的重要原則:所有元素都是正方體. 但從二十世紀開始使用標點后悠砚,以及中西文混排的情況越來越多,為了保證「禁則處理」和「齊頭尾」實現(xiàn)堂飞,可能需要在不同條件下進行適當?shù)臄嘣~處理.
「禁則」是來自日語的排版術語灌旧,主要指的就是禁止一些標點等字符出現(xiàn)在行首或行尾的規(guī)則绑咱,大致相當于漢語常說的「避頭尾」.
可以設置以下屬性實現(xiàn)「齊頭尾」,其中inter-ideographic意思是「通過調整單詞和字符之間的留白來實現(xiàn)兩端對齊」.
p {
text-align: justify;
text-justify: inter-ideographic;
}
但這樣的「齊頭尾」并不是完美的枢泰,主要由于技術遺留原因羡玛,在 Windows 和 Linux 上的 webkit 瀏覽器并沒有實現(xiàn) inter-ideographic 導致中西文混排的時候,容易出現(xiàn)過度拉伸字間距的情況.
為此有一種不優(yōu)雅的解決方案稼稿,在極易出現(xiàn)字間距拉伸的小尺寸屏幕(手機)上使用「斷詞處理」,避免字間距拉伸讳窟,可是這樣也帶來「無視避頭尾規(guī)則」和「西文單詞斷詞」的壞毛病. 這是用一種不優(yōu)雅解決另一種不優(yōu)雅让歼,按需抉擇吧.
可以設置以下屬性進行「斷詞處理」.
p { word-break: break-all; }
更多詳情,可以移步到我個人主頁上的原文:
網(wǎng)頁字體排印指南