五月天激情综合网,国产精品爱久久久久久久,亚洲狠狠婷婷

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

betsey：本文是站在一個網(wǎng)頁設(shè)計師的角度，所寫的關(guān)于最佳字體排版實踐的手冊，包括字體排版設(shè)計、Web 字體、Web 樣式指導(dǎo)等四個方面，而且每一章后都有擴(kuò)展閱讀幫你深入了解細(xì)節(jié)，全程高能干貨，建議閱讀。

簡介

字體排版絕不僅僅是使用字體那么簡單，它包括了關(guān)于文字"看上去會是怎么樣？"的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細(xì)枝末節(jié)的小事。一個好的文字排版會為你所寫的內(nèi)容定下情感基調(diào)，并且可以幫助讀者更好的理解其內(nèi)容和語境。

為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進(jìn)一步的了解更多細(xì)節(jié)，可以點擊查看在每一章中的"擴(kuò)展閱讀"去深入了解。

這本手冊將會在GitHub上開源，并且會持續(xù)更新一些最佳實踐的范例，希望你們喜歡！

字體排版設(shè)計

視覺層次

視覺層次是一種理念，它意在傳達(dá)頁面中的元素應(yīng)該依照其重要性進(jìn)行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關(guān)的內(nèi)容。一個好的視覺層次可以引導(dǎo)讀者在閱讀時候的視覺流向。視覺層次被廣泛運(yùn)用于文字排版中，它構(gòu)成了文字排版設(shè)計的理論基石。

請看下圖的"愛麗絲夢游仙境"的字體排版設(shè)計，它展現(xiàn)了一個清晰的視覺層次：

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

點擊這里查看網(wǎng)頁上的實際效果

視覺層次可以被分成以下4個部分：

字體大小 & 字體重量：設(shè)置字體大小和字體重量是兩種構(gòu)建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什么地方是最重要的，引導(dǎo)讀者的目光落到這里的內(nèi)容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目了然了。
定位：元素定位是另外的一種構(gòu)建視覺層次的方式，就像上圖中，文章的標(biāo)題和作者信息通過置頂和居中表明了它們的重要性。
字體：通過使用有對比度的字體可以提高不同元素之間的辨識度，從而構(gòu)建視覺層次
顏色：為重要的文字設(shè)置不同的顏色也是一種非常簡單的構(gòu)建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。

擴(kuò)展閱讀：

Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies

字體排版中的格式塔原則

格式塔原則，或格式塔法則，是一種構(gòu)建感性認(rèn)知的規(guī)律。當(dāng)我們觀察這個世界的時候，我們通常會意識到，一個復(fù)雜的場景是由多個在某些背景之上的物體構(gòu)成的，而這些物體則是由更小的一些物體構(gòu)成的，依此循環(huán)下去。

在字體排版中我們需要理解的兩個很重要的格式塔原則就是"距離原則"和"相似原則"。.

距離原則

為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關(guān)聯(lián)的物體，反之，隔得比較遠(yuǎn)的物體將會被看成屬于不同類別。

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

點擊此處查看原圖

在字體排版設(shè)計中，"距離"指的是通過設(shè)置行高、內(nèi)間距和外間距所制造出來的留白空間。在兩段不同的段落之間應(yīng)該留有明顯的并且易于區(qū)分的留白間隔，請看下面的例子：

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

注意啦，你覺得應(yīng)該把內(nèi)容相關(guān)的部分都擠到一個很小的空間中去嗎？當(dāng)然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關(guān)系的段落之間額外的加上一些易于區(qū)分的留白就可以了

相似原則

格式塔的相似原則告訴大家，看起來很像的東西會被認(rèn)為是一類的東西。舉個例子，如果所有可點擊的文字被設(shè)置為天藍(lán)色，那么讀者就會認(rèn)為文章中所有天藍(lán)色的文字內(nèi)容都是可以點擊的。

在字體排版中，相似原則就意味著，擁有同樣功能的元素應(yīng)該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應(yīng)該看起來很像才對。例如，兩篇同為博客帖子的文章應(yīng)該看起來很像。而相反的，兩個功能不相同的元素也應(yīng)該看起來不像。

擴(kuò)展閱讀：

Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation

字體

選擇字體

選擇字體是一個具有創(chuàng)造性和情感的過程。不同的字體可以傳達(dá)不同的情感，你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。

