字型排版絕不僅僅是使用字型那麼簡單，它包括了關於文字”看上去會是怎麼樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調，並且可以幫助讀者更好的理解其內容和語境。

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

字型排版設計視覺層次

視覺層次是一種理念，它意在傳達頁面中的元素應該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用於文字排版中，它構成了文字排版設計的理論基石。

請看下圖的”愛麗絲夢遊仙境”的字型排版設計，它展現了一個清晰的視覺層次：

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

字型大小 & 字型重量： 設定字型大小和字型重量是兩種構建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什麼地方是最重要的，引導讀者的目光落到這裡的內容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目瞭然了。

定位： 元素定位是另外的一種構建視覺層次的方式，就像上圖中，文章的標題和作者資訊透過置頂和居中表明瞭它們的重要性。

字型： 透過使用有對比度的字型可以提高不同元素之間的辨識度，從而構建視覺層次

顏色： 為重要的文字設定不同的顏色也是一種非常簡單的構建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。

擴充套件閱讀：

Visual Hierarchy： How Well Does Your Design Communicate?

Creating Exciting And Unusual Visual Hierarchies

字型排版中的格式塔原則

格式塔原則， 或格式塔法則， 是一種構建感性認知的規律。當我們觀察這個世界的時候，我們通常會意識到，一個複雜的場景是由多個在某些背景之上的物體構成的，而這些物體則是由更小的一些物體構成的，依此迴圈下去。

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

距離原則

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

在字型排版設計中，”距離”指的是透過設定行高、內間距和外間距所製造出來的留白空間。在兩段不同的段落之間應該留有明顯的並且易於區分的留白間隔，請看下面的例子：

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

相似原則

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

擴充套件閱讀：

Gestalt Theory in Typography & Design Principles

Proximity， Uniform Connectedness & Good Continuation

字型選擇字型

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

首先為你的文字的正文挑選一個合適的字型，當你需要搭配不同字型的時候，記得要保持正文字型的不變，然後試著依據這個字型選擇和它相搭配的其他字型。

使用一些例如TypeTester 和 TypeCast 這一類的工具會讓你進行字型選擇的時候輕鬆一些。

從他人處獲得靈感! Fonts In Use提供了大量的優秀的字型搭配範例。

有些字型本來就是為用作大標題而設計的，而有些字型天生就只適合那些小螢幕，你要依照每個字型的”天性”去使用它們。你可以在WebType 上面找到對於不同字型而言合適的尺寸。此外 TypeKit也標明瞭其上的字型是適合標題或者是正文。

為了達到最大程度上的相容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支援大部分的現代瀏覽器。

你需要為每個列出來的格式提供一個相應的字型檔案。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個字型檔案的情況下，將其轉換成不同的檔案格式。

將多個同源字型檔案（細體、常規、半粗體、粗體等等）合併成一個font-family， 儘量不要為每個字型都起一個新的font-family的名字。

或者，你也可以透過線上字型資源服務，如Google Fonts 或者 Typekit引入你想要的字型。

擴充套件閱讀：

Further Hardening Of The Bulletproof Syntax

FontSquirrel： How To Use The Generator

載入字型

在你引入的字型被渲染出來之前，他們需要先進行載入。下面是三種在載入的時候可能會發生的事情：

引入的字型沒有被識別出來，字型應用了備用字型。

引入的字型雖然被識別出來但是沒有載入，他需要在下載完成之後才會被應用。

引入的字型被成功識別並迅速應用。

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

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

FOUT是指網頁會在切換到合適的網頁字型之前，使用預設或者備選字型顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之後，字型請求才會發出。這就意味著，在HTML被顯示出來而字型檔案沒有被完全下載下來中間存在著一段”空檔”時間。 FOUT 算是對大部分的網頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，FOUT 很難被使用者察覺出來。

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

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

3. 白屏方案

即在字型載入完成之前，整個網頁都處於不可見的狀態，或者也可以採用顯示一個進度條.我們只推薦當FOUT 嚴重影響使用者體驗的時候使用這種方法。 我們通常在一個網頁需要大面積顯示一個特定的字型的時候使用該方法，否則，FOUT 總會我們的第一選擇，因為”內容至上”。白屏方案與 FOIT很相似， 但對於你來說，你擁有控制在什麼時候給使用者展示你的內容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中， 不可見的文字有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在載入的訊號。

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

注意： 有一個W3C 字型載入 API也會實現同樣的功能，但是它現在的 支援不是很好_

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

白屏方案

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

如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在使用者體驗上效果會更好一些，特別是當字型檔案很大的時候。

