原文來自超級(jí)產(chǎn)品經(jīng)理
https://imspm.com/
betsey：本文是站在一個(gè)網(wǎng)頁設(shè)計(jì)師的角度什荣，所寫的關(guān)于最佳字體排版實(shí)踐的手冊(cè)，包括字體排版設(shè)計(jì)怀酷、Web 字體稻爬、Web 樣式指導(dǎo)等四個(gè)方面，而且每一章后都有擴(kuò)展閱讀幫你深入了解細(xì)節(jié)蜕依，全程高能干貨桅锄，建議閱讀。
<h4 id="-"><strong>目錄</strong></h4>
<ol>
<li>簡介</li>
<li>字體排版設(shè)計(jì)
<ul>
<li>視覺層次</li>
<li>字體排版中的格式塔原則</li>
</ul>
</li>
<li>字體
<ul>
<li>選擇字體</li>
<li>使用web字體</li>
<li>字體加載</li>
<li>OpenType的特性</li>
</ul>
</li>
<li>Web 樣式指導(dǎo)
<ul>
<li>相對(duì)大小</li>
<li>容器</li>
<li>字體尺寸</li>
<li>垂直間隔</li>
<li>顏色</li>
<li>下劃線</li>
</ul>
</li>
<li>總結(jié)</li>
</ol>
<h4 id="-"><strong>簡介</strong></h4>
字體排版絕不僅僅是使用字體那么簡單样眠，它包括了關(guān)于文字“看上去會(huì)是怎么樣友瘤？”的所有事情——例如文字的大小，行高檐束，顏色甚至文字間留白這樣的細(xì)枝末節(jié)的小事辫秧。一個(gè)好的文字排版會(huì)為你所寫的內(nèi)容定下情感基調(diào)，并且可以幫助讀者更好的理解其內(nèi)容和語境被丧。
為了讓你使用起來更像是在看一本參考書而不是說明書盟戏，本文將會(huì)非常精簡清晰绪妹，如果你想進(jìn)一步的了解更多細(xì)節(jié)，可以點(diǎn)擊查看在每一章中的“擴(kuò)展閱讀”去深入了解柿究。
這本手冊(cè)將會(huì)在GitHub上開源喂急，并且會(huì)持續(xù)更新一些最佳實(shí)踐的范例，希望你們喜歡笛求！
<h4 id="-"><strong>字體排版設(shè)計(jì)</strong></h4>
<h5 id="-"><strong>視覺層次</strong></h5>
視覺層次是一種理念廊移，它意在傳達(dá)頁面中的元素應(yīng)該依照其重要性進(jìn)行組織排版，以便讀者可以很容易的通覽整個(gè)頁面探入，找到相關(guān)的內(nèi)容狡孔。一個(gè)好的視覺層次可以引導(dǎo)讀者在閱讀時(shí)候的視覺流向。視覺層次被廣泛運(yùn)用于文字排版中蜂嗽，它構(gòu)成了文字排版設(shè)計(jì)的理論基石苗膝。
請(qǐng)看下圖的“愛麗絲夢(mèng)游仙境”的字體排版設(shè)計(jì)，它展現(xiàn)了一個(gè)清晰的視覺層次：
點(diǎn)擊這里 查看網(wǎng)頁上的實(shí)際效果
視覺層次可以被分成以下4個(gè)部分：
<ol>
<li>字體大小 & 字體重量： 設(shè)置字體大小和字體重量是兩種構(gòu)建視覺層次的最簡單的方式植旧。他們可以很容易地告訴讀者什么地方是最重要的辱揭，引導(dǎo)讀者的目光落到這里的內(nèi)容上來。只是簡單地為文字加上這兩種樣式病附，文章的重點(diǎn)便一目了然了问窃。</li>
<li>定位： 元素定位是另外的一種構(gòu)建視覺層次的方式，就像上圖中完沪，文章的標(biāo)題和作者信息通過置頂和居中表明了它們的重要性域庇。</li>
<li>字體： 通過使用有對(duì)比度的字體可以提高不同元素之間的辨識(shí)度，從而構(gòu)建視覺層次</li>
<li>顏色： 為重要的文字設(shè)置不同的顏色也是一種非常簡單的構(gòu)建視覺層次的方式覆积。然而使用這種方式的時(shí)候一定要小心听皿，因?yàn)轭伾臑E用可能會(huì)造成重點(diǎn)部分辨識(shí)度的降低。</li>
</ol>
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Visual Hierarchy： How Well Does Your Design Communicate?</li>
<li>Creating Exciting And Unusual Visual Hierarchies</li>
</ul>
<h5 id="-"><strong>字體排版中的格式塔原則</strong></h5>
格式塔原則宽档， 或格式塔法則尉姨， 是一種構(gòu)建感性認(rèn)知的規(guī)律。當(dāng)我們觀察這個(gè)世界的時(shí)候吗冤，我們通常會(huì)意識(shí)到构灸，一個(gè)復(fù)雜的場景是由多個(gè)在某些背景之上的物體構(gòu)成的谬返，而這些物體則是由更小的一些物體構(gòu)成的，依此循環(huán)下去。<cite></cite>
在字體排版中我們需要理解的兩個(gè)很重要的格式塔原則就是“距離原則”和“相似原則”路捧。.
<strong>距離原則</strong>
為了更好地掌握元素定位的方法备籽，了解距離原則是很重要的绸硕。距離原則表明钠署，人們會(huì)將靠得近的物體視為有關(guān)聯(lián)的物體，反之，隔得比較遠(yuǎn)的物體將會(huì)被看成屬于不同類別声旺。
點(diǎn)擊此處查看原圖
在字體排版設(shè)計(jì)中笔链，“距離”指的是通過設(shè)置行高、內(nèi)間距和外間距所制造出來的留白空間腮猖。在兩段不同的段落之間應(yīng)該留有明顯的并且易于區(qū)分的留白間隔鉴扫，請(qǐng)看下面的例子：
注意啦，你覺得應(yīng)該把內(nèi)容相關(guān)的部分都擠到一個(gè)很小的空間中去嗎澈缺？當(dāng)然不是這樣坪创，自由隨意的留白也是很重要的。距離原則告訴我們姐赡，只需要為那些沒有關(guān)系的段落之間額外的加上一些易于區(qū)分的留白就可以了
<strong>相似原則</strong>
格式塔的相似原則告訴大家莱预，看起來很像的東西會(huì)被認(rèn)為是一類的東西。舉個(gè)例子项滑，如果所有可點(diǎn)擊的文字被設(shè)置為天藍(lán)色依沮，那么讀者就會(huì)認(rèn)為文章中所有天藍(lán)色的文字內(nèi)容都是可以點(diǎn)擊的。
在字體排版中枪狂，相似原則就意味著危喉，擁有同樣功能的元素應(yīng)該在樣式上保持一致。如果兩組元素的功能相似的話州疾，那么它們也應(yīng)該看起來很像才對(duì)辜限。例如，兩篇同為博客帖子的文章應(yīng)該看起來很像孝治。而相反的列粪，兩個(gè)功能不相同的元素也應(yīng)該看起來不像。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Gestalt Theory in Typography & Design Principles</li>
<li>Proximity谈飒， Uniform Connectedness & Good Continuation</li>
</ul>
<h4 id="-"><strong>字體</strong></h4>
<h5 id="-"><strong>選擇字體</strong></h5>
選擇字體是一個(gè)具有創(chuàng)造性和情感的過程。不同的字體可以傳達(dá)不同的情感态蒂，你可以盡情挑選一個(gè)合適的字體讓你的文字感情變得豐沛起來杭措。
<ul>
<li>首先為你的文字的正文挑選一個(gè)合適的字體，當(dāng)你需要搭配不同字體的時(shí)候钾恢，記得要保持正文字體的不變手素，然后試著依據(jù)這個(gè)字體選擇和它相搭配的其他字體。</li>
<li>使用一些例如TypeTester 和 TypeCast 這一類的工具會(huì)讓你進(jìn)行字體選擇的時(shí)候輕松一些瘩蚪。</li>
<li>從他人處獲得靈感! Fonts In Use提供了大量的優(yōu)秀的字體搭配范例泉懦。</li>
<li>有些字體本來就是為用作大標(biāo)題而設(shè)計(jì)的，而有些字體天生就只適合那些小屏幕疹瘦，你要依照每個(gè)字體的“天性”去使用它們崩哩。你可以在WebType 上面找到對(duì)于不同字體而言合適的尺寸。此外 TypeKit也標(biāo)明了其上的字體是適合標(biāo)題或者是正文。</li>
</ul>
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Selecting Typefaces For Body Text</li>
<li>Five Principles For Choosing And Using Typefaces</li>
<li>Best Practices For Combining Typefaces</li>
</ul>
<h5 id="-web-"><strong>使用web字體</strong></h5>
我們使用以下的格式來聲明引入的web字體文件：
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue-Light.eot');
src： url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype')邓嘹，
url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2')酣栈，
url('/assets/fonts/HelveticaNeue-Light.woff') format('woff')，
url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype');
font-weight： 300;
font-style： normal;
}
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue-Bold.eot');
src： url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype')汹押，
url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2')矿筝，
url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff')，
url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype');
font-weight： bold;
font-style： normal;
}
@font-face {
font-family： 'Helvetica Neue';
src： url('/assets/fonts/HelveticaNeue.eot');
src： url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype')棚贾，
url('/assets/fonts/HelveticaNeue.woff2') format('woff2')窖维，
url('/assets/fonts/HelveticaNeue.woff') format('woff')，
url('/assets/fonts/HelveticaNeue.ttf') format('truetype');
font-weight： normal;
font-style： normal;
}</pre>
<p>為了達(dá)到最大程度上的兼容妙痹，我們建議使用上面列出的格式陈辱。或者细诸，只使用 woff2 和 woff也會(huì)支持大部分的現(xiàn)代瀏覽器沛贪。
你需要為每個(gè)列出來的格式提供一個(gè)相應(yīng)的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator震贵，這樣你就可以在只有一個(gè)字體文件的情況下利赋，將其轉(zhuǎn)換成不同的文件格式。
盡可能的壓縮你的字體文件猩系。 點(diǎn)擊這里 查看更多信息媚送。
將多個(gè)同源字體文件（細(xì)體、常規(guī)寇甸、半粗體塘偎、粗體等等）合并成一個(gè)font-family， 盡量不要為每個(gè)字體都起一個(gè)新的font-family的名字拿霉。
或者吟秩，你也可以通過線上字體資源服務(wù)，如Google Fonts 或者 Typekit引入你想要的字體绽淘。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Further Hardening Of The Bulletproof Syntax</li>
<li>FontSquirrel： How To Use The Generator</li>
</ul>
<h5 id="-"><strong>加載字體</strong></h5>
在你引入的字體被渲染出來之前涵防，他們需要先進(jìn)行加載。下面是三種在加載的時(shí)候可能會(huì)發(fā)生的事情：
<ol>
<li>引入的字體沒有被識(shí)別出來沪铭，字體應(yīng)用了備用字體壮池。</li>
<li>引入的字體雖然被識(shí)別出來但是沒有加載，他需要在下載完成之后才會(huì)被應(yīng)用杀怠。</li>
<li>引入的字體被成功識(shí)別并迅速應(yīng)用椰憋。</li>
</ol>
場景1只發(fā)生在你嘗試使用一個(gè)不存在的字體，或者聲明時(shí)候的src指向了一個(gè)壞鏈赔退， 這種情況可以并且應(yīng)該徹底避免橙依。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時(shí)候發(fā)生，也是我們喜聞樂見的票编。場景2中包含著字體加載的過程褪储，字體加載通常是難以避免的（至少是在第一次請(qǐng)求的時(shí)候），下面是幾種處理方式：
<strong>1. 文檔樣式閃爍方案 （FOUT）</strong>
FOUT是指網(wǎng)頁會(huì)在切換到合適的網(wǎng)頁字體之前慧域，使用默認(rèn)或者備選字體顯示文字鲤竹。這種情況的出現(xiàn)是因?yàn)橹挥挟?dāng)HTML和CSS都被下載完成之后，字體請(qǐng)求才會(huì)發(fā)出昔榴。這就意味著辛藻，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段“空檔”時(shí)間。 FOUT 算是對(duì)大部分的網(wǎng)頁而言的最佳選擇互订，主要是其他的選擇也許更糟吱肌。如果使用得到的話，F(xiàn)OUT 很難被用戶察覺出來仰禽。
<strong>2. 不可見文本閃爍方案（FOIT）</strong>
很多年前氮墨，一些現(xiàn)代瀏覽器開始使用一種新的技術(shù)來處理字體加載的問題 — FOIT. FOIT是指當(dāng)瀏覽器檢測(cè)到字體正在加載的時(shí)候，隱藏應(yīng)用這段字體的文字吐葵，直到字體完全下載完才將其顯示出來规揪。 然而我們應(yīng)該避免這種做法雖然這樣做從理論上看起來還不錯(cuò)，但是這會(huì)帶給那些網(wǎng)絡(luò)速度比較差的用戶十分糟糕的體驗(yàn)温峭。有可能會(huì)在最初的FOIT后出現(xiàn)FOUT猛铅， 最壞的情況可能會(huì)是這段文字將永遠(yuǎn)看不到了。
<strong>3. 白屏方案</strong>
即在字體加載完成之前凤藏，整個(gè)網(wǎng)頁都處于不可見的狀態(tài)奸忽，或者也可以采用顯示一個(gè)進(jìn)度條.我們只推薦當(dāng)FOUT 嚴(yán)重影響用戶體驗(yàn)的時(shí)候使用這種方法。 我們通常在一個(gè)網(wǎng)頁需要大面積顯示一個(gè)特定的字體的時(shí)候使用該方法揖庄，否則栗菜，F(xiàn)OUT 總會(huì)我們的第一選擇，因?yàn)椤皟?nèi)容至上”抠艾。白屏方案與 FOIT很相似苛萎， 但對(duì)于你來說，你擁有控制在什么時(shí)候給用戶展示你的內(nèi)容的自由检号，這種感覺會(huì)似乎更棒一些，不是嗎蛙酪？而且在FOIT方案中齐苛， 不可見的文本有時(shí)候會(huì)給讀者帶來困惑，而徹底的白屏（或者一個(gè)進(jìn)度條）會(huì)讓人很自然的覺得是一個(gè)正在加載的信號(hào)桂塞。
不管你是打算使用 FOUT 方案或者白屏方案凹蜂， 我們都推薦您使用Web Font Loader這個(gè)JavaScript庫. Web Font Loader 可以讓你對(duì) @font-face加以控制， 而且你也為字體加載的體驗(yàn)添加控制事件。
注意： 有一個(gè)W3C 字體加載 API也會(huì)實(shí)現(xiàn)同樣的功能玛痊，但是它現(xiàn)在的 支持不是很好_
<strong>FOUT 方案</strong>
下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了 FOUT的例子：
<noscript>
<link href='http：//fonts.googleapis.com/css?family=Lora：400汰瘫，700，400italic擂煞，700italic' rel='stylesheet' type='text/css'>
</noscript>
<style> p {
/* use fallback fonts */
}
.wf-active p {
/* styles for custom fonts */
} </style></pre>
<p>異步地使用 Web Font Loader 很重要混弥，只有這樣做才不會(huì)延誤頁面其他部位的渲染。
寫樣式的時(shí)候对省，讓你的備用字體盡可能近的靠近你的實(shí)際字體蝗拿，這樣才能最大程度的減少 FOUT造成的影響.點(diǎn)擊 這里你將會(huì)看到一系列的備選字體. 使用 這個(gè)工具你將很容易的看到備選字體和你引入的字體的對(duì)比效果.
<strong>白屏方案</strong>
下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了白屏方案的例子：
<noscript>
<link href='https：//fonts.googleapis.com/css?family=Raleway|Oswald' rel='stylesheet' type='text/css'>
</noscript>
<style> .wf-loading {
display： none;
}
.wf-active p {
/* styles for custom fonts */
}
p {
/* use fallback fonts */
} </style></pre>
<p>在這個(gè)例子里面，備選字體不需要和你引入的字體看起來很像蒿涎，因?yàn)槲覀儾粫?huì)用到 FOUT. 依照你自己的喜好去選擇備選字體吧哀托。
如果你想要用一個(gè)進(jìn)度條取代白屏，你可以使用Pace劳秋。這種方法在用戶體驗(yàn)上效果會(huì)更好一些仓手，特別是當(dāng)字體文件很大的時(shí)候。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Type Study： Choosing Fallback Fonts</li>
<li>FOUT玻淑， FOIT嗽冒， FOFT</li>
<li>Web Font Optimization</li>
</ul>
<h5 id="opentype-"><strong>OpenType 的特性</strong></h5>
OpenType 的特性可以被視為文字進(jìn)行字體排版時(shí)的可選項(xiàng)，它們被用來加強(qiáng)文字的表現(xiàn)和易讀性岁忘。
p {
font-kerning： normal;
font-variant-ligatures： common-ligatures contextual;
-moz-font-feature-settings： "kern"辛慰， "liga"， "clig"干像， "calt";
-ms-font-feature-settings： "kern"帅腌， "liga"， "clig"麻汰， "alt";
-webkit-font-feature-settings： "kern"速客， "liga"， "clig"五鲫， "calt";
font-feature-settings： "kern"溺职， "liga"， "clig"位喂， "calt";
}</pre>
<p>OpenType 特性被放置于字體之中浪耘，這就意味著對(duì)于不同的字體，會(huì)有不同的特性塑崖，在使用這些特性之前七冲，我們需要看一看我們的字體是否支持這些特性。
使用 font-feature-settings來激活 OpenType 特性. 由于目前對(duì)于這個(gè)屬性的支持不好规婆，我們需要在屬性之前加上前綴澜躺。
Kerning kern蝉稳， ligatures liga， contextual ligatures clig掘鄙， 和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用耘戚，并不支持中文哦！ )
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Caring About OpenType Features</li>
<li>Death To Typewriters</li>
<li>Web Font Optimization</li>
</ul>
<h4 id="web-style-guide"><strong>Web Style Guide</strong></h4>
<h5 id="-"><strong>相對(duì)大小</strong></h5>
盡可能的使用相對(duì)大小操漠。
html { font-size： 100% }
p { font-size： 1em }
@media (min-width： 64em) {
html {
font-size： 112.5%;
}
}</pre>
<ul>
<li>font-size： 100% 與瀏覽器的字體大小設(shè)定保持一致而不是去覆寫它收津，根據(jù)大多數(shù)的瀏覽器的默認(rèn)設(shè)置，這里也可以用1em 代替表示 16px.</li>
<li>通過改變html 的 font-size會(huì)影響到所有單位為 em和rem 的元素.如果是對(duì)于響應(yīng)式設(shè)計(jì)的網(wǎng)頁颅夺，這樣做還是比較實(shí)用的朋截。</li>
<li>用戶的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠(yuǎn).</li>
<li>對(duì)于font-size建議使用rem 和 em.</li>
<li>對(duì)于一些元素定位如margin吧黄， padding等等部服，建議使用 rem， em拗慨， 或者 % 廓八。</li>
<li>對(duì)于媒體查詢中尺寸建議使用em.</li>
<li>對(duì)于一些大的標(biāo)題字或者配有圖片的字，可以使用FitText來實(shí)現(xiàn)標(biāo)題的縮放赵抢。盡量避免使用vw 和 vh因?yàn)楝F(xiàn)在的支持還不是很好剧蹂，難于精確的配置，并且對(duì)于一些瀏覽器的字體和縮放設(shè)置并不適配 烦却。</li>
</ul>
<p><strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Type Study： Sizing The Legible Letter</li>
<li>5 Useful CSS Tricks for Responsive Design</li>
<li>REM vs EM – The Great Debate</li>
<li>PX宠叼， EM or REM Media Queries?</li>
</ul>
<h5 id="-"><strong>容器</strong></h5>
容器，或者稱為包裝其爵，指的是用來包裹一個(gè)或者多個(gè)元素的HTML元素冒冬。它將元素分組，從而更好進(jìn)行語義化摩渺、修飾以及布局简烤。
html {
box-sizing： border-box;
}
*，
*：before摇幻，
*：after {
box-sizing： inherit;
}
.container {
max-width： 67rem;
padding-left： 1.5rem;
padding-right： 1.5rem;
}</pre>
<ul>
<li>強(qiáng)烈建議使用 box-sizing： border-box. 點(diǎn)擊這里 查看更多信息横侦。</li>
<li>左/右內(nèi)間距與最大寬度聯(lián)合使用可以很容易地創(chuàng)建一個(gè)移動(dòng)端友好的容器。</li>
<li>要為容器選擇一個(gè)合適的寬度绰姻，既不能太大（因?yàn)樘蟮脑捵x者的眼睛難以聚焦）也不能太型鞑唷（這樣讀者的眼睛需要經(jīng)常移動(dòng)才可以看清）。永遠(yuǎn)記住狂芋，在進(jìn)行網(wǎng)頁字體排版的時(shí)候棵逊，沒有一個(gè)適合所有字體、尺寸银酗、行距和分辨率的鐵律辆影，你需要自己來做決定。</li>
</ul>
<p id="-"><strong>擴(kuò)展閱讀：</strong>
<ul>
<li>* { Box-sizing： Border-box } FTW</li>
<li>StackOverflow： Ideal Column Width For Paragraphs Online</li>
</ul>
<h5 id="-"><strong>字體大小</strong></h5>
使用 縮放模塊 可以幫助你決定在你的元素上面應(yīng)用怎樣的font-size .<em>縮放模塊</em>指的是依照其內(nèi)容安排的一系列比較合適的字體大小的數(shù)值黍特。
縮放模塊的說明. 點(diǎn)擊此處
<ul>
<li>我們可以在編寫CSS的一開始使用縮放模塊蛙讥，將它作為一個(gè)參考。</li>
<li>值的注意的是灭衷，盡管不同的字體有著不同的大寫字母高度和x字母高度次慢，可是大多數(shù)的模塊化縮放工具都沒有將這些考慮在內(nèi)。</li>
<li>在你的樣式表中翔曲，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中迫像。</li>
</ul>
<strong>響應(yīng)式的縮放模塊</strong>
只使用單獨(dú)的一個(gè)縮放模塊方案并不一定適合所有分辨率的設(shè)備，為了解決這個(gè)問題瞳遍，你可以依據(jù)用戶的設(shè)備的分辨率的不同提供不同的縮放方案
//Sass responsive modular scale
/*
- Modular scale
- http：//www.modularscale.com/?1.25&em&1.33&web&text
*/
$type-scale-large： (
h1： 3.911rem闻妓，
h2： 2.941rem，
h3： 2.211rem掠械，
h4： 1.663rem由缆，
p： 1.25rem
);
/*
- Modular scale
- http：//www.modularscale.com/?1.25&em&1.25&web&text
*/
$type-scale-medium： (
h1： 3.052rem，
h2： 2.441rem猾蒂，
h3： 1.953em均唉，
h4： 1.563rem，
p： 1.25rem肚菠，
);
/*
- Modular scale
- http：//www.modularscale.com/?1.1&em&1.25&web&text
*/
$type-scale-small： (
h1： 2.686rem舔箭，
h2： 2.148rem，
h3： 1.719rem蚊逢，
h4： 1.375rem层扶，
p： 1.1rem
);
$breakpoint-medium： 75em;
$breakpoint-small： 45em;
@mixin size($level) {
font-size： map-get($type-scale-large， $level);
@media (max-width： $breakpoint-medium) {
font-size： map-get($type-scale-medium时捌， $level);
}
@media (max-width： $breakpoint-small) {
font-size： map-get($type-scale-small怒医， $level);
}
}
// Example
.title {
@include size(h1);
}</pre>
<p id="-"><strong>擴(kuò)展閱讀：</strong>
<ul>
<li>More Meaningful Typography</li>
<li>The Typographic Scale</li>
</ul>
<h5 id="-"><strong>垂直距離</strong></h5>
文字間的垂直距離是由 line-height， margin奢讨， 和padding構(gòu)建出來的.
<ul>
<li>line-height 不應(yīng)該帶有單位稚叹。比較寬的容器里面文字的行高會(huì)大一些，而那些比較窄的容器里面行高相對(duì)來說小一些會(huì)比較合適拿诸。</li>
<li>為那些具有單方向的文本元素添加margin屬性扒袖，建議使用margin-bottom.</li>
<li>要遵循距離原則.</li>
</ul>
<strong>垂直節(jié)律</strong>
垂直節(jié)律是指元素之間的垂直間隔要保持一致性。這一點(diǎn)十分重要亩码，它可以帶給讀者視覺上放松的享受季率，給他們一種親近的感覺。
Image source建立垂直節(jié)律很簡單描沟。首先飒泻，確定你使用的基礎(chǔ)垂直內(nèi)間距和基礎(chǔ)垂直外間距的數(shù)值鞭光。然后，為你的容器泞遗，文字性元素或者其他相關(guān)元素的單方向的外邊距（或者內(nèi)邊距）應(yīng)用這個(gè)數(shù)值惰许。如果你需要制制造更大的間隔的話，應(yīng)用這個(gè)數(shù)值的倍數(shù)就好啦!
將基礎(chǔ)間距的數(shù)值設(shè)置成與行高相同的數(shù)值史辙，這樣你的文字就像寫在一個(gè)條格紙上那樣整齊汹买，就像我們傳統(tǒng)的印刷字體設(shè)計(jì)的那樣。然而聊倔，想要文字擁有垂直節(jié)律不一定需要按照上面的方法來做晦毙，只要你設(shè)置了一個(gè)基礎(chǔ)間距，并且使得其他間距都是由這個(gè)間距成倍的得來的耙蔑，那樣就可以了见妒。
body {
line-height： 1.4; // Base line height
}
p {
font-size： 1.25em; // Base font size
margin-bottom： 1.75rem; // Base vertical spacing： (1.4 * 1.25) = 1.75
}
h1 {
font-size： 3em;
margin-bottom： 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}
h2 {
font-size： 2em;
margin-bottom： 1.75rem;
}
h3 {
font-size： 1.5em;
margin-bottom： 1.75rem;
}
.page-container {
padding： 3.5rem 2rem; // 3.5 is double the base value
}</pre>
<pre>/* Simple Sass Implementation */
$base-line-height： 1.4;
$base-font-size： 1.25rem;
$vertical-rhythm： $base-line-height * $base-font-size;
body {
line-height： $base-line-height;
}
p {
font-size： $base-font-size;
margin-bottom： $vertical-rhythm;
}
h1 {
font-size： 3em;
margin-bottom： $vertical-rhythm * 2;
}
h2 {
font-size： 2em;
margin-bottom： $vertical-rhythm;
}
h3 {
font-size： 1.5em;
margin-bottom： $vertical-rhythm;
}
.page-container {
padding： ($vertical-rhythm * 2) 2rem;
}</pre>
<p id="-"><strong>文字底部對(duì)齊基線網(wǎng)格</strong>
文字底部對(duì)齊基線是垂直節(jié)律的一個(gè)更為嚴(yán)格的實(shí)現(xiàn)。在網(wǎng)頁中纵潦，文字通常在line-height間居中對(duì)齊.但對(duì)于較大的文字來說會(huì)比較討厭徐鹤，因?yàn)檫@樣做會(huì)導(dǎo)致在頂部和底部留有太多的空間。在傳統(tǒng)印刷的時(shí)候邀层，這個(gè)問題一般會(huì)通過讓文字對(duì)齊基線網(wǎng)格的底部得以解決返敬。
我們也可以通過為較大的文字添加一個(gè)負(fù)的margin-top和一個(gè)較小的margin-bottom，不需要使用基線網(wǎng)格而解決這個(gè)問題寥院。
圖片資源為不同的字體樣式劲赠、字體大小和分辨率添加一個(gè)底部對(duì)齊的基線網(wǎng)格并不是一個(gè)很容易的方式，所以強(qiáng)烈建議你使用一個(gè)字體排版基線庫例如 Sassline 或者 MegaType.
注意秸谢，垂直節(jié)律只是一個(gè)建議凛澎，而且基線網(wǎng)格也只是想象出來的。所以我們不需要在每個(gè)使用場合都遵循這個(gè)規(guī)律估蹄，也不用在每個(gè)元素中都去追求像素級(jí)別的完美塑煎。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Why is Vertical Rhythm an Important Typography Practice?</li>
<li>Aligning type to baseline the right way using SASS</li>
<li>Is Web Typography Completely Broken?</li>
<li>Single-direction Margin Declarations</li>
</ul>
<h5 id="-"><strong>顏色</strong></h5>
顏色可以很大程度上的增加視覺辨識(shí)度，是字體排版中一個(gè)重要的組成部分臭蚁。
<ul>
<li>不要隨心所欲的挑選顏色最铁，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進(jìn)行顏色選擇.</li>
<li>不要過度濫用一個(gè)顏色垮兑，因?yàn)檫@樣會(huì)造成辨識(shí)度的降低冷尉，同樣也不要使用很多完全不同的顏色。</li>
<li>遵循相似原則.</li>
<li>不建議使用純黑 #000 作為你的正文顏色系枪，你可以選擇一個(gè)非橙干冢灰的顏色如#333.</li>
<li>有時(shí)候，使用透明顏色比使用淺色會(huì)更好一些，如果你深入的了解雾棺，可以點(diǎn)擊這里 膊夹。</li>
<li>確保文字和背景有較大的對(duì)比度，你可以使用 這個(gè)對(duì)比度檢測(cè)工具 幫助你進(jìn)行選擇.</li>
</ul>
擴(kuò)展閱讀：
<ul>
<li>Magic Of CSS： Color</li>
<li>Google Style – Color</li>
</ul>
<h5 id="-"><strong>下劃線</strong></h5>
在印刷品里垢村，永遠(yuǎn)都不要使用到下劃線割疾，因?yàn)檫@樣做會(huì)影響文字的閱讀，重點(diǎn)是嘉栓，它很丑！Practical Typography
一般的來說拓诸，在網(wǎng)頁中下劃線也會(huì)看起來并不美好侵佃！幸運(yùn)的是， background-image 就包含一個(gè)方法奠支，它可以使得下劃線變得好看一點(diǎn)馋辈。 下面是Adam Schwartz使用Sass實(shí)現(xiàn)的下劃線的例子 ：
@mixin text-underline-crop($background) {
text-shadow： .03em 0 $background，
-.03em 0 $background倍谜，
0 .03em $background迈螟，
0 -.03em $background，
.06em 0 $background尔崔，
-.06em 0 $background答毫，
.09em 0 $background，
-.09em 0 $background季春，
.12em 0 $background洗搂，
-.12em 0 $background，
.15em 0 $background载弄，
-.15em 0 $background;
}
@mixin text-background($color-bg耘拇， $color-text) {
background-image： linear-gradient($color-text， $color-text);
background-size： 1px 1px;
background-repeat： repeat-x;
background-position： 0% 95%;
}
@mixin text-selection($selection) {
&：：selection {
@include text-underline-crop($selection);
background： $selection;
}
&：：-moz-selection {
@include text-underline-crop($selection);
background： $selection;
}
}
@mixin link-underline($background宇攻， $text惫叛， $selection){
@include text-underline-crop($background);
@include text-background($background， $text);
@include text-selection($selection);
color： $text;
text-decoration： none;
*逞刷，
*：after嘉涌，
&：after，
*：before亲桥，
&：before {
text-shadow： none;
}
&：visited {
color： $text;
}
}
/* Example usage */
a {
@include link-underline(#fff洛心， #333， #0CBF);
}</pre>
SmartUnderline 是一個(gè)簡化這個(gè)工作的庫题篷。建議你只在有鏈接的地方使用下劃線词身，這是大多是網(wǎng)站都遵循的規(guī)律，如果不這么做的話番枚，可能會(huì)引起誤解法严。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Crafting Link Underlines On Medium</li>
<li>Smarter Link Underlines For Every Website</li>
</ul>
<h4 id="-"><strong>總結(jié)</strong></h4>
恭喜你损敷，你已經(jīng)快讀完這篇手冊(cè)了。在web深啤，這種用戶可以在任何分辨率的設(shè)備上使用的媒介上進(jìn)行字體排版是及其困難的拗馒。在很多年前，當(dāng)我第一次開始設(shè)計(jì)網(wǎng)頁的時(shí)候溯街，我發(fā)現(xiàn)幾乎找不到最新的關(guān)于最佳WEB字體排版實(shí)踐的信息诱桂。很多專家發(fā)表的博客文章內(nèi)容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術(shù)應(yīng)用的細(xì)節(jié)呈昔。字體排版手冊(cè)希望可以解決這個(gè)問題挥等，并且為菜鳥們提供應(yīng)該了解的關(guān)于如何創(chuàng)建符合字體排版工業(yè)標(biāo)準(zhǔn)的全部知識(shí)。我希望這個(gè)成果可以令你滿意堤尾。
<strong>擴(kuò)展閱讀：</strong>
<ul>
<li>Butterick’s Practical Typography</li>
<li>The Elements Of Typographic Style Applied To The Web</li>
<li>Professional Web Typography</li>
</ul>