首先為你的文字的正文挑選一個合適的字體，當(dāng)你需要搭配不同字體的時候，記得要保持正文字體的不變，然后試著依據(jù)這個字體選擇和它相搭配的其他字體。
使用一些例如TypeTester 和 TypeCast 這一類的工具會讓你進(jìn)行字體選擇的時候輕松一些。
從他人處獲得靈感! Fonts In Use提供了大量的優(yōu)秀的字體搭配范例。
有些字體本來就是為用作大標(biāo)題而設(shè)計的，而有些字體天生就只適合那些小屏幕，你要依照每個字體的"天性"去使用它們。你可以在WebType 上面找到對于不同字體而言合適的尺寸。此外 TypeKit也標(biāo)明了其上的字體是適合標(biāo)題或者是正文。

擴(kuò)展閱讀：

Selecting Typefaces For Body Text
Five Principles For Choosing And Using Typefaces
Best Practices For Combining Typefaces

使用web字體

我們使用以下的格式來聲明引入的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;
}

為了達(dá)到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支持大部分的現(xiàn)代瀏覽器。

你需要為每個列出來的格式提供一個相應(yīng)的字體文件。推薦使用 Transfonter 或者，這樣你就可以在只有一個字體文件的情況下，將其轉(zhuǎn)換成不同的文件格式。

盡可能的壓縮你的字體文件。點擊這里查看更多信息。

將多個同源字體文件（細(xì)體、常規(guī)、半粗體、粗體等等）合并成一個font-family，盡量不要為每個字體都起一個新的font-family的名字。

或者，你也可以通過線上字體資源服務(wù)，如Google Fonts 或者 Typekit引入你想要的字體。

擴(kuò)展閱讀：

Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator

加載字體

在你引入的字體被渲染出來之前，他們需要先進(jìn)行加載。下面是三種在加載的時候可能會發(fā)生的事情：

引入的字體沒有被識別出來，字體應(yīng)用了備用字體。
引入的字體雖然被識別出來但是沒有加載，他需要在下載完成之后才會被應(yīng)用。
引入的字體被成功識別并迅速應(yīng)用。

場景1只發(fā)生在你嘗試使用一個不存在的字體，或者聲明時候的src指向了一個壞鏈，這種情況可以并且應(yīng)該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時候發(fā)生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：

1. 文檔樣式閃爍方案（FOUT）

FOUT是指網(wǎng)頁會在切換到合適的網(wǎng)頁字體之前，使用默認(rèn)或者備選字體顯示文字。這種情況的出現(xiàn)是因為只有當(dāng)HTML和CSS都被下載完成之后，字體請求才會發(fā)出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段"空檔"時間。 FOUT 算是對大部分的網(wǎng)頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，F(xiàn)OUT 很難被用戶察覺出來。

2. 不可見文本閃爍方案（FOIT）

很多年前，一些現(xiàn)代瀏覽器開始使用一種新的技術(shù)來處理字體加載的問題 — FOIT. FOIT是指當(dāng)瀏覽器檢測到字體正在加載的時候，隱藏應(yīng)用這段字體的文字，直到字體完全下載完才將其顯示出來。然而我們應(yīng)該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網(wǎng)絡(luò)速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現(xiàn)FOUT，最壞的情況可能會是這段文字將永遠(yuǎn)看不到了。

3. 白屏方案

即在字體加載完成之前，整個網(wǎng)頁都處于不可見的狀態(tài)，或者也可以采用顯示一個進(jìn)度條.我們只推薦當(dāng)FOUT 嚴(yán)重影響用戶體驗的時候使用這種方法。我們通常在一個網(wǎng)頁需要大面積顯示一個特定的字體的時候使用該方法，否則，F(xiàn)OUT 總會我們的第一選擇，因為"內(nèi)容至上"。白屏方案與 FOIT很相似，但對于你來說，你擁有控制在什么時候給用戶展示你的內(nèi)容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中，不可見的文本有時候會給讀者帶來困惑，而徹底的白屏（或者一個進(jìn)度條）會讓人很自然的覺得是一個正在加載的信號。

不管你是打算使用 FOUT 方案或者白屏方案，我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制，而且你也為字體加載的體驗添加控制事件。

注意：有一個W3C 字體加載 API也會實現(xiàn)同樣的功能，但是它現(xiàn)在的支持不是很好_

FOUT 方案

下面是一個使用 Web Font Loader 實現(xiàn)了 FOUT的例子：

<script type="text/javascript"> WebFontConfig = {
    google： { families： [ 'Lora：400，700，400italic，700italic：latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https：' == document.location.protocol ? 'https' ： 'http') +
      '：//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf， s);
  })(); </script>

<noscript>
  <link target="_blank"  rel='stylesheet' type='text/css'>
</noscript>

<style> p {
    /* use fallback fonts */
  }

  .wf-active p {
    /* styles for custom fonts */
  } </style>