擴充套件閱讀：

Type Study： Choosing Fallback Fonts

FOUT， FOIT， FOFT

Web Font Optimization

OpenType 的特性

OpenType 的特性可以被視為文字進行字型排版時的可選項，它們被用來加強文字的表現和易讀性。

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這種屬性僅支援拉丁文語系的字型使用，並不支援中文哦！ )

Web Style Guide相對大小

儘可能的使用相對大小。

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

font-size： 100% 與瀏覽器的字型大小設定保持一致而不是去覆寫它，根據大多數的瀏覽器的預設設定，這裡也可以用1em 代替表示 16px.

透過改變html 的 font-size會影響到所有單位為 em和rem 的元素.如果是對於響應式設計的網頁，這樣做還是比較實用的。

使用者的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠.

對於font-size建議使用rem 和 em.

對於一些元素定位如margin， padding等等，建議使用 rem， em， 或者 % 。

對於媒體查詢中尺寸建議使用em.

對於一些大的標題字或者配有圖片的字，可以使用FitText來實現標題的縮放。儘量避免使用vw 和 vh因為現在的支援還不是很好，難於精確的配置，並且對於一些瀏覽器的字型和縮放設定並不適配 。

擴充套件閱讀：

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元素。它將元素分組，從而更好進行語義化、修飾以及佈局。

html { box-sizing： border-box; } *， *：before， *：after { box-sizing： inherit; } .container { max-width： 67rem; padding-left： 1.5rem; padding-right： 1.5rem; }

左/右內間距與最大寬度聯合使用可以很容易地建立一個移動端友好的容器。

要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經常移動才可以看清）。永遠記住，在進行網頁字型排版的時候，沒有一個適合所有字型、尺寸、行距和解析度的鐵律，你需要自己來做決定。

擴充套件閱讀：

* { Box-sizing： Border-box } FTW

StackOverflow： Ideal Column Width For Paragraphs Online

字型大小

使用 縮放模組 可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模組指的是依照其內容安排的一系列比較合適的字型大小的數值。

我們可以在編寫CSS的一開始使用縮放模組，將它作為一個參考。

值的注意的是，儘管不同的字型有著不同的大寫字母高度和x字母高度，可是大多數的模組化縮放工具都沒有將這些考慮在內。

在你的樣式表中，建議將你所使用到的縮放模組工具的配置資訊寫在註釋之中。

響應式的縮放模組

只使用單獨的一個縮放模組方案並不一定適合所有解析度的裝置，為了解決這個問題，你可以依據使用者的裝置的解析度的不同提供不同的縮放方案

垂直距離

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

line-height 不應該帶有單位。比較寬的容器裡面文字的行高會大一些，而那些比較窄的容器裡面行高相對來說小一些會比較合適。

為那些具有單方向的文字元素新增margin屬性，建議使用margin-bottom.

要遵循距離原則.

垂直節律

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

Image source建立垂直節律很簡單。首先，確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然後，為你的容器，文字性元素或者其他相關元素的單方向的外邊距（或者內邊距）應用這個數值。如果你需要制製造更大的間隔的話，應用這個數值的倍數就好啦!

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

文字底部對齊基線網格

文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中，文字通常在line-height間居中對齊.但對於較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候，這個問題一般會透過讓文字對齊基線網格的底部得以解決。

我們也可以透過為較大的文字新增一個負的margin-top和一個較小的margin-bottom，不需要使用基線網格而解決這個問題。

圖片資源為不同的字型樣式、字型大小和解析度新增一個底部對齊的基線網格並不是一個很容易的方式，所以強烈建議你使用一個字型排版基線庫例如 Sassline 或者 MegaType.

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

擴充套件閱讀：

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 中提供的顏色板進行顏色選擇.

不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。

遵循相似原則.

不建議使用純黑 #000 作為你的正文顏色，你可以選擇一個非常灰的顏色如#333.

確保文字和背景有較大的對比度，你可以使用 這個對比度檢測工具 幫助你進行選擇.

####擴充套件閱讀：

Magic Of CSS： Color

Google Style – Color

下劃線

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

一般的來說，在網頁中下劃線也會看起來並不美好！幸運的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。 下面是Adam Schwartz使用Sass實現的下劃線的例子 ：

SmartUnderline 是一個簡化這個工作的庫。建議你只在有連結的地方使用下劃線，這是大多是網站都遵循的規律，如果不這麼做的話，可能會引起誤解。

所以這裡技巧吧！

1.不要使用過多的字型

