網(wǎng)頁字體排印指南

排版者應像手藝人一樣遵循一條原則:做好自己的工作并隱于無形.

關于

網(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 是一件需要深思熟慮的事情.

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

桌面端 Mac, Windows, Linux 上適合網(wǎng)頁顯示的優(yōu)秀中文字體
移動端 iOS, Android 上適合網(wǎng)頁顯示的優(yōu)秀中文字體
主流操作系統(tǒng)上適合網(wǎng)頁顯示的優(yōu)秀西文字體

拋開宋/明體長時間作為系統(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)過度拉伸字間距的情況.

左側: inter-ideographic 宗苍,右側: break-all

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

可以設置以下屬性進行「斷詞處理」.

p { word-break: break-all; }

更多詳情,可以移步到我個人主頁上的原文:
網(wǎng)頁字體排印指南

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末丽啡,一起剝皮案震驚了整個濱河市谋右,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌补箍,老刑警劉巖改执,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異坑雅,居然都是意外死亡辈挂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門裹粤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來终蒂,“玉大人,你說我怎么就攤上這事遥诉∧雌” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵矮锈,是天一觀的道長霉翔。 經(jīng)常有香客問我,道長苞笨,這世上最難降的妖魔是什么债朵? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮猫缭,結果婚禮上葱弟,老公的妹妹穿的比我還像新娘壹店。我一直安慰自己猜丹,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布硅卢。 她就那樣靜靜地躺著射窒,像睡著了一般藏杖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脉顿,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天蝌麸,我揣著相機與錄音,去河邊找鬼艾疟。 笑死来吩,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蔽莱。 我是一名探鬼主播弟疆,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼盗冷!你這毒婦竟也來了怠苔?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤仪糖,失蹤者是張志新(化名)和其女友劉穎柑司,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锅劝,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡攒驰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了故爵。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讼育。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖稠集,靈堂內的尸體忽然破棺而出奶段,到底是詐尸還是另有隱情,我是刑警寧澤剥纷,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布痹籍,位于F島的核電站,受9級特大地震影響晦鞋,放射性物質發(fā)生泄漏蹲缠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一悠垛、第九天 我趴在偏房一處隱蔽的房頂上張望线定。 院中可真熱鬧,春花似錦确买、人聲如沸斤讥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芭商。三九已至派草,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铛楣,已是汗流浹背近迁。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留簸州,地道東北人鉴竭。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像岸浑,于是被迫代替她去往敵國和親拓瞪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容

  • 網(wǎng)頁字體排印指南[1] 標簽(空格分隔): CSS 排版者應像手藝人一樣遵循一條原則:做好自己的工作并隱于無形. ...
    lumicinta閱讀 318評論 0 1
  • 最近產(chǎn)品組的項目網(wǎng)站到了內網(wǎng)測試階段助琐。發(fā)現(xiàn)一些頁面文章排版和編輯上的問題祭埂,這個對我們來說并不是什么新問題。簡單說就...
    黃楊ME閱讀 18,859評論 3 102
  • 一兵钮、概念 參考網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設置CSS Font知識整理總結 1.F...
    合肥黑閱讀 6,299評論 0 12
  • W8L7 1.假如你是一個移動電源/服裝/化妝品/或其他商品的商家掘譬,打算去天貓或京東開個專賣店泰演,比較一下兩個平臺你...
    d11397046d4f閱讀 373評論 0 1
  • 小花是被嚇醒的。 雖然醒了葱轩,可她還是沒敢睜眼睦焕。因為那雙手還在不緊不慢的拍著她的被子:“喂,別裝了靴拱,你都嚇尿了垃喊。” ...
    詹尹閱讀 606評論 0 3