異步地使用 Web Font Loader 很重要，只有這樣做才不會延誤頁面其他部位的渲染。

寫樣式的時候，讓你的備用字體盡可能近的靠近你的實際字體，這樣才能最大程度的減少 FOUT造成的影響.點擊這里你將會看到一系列的備選字體. 使用這個工具你將很容易的看到備選字體和你引入的字體的對比效果.

白屏方案

下面是一個使用 Web Font Loader 實現(xiàn)了白屏方案的例子：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script> WebFont.load({
    google： {
      families： ['Raleway'， 'Oswald']
    }
  }); </script>

<noscript>
  <link target="_blank"  rel='stylesheet' type='text/css'>
</noscript>

<style> .wf-loading {
    display： none;
  }

  .wf-active p {
    /* styles for custom fonts */
  }

  p {
    /* use fallback fonts */
  } </style>

在這個例子里面，備選字體不需要和你引入的字體看起來很像，因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字體吧。

如果你想要用一個進(jìn)度條取代白屏，你可以使用Pace。這種方法在用戶體驗上效果會更好一些，特別是當(dāng)字體文件很大的時候。

擴(kuò)展閱讀：

Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization

OpenType 的特性

OpenType 的特性可以被視為文字進(jìn)行字體排版時的可選項，它們被用來加強(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";
}

OpenType 特性被放置于字體之中，這就意味著對于不同的字體，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。

使用 font-feature-settings來激活 OpenType 特性. 由于目前對于這個屬性的支持不好，我們需要在屬性之前加上前綴。

Kerning kern， ligatures liga， contextual ligatures clig，和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！ )

擴(kuò)展閱讀：

Caring About OpenType Features
Death To Typewriters
Web Font Optimization

Web Style Guide

相對大小

盡可能的使用相對大小。

html { font-size： 100% }
p { font-size： 1em }

@media (min-width： 64em) {
  html {
    font-size： 112.5%;
  }
}

font-size： 100% 與瀏覽器的字體大小設(shè)定保持一致而不是去覆寫它，根據(jù)大多數(shù)的瀏覽器的默認(rèn)設(shè)置，這里也可以用1em 代替表示 16px.
通過改變html 的 font-size會影響到所有單位為 em和rem 的元素.如果是對于響應(yīng)式設(shè)計的網(wǎng)頁，這樣做還是比較實用的。
用戶的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠(yuǎn).
對于font-size建議使用rem 和 em.
對于一些元素定位如margin， padding等等，建議使用 rem， em，或者 % 。
對于媒體查詢中尺寸建議使用em.
對于一些大的標(biāo)題字或者配有圖片的字，可以使用FitText來實現(xiàn)標(biāo)題的縮放。盡量避免使用vw 和 vh因為現(xiàn)在的支持還不是很好，難于精確的配置，并且對于一些瀏覽器的字體和縮放設(shè)置并不適配。

擴(kuò)展閱讀：

Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM - The Great Debate
PX， EM or REM Media Queries?

容器

容器，或者稱為包裝，指的是用來包裹一個或者多個元素的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;
}

強(qiáng)烈建議使用 box-sizing： border-box. 點擊這里查看更多信息。
左/右內(nèi)間距與最大寬度聯(lián)合使用可以很容易地創(chuàng)建一個移動端友好的容器。
要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經(jīng)常移動才可以看清）。永遠(yuǎn)記住，在進(jìn)行網(wǎng)頁字體排版的時候，沒有一個適合所有字體、尺寸、行距和分辨率的鐵律，你需要自己來做決定。

擴(kuò)展閱讀：

* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online

字體大小

使用縮放模塊可以幫助你決定在你的元素上面應(yīng)用怎樣的font-size .縮放模塊指的是依照其內(nèi)容安排的一系列比較合適的字體大小的數(shù)值。

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

縮放模塊的說明. 點擊此處

我們可以在編寫CSS的一開始使用縮放模塊，將它作為一個參考。
值的注意的是，盡管不同的字體有著不同的大寫字母高度和x字母高度，可是大多數(shù)的模塊化縮放工具都沒有將這些考慮在內(nèi)。
在你的樣式表中，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中。

響應(yīng)式的縮放模塊

只使用單獨(dú)的一個縮放模塊方案并不一定適合所有分辨率的設(shè)備，為了解決這個問題，你可以依據(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);
}

擴(kuò)展閱讀：

More Meaningful Typography
The Typographic Scale

垂直距離

文字間的垂直距離是由 line-height， margin，和padding構(gòu)建出來的.

line-height 不應(yīng)該帶有單位。比較寬的容器里面文字的行高會大一些，而那些比較窄的容器里面行高相對來說小一些會比較合適。
為那些具有單方向的文本元素添加margin屬性，建議使用margin-bottom.
要遵循距離原則.