網站排版中建議最多不要超過3種字型型別，不然會使網站看起來鬆散和不專業，不僅太多的字型型別會造成這種問題，太多的字型尺寸也會破壞網頁佈局。

通常情況下，將字型型別的數量限制在最小數量（2個是很多，1個通常就夠了），整個網站堅持使用相同的原則。如果使用多個字型，請確保倆個字型是和諧的。以下面的字型組合為例，Georgia和Verdana的搭配相得益彰，相對比較和諧。相比於右邊Baskerville和Impact則會有明顯的衝突感，非襯線Impact明顯的超過了Baskerville的視覺衝擊力。 而在中英文排版中，建議大家中文使用標準中文字型，而英文、數字和字元使用標準的英文字型。以下圖為例，可做對比參考。 左：中文（漢儀旗黑） 英文（DIN Next LT Pro) 標點符號使用半形字元 右：中文（漢儀旗黑） 英文（漢儀旗黑） 標點符號使用全形字元。

2.儘量使用標準字型

在Google Web Font或者Typekit，和國內的“有字型檔”的字型嵌入式服務有很多有趣的字型，對於國內設計師來說，痛苦的是中文字型會很大，一個字型動則幾兆，十幾兆的，這樣使用者在會增加使用者瀏覽網站的載入時間；反之英文字型26個字母大小寫，加數字標點符號一共幾百k的字型是很容易在網頁中使用的。

儘可能選擇標準字型（近幾年網頁中通常使用思源黑體，PingFang，英文可以使用Arial，Calibri或者其他常見的易於螢幕閱讀的黑體字，如沒有特殊概念指導儘可能避免使用襯線字型，如宋體） 不是每位使用者都可以在終端上看到同一個字型，意味著你選擇的適合的字型，使用者有可能看不到。 使用者更熟悉標準字型，因此他們可以更快的閱讀 特殊的、並且少量的字型可以製作成.svg格式的素材嵌入Web使用 良好的排版會使使用者更加關注內容本身，而不是字型的型別。

3.限制一行文字的長度

保證每一行文字的字元數量是文字可讀的關鍵。不僅由設計師來定義文字的寬度，同時需要根據使用者的可讀性來定義。 太寬-會使得單行文字太長，讀者的眼睛會難於專注文字。因為長時間閱讀容易序列，大段的文字中很難找到正確的行。 太短-會使得使用者的眼睛經常回到下一行文字，會打破讀者的閱讀節奏，長時間閱讀造成視覺疲勞。太短也會傾向於向讀者發出一種訊號，使得讀者沒有讀完當前這行就去跳到下一行閱讀，可能會忽略潛在的重要詞句。

對於移動裝置，應該每行30-40個字元（半形），具體顯示多少個字數，與不同解析度的螢幕、文字寬度和字型大小都會有關係，設計的原則是：保證使用者可以流暢的閱讀文字，文字不宜太小或太大。以iOS（手機）為例，正文文字最小字號不能小於24px，太小了使用者閱讀會難以閱讀。以百度為例，可作為參考。

4.選擇用有多個字重，螢幕顯示良好的字型

使用者將透過不同螢幕解析度的終端裝置訪問你的網站，大多數使用者介面需要各種大小尺寸的文字（標題、副標題、文字、標註等等）。選擇一款能夠在不同螢幕解析度的裝置上執行良好的字型以保證它的不同尺寸的字型都具有極高可讀性(Readability)和可用性(Usability)也是非常重要的。

近倆年備受大家歡迎的思源黑體和PingFang字型都是不錯的選擇，當然，個人認為漢儀旗黑無論從家族字型的數量、字型質量、螢幕顯示、紙媒印刷上來說都不遜色於前面倆款字型。參與過思源黑體設計的設計師曾說過，思源黑體還是相對比較粗糙的一款字型。 同樣，為了保證在螢幕上清晰可辨，儘量避免使用襯線體，儘管他們很漂亮。

5.使用識別度高的字型

在選擇英文體的時候，有些字型的個別字母極易混淆，特別是“i”和“L”（如下圖所示）；以及文字之間的間距。許多中文字型在使用較小字型的時候筆畫會粘到一起(上圖），不容易辨別；所以在選擇字型型別的時候，請檢查你選擇使用的字型，確保不會為使用者和產品造成不必要的損失。

6.避免在介面中大段的使用大寫字母

不要所有文字使用大寫字母，強制使用者閱讀大寫字母，首字母大寫，具有特殊含義的縮寫等情況除外，與小寫字母相比，大量的使用大寫字母會嚴重降低使用者的閱讀效率和愉悅感。

7.將行間距控制在字型的1.5-2.0倍之間

在文字文字排版中，我們又一個特殊的術語，用於表示行與行之間的距離：行間距（或行高）。為了保證文字的可讀性和易讀性，使文字形成線性的閱讀感受，在網頁設計中，通常情況下將行間距控制在字型大小的1.5-2.0倍之間（中文字型）。英文字型推薦使用預設行間距，或根據預設行間距微調。

8.適當的顏色對比度 通常情況下，文字和背景儘量避免使用相同或相似的顏色。

文字越明顯，使用者能夠掃描和閱讀的速度越快。當然，學會透過文字顏色、大小和背景的顏色關係來控制視覺層級也是必要的。 與背景相比，小文字和背景的對比度至少為4.5:1 大文字（14px/18px以上）應該保持與背景3:1以上的對比度

灰色通常作為輔助色使用，根據我自己的專案經驗，給大家分享一套我自己一直在使用的灰色，灰的有層次，清晰的區分資訊層級是必要的。

9.避免將文字著色為紅色或綠色

色盲和色弱是我必須要照顧到的一部分使用者，特別是在男性中（8％的男性是色盲）建議使用處顏色以外的其他方式來區分重要的資訊（如下劃線，加粗等）。避免使用紅色和綠色單獨傳達資訊。因為紅綠色盲是最常見的色盲形式。（現在想想，那些因為紅綠色盲而考不了駕照的童鞋是不是要分分鐘恨死制定紅綠燈規則的人，當然這只是個笑話，使用紅綠燈是因為光學在物理傳播方面的原因，這裡不解釋）

雖然在日常生活中我們總是用這種方式告知使用者綠色是表示正確的操作，紅色表示錯誤的操作，反思一下我們是否有去考慮色盲使用者的操作和體驗。或許我們是不是可以考慮換一個方式去表達正確或錯誤？

10.避免文字閃爍

閃爍的文字或內容可能會讓某些使用者感到不適，對於一般使用者而言，這可能分散他們的注意力或者使他們感到煩躁。

雖然在網頁設計中依然有很多需要我們注意的地方，最後，分享給大家一個想法就是：網頁設計中排版很重要。做出正確的排版可以讓你的網站感覺清爽，糟糕的網頁排版會令使用者分心，傾向於關注自己的感受而非內容。排版的關鍵在於使資訊層級清晰、使用者易於閱讀、並且保證文字是可讀的。文字的排版不應該增加使用者的認知符合，以求達到尊重內容、尊重使用者的目的。

網站排版問題極其解決

以下這是我個人的方案和看法，算是有比較多瞭解的了。

排版

文字的排版一直是大家比較頭疼的事情。相信現在大多數人使用的依然是word文件，而word文件並沒有整合面向物件的編輯的環境，所以對於排版的事情還要個人一個個的排，確實是比較煩惱。對於使用word的小夥伴，推薦使用第三方的外掛來輔助你，相信會大大的提高你的工作或者是編輯的效率的。

重點來了，重點來了，重點來了，推薦使用小恐龍排版助手

這個外掛非常的好用，大家可以去嘗試一下。

2.使用不同的格式的Markdown編輯器(字尾名是.md)

現在大多數的編輯器，比如vs code，Typora等等，他們都是面向寫作者的，就是面向物件的，在寫文字或者工作的編輯方面本人是不太需要去關注語法的，編輯和排版方面也是，你只需要瞭解最基本的簡單的語法，就可以得心應手的使用它們。

Markdown格式的編輯器，可以輕鬆的插入序列號，插入程式碼塊，引用文字或者程式碼，插入公共的表格。最最最重要的是

它們可以做到排版的，非常的美觀，簡直是賞心悅目的程度。

相較於第一個使用外掛，我本人更加的推薦使用Markdown格式的編輯器。

你以為完了麼？並沒有

如果你說，我這個文字的格式不一樣，那怎麼辦，我不是全部白忙活了嗎？

No,No,No

它們是可以進行文字的匯入的或者是格式的轉換，這樣做就可以實現不同文字格式的互通了。

怎麼樣，趕快去試試吧，相信你不會失望的。

網頁排版之字型

企業網頁排版設計網站頁面當中圖片和影片過多是會影響到載入速度，因此文字還是佔據網站比較多位置。這時候字型的選擇就變得尤為重要，字型與網站風格融合在一起，才能讓一個網站受到網站訪客喜歡，比如說網站訪客主要是老人，那麼在字型選擇上可以選擇規規矩矩字型，字型顏色不花哨，字號可以比平常網頁字型大點，這樣才更利於老人使用者瀏覽。

網頁板塊之間距離