垂直節(jié)律

垂直節(jié)律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

Image source建立垂直節(jié)律很簡單。首先，確定你使用的基礎(chǔ)垂直內(nèi)間距和基礎(chǔ)垂直外間距的數(shù)值。然后，為你的容器，文字性元素或者其他相關(guān)元素的單方向的外邊距（或者內(nèi)邊距）應(yīng)用這個數(shù)值。如果你需要制制造更大的間隔的話，應(yīng)用這個數(shù)值的倍數(shù)就好啦!

將基礎(chǔ)間距的數(shù)值設(shè)置成與行高相同的數(shù)值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統(tǒng)的印刷字體設(shè)計的那樣。然而，想要文字擁有垂直節(jié)律不一定需要按照上面的方法來做，只要你設(shè)置了一個基礎(chǔ)間距，并且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。

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
}

/* 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;
}

文字底部對齊基線網(wǎng)格

文字底部對齊基線是垂直節(jié)律的一個更為嚴(yán)格的實現(xiàn)。在網(wǎng)頁中，文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭，因為這樣做會導(dǎo)致在頂部和底部留有太多的空間。在傳統(tǒng)印刷的時候，這個問題一般會通過讓文字對齊基線網(wǎng)格的底部得以解決。

我們也可以通過為較大的文字添加一個負(fù)的margin-top和一個較小的margin-bottom，不需要使用基線網(wǎng)格而解決這個問題。

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網(wǎng)格并不是一個很容易的方式，所以強(qiáng)烈建議你使用一個字體排版基線庫例如 Sassline 或者 MegaType.

注意，垂直節(jié)律只是一個建議，而且基線網(wǎng)格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規(guī)律，也不用在每個元素中都去追求像素級別的完美。

擴(kuò)展閱讀：

Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations

顏色

顏色可以很大程度上的增加視覺辨識度，是字體排版中一個重要的組成部分。

不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進(jìn)行顏色選擇.
不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。
遵循相似原則.
不建議使用純黑 #000 作為你的正文顏色，你可以選擇一個非常灰的顏色如#333.
有時候，使用透明顏色比使用淺色會更好一些，如果你深入的了解，可以點擊這里。
確保文字和背景有較大的對比度，你可以使用這個對比度檢測工具幫助你進(jìn)行選擇.

####擴(kuò)展閱讀：

Magic Of CSS： Color
Google Style - Color

下劃線

在印刷品里，永遠(yuǎn)都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很丑！Practical Typography

一般的來說，在網(wǎng)頁中下劃線也會看起來并不美好！幸運(yùn)的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。下面是Adam Schwartz使用Sass實現(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);
}

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

SmartUnderline 是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網(wǎng)站都遵循的規(guī)律，如果不這么做的話，可能會引起誤解。

擴(kuò)展閱讀：

Crafting Link Underlines On Medium
Smarter Link Underlines For Every Website

總結(jié)

恭喜你，你已經(jīng)快讀完這篇手冊了。在web，這種用戶可以在任何分辨率的設(shè)備上使用的媒介上進(jìn)行字體排版是及其困難的。在很多年前，當(dāng)我第一次開始設(shè)計網(wǎng)頁的時候，我發(fā)現(xiàn)幾乎找不到最新的關(guān)于最佳WEB字體排版實踐的信息。很多專家發(fā)表的博客文章內(nèi)容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術(shù)應(yīng)用的細(xì)節(jié)。字體排版手冊希望可以解決這個問題，并且為菜鳥們提供應(yīng)該了解的關(guān)于如何創(chuàng)建符合字體排版工業(yè)標(biāo)準(zhǔn)的全部知識。我希望這個成果可以令你滿意。

擴(kuò)展閱讀：

The Elements Of Typographic Style Applied To The Web
Professional Web Typography

「騰訊ISUX六月份出品的精品好文」

100個彈框后的經(jīng)驗總結(jié)：
《超全面！騰訊設(shè)計師做了100個彈框后總結(jié)的設(shè)計經(jīng)驗》

QQ這16年來的LOGO變化：
《你我的青春！來看看騰訊QQ這16年來的LOGO 設(shè)計變遷》

QQ表情優(yōu)化背后的故事揭秘：
《騰訊設(shè)計師揭秘！QQ默認(rèn)表情優(yōu)化背后的設(shè)計故事》

原文地址：?typographyhandbook
譯文地址：http://www.zcfy.cc/article/696

超贊！最佳WEB字體排版實踐的簡明指導(dǎo)手冊

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com