中文網頁文字排版有哪些實用的技巧？

01-01

該怎麼排版，才能讓寫出來的長篇大論看起來很舒服，不會讓人產生一口氣讀完就要斷氣的感覺。也可以介紹你常用、認為好用的排版習慣，如自己慣用什麼字體，字間距，行距等等。

ethantw/Han · GitHub

漢字標準格式

行間距，字高，字體顏色等都是關鍵影響參數，具體是多少不能一概而論，根據文章不同的風格來調整。下面講幾個具體的方法

1 適當分段某與金庸起名的小說家很多都是幾個字就分段當然拋開稿費因素確實營造了別樣的文字體驗。但論文等專業文字等還是嚴格按照慣例格式。

2 排版大篇幅沒變化的排版會引起視覺疲勞，一口氣還讀不到換行，也會很累的。分欄排版可以讓人閱讀壓力小一些。

3 留空留白適當留空不要到處都是文字塞滿。

4 點綴畫面角落裡文字背景可以用與文字和諧的圖案點綴，讓版面富有生氣。

5 文字可以嘗試用比較濃的灰色背景也不要純白，用比很淡雅的灰或者綠，減輕閱讀疲勞。

6 多給標題旁邊懸浮目錄讓文字有條有理。可參考百度百科的做法。

7 註解評論吐槽的加入既然是互聯網可以學習影視中彈幕，也給文字加彈幕。這其實就是古人的批註，語文課本上的腳註。

+++++++++++++++++++++++++++++++++++++++++++++++++++++

其他具體可以多借鑒如下的地方

1 電視新聞如cctv新聞聯播中文字部分的排版。

2 雜誌最有借鑒意義推薦
3 幻燈片知乎中很多ppt排版的討論可以借鑒。
4 書廣告文案等等借鑒。

+++++++++++++++++++++++++++++++++++++++++++++++++++++

簡單回答一下吧，有2個原則

行距為字型大小的1.5倍，段距為字型大小的1倍，效果如下

這種長文本必須用文本框輸入，然後設置好避頭尾法則

在網頁設計中，文字排版對於建立網站和用戶之間良好的溝通以及幫助用戶實現目標起著重要的作用。當我們談論網頁是否能和用戶建立有效的溝通的時候，通常是指文字排版在這裡起到的作用：

「網頁中95％以上的信息是以文字形式呈現的。」

良好的排版使用戶更易於閱讀，而混亂的排版則使用戶失去繼續瀏覽的意願。正如「Oliver ReichensReichenstein在他的文章「Web Design is 95% Typography 」中寫道：「排版的目的是優化可讀性，訪問率，可用性，以及保持和圖形的平衡關係」

換言之，優化排版也在幫助你優化界面。本文中，我們提供一組規則，將幫助你提高文本內容的可讀性和易讀性。

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.限制一行文字的長度

保證每一行文字的字元數量是文本可讀的關鍵。不僅由設計師來定義文本的寬度，同時需要根據用戶的可讀性來定義。

太寬-會使得單行文字太長，讀者的眼睛會難於專註文字。因為長時間閱讀容易串列，大段的文本中很難找到正確的行。
太短-會使得用戶的眼睛經常回到下一行文本，會打破讀者的閱讀節奏，長時間閱讀造成視覺疲勞。太短也會傾向於向讀者發出一種信號，使得讀者沒有讀完當前這行就去跳到下一行閱讀，可能會忽略潛在的重要詞句。

http://weixin.qq.com/r/2TvJ0YnEW9Qkrc2y927L (二維碼自動識別)

以Google和百度為例，不難看出這點

對於移動設備，應該每行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.避免文字閃爍

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

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

內容來源：

1.10 Tips On Typography in Web Design 【Nick Babich】(原文）

2.Readability: the Optimal Line Length【Oliver Reichenstein】（參考文章）

*註：原文是英文，筆者只是翻譯一下，用作者的方法對中文進行了演繹，並對中文排版做了完善。

-------------------------------

胡兵兵（HolyhiLab交互設計師）

轉載請註明原作者和翻譯者。

搜索並關注微信公眾號：HolyhiLab

更多設計相關內容會更新到公號里。

最近翻譯了一篇文章，講英文的文字排版，我覺得中文同樣適用。

1.知道你的內容

為了創造一個成功的文字排版結構，理解頁面上的元素和他們的層級關係是非常重要的。

傳統上說，一本書可以分成部分，章節，段落等－每個都有各自的排版規則。在現今的以網頁為中心的世界，我們仍然用到那些平面的設計法則。以獨立的頁面和內容列表呈現的章節現在被組織在導航欄，其他段落則還是保持原來的狀態。

蘋果音樂的文字排版方法是理想的－極簡併容易閱讀

如果你看一下上圖中蘋果音樂的網站的一個頁面，你會發現他們對它的文字排版結構特別注意。這裡有一個明顯的區別，在頁面標題，首段落和每個獨立部分（包括每個部分的小標題）。

這樣完美設計的頁面的閱讀體驗感覺是平緩而且不費力的，但是需要設計師思考內容，每個獨立元素之間的相互關係。

所以在你複製一大段客戶的文字信息的時候，花點時間閱讀下這些信息到底是什麼。你會馬上有一個更好組織它的想法。

2.段落和分段分隔開

一個段落是一小篇用換行符或者縮進分隔的文字。一個分段是一組討論相同主題的段落集合，通常有一個小標題。

讓我們看一下上面的例子。對於沒有訓練過的眼睛來說，這兩個頁面看似相同，但是兩個頁面的閱讀體驗卻非常不同。為什麼？因為左邊的頁面沒有將分段之間區別開。行與行之間的間距都是差不多的，使這個頁面看上去像沒有盡頭的馬拉松。這是文字排版結構的一種崩塌。

但是在右邊的頁面中，我們可以看到分段之間的留有的空間給文章內容添加了一些結構和易讀性。段落的間距也被調整了更加緊湊的間距以留出空間，但是還是能看得清楚。所有這些都使得頁面設計更加和諧和易於閱讀。

所以下次，記得給分段之間留一個空間。

3.試驗不同字體組合

The New Yorker創造了一個文字排版的架構，通過調整字體大小，字體，顏色和版式

大小，顏色，位置，字體。這些只是一部分你可以用來試驗的屬性，來創造文字排版結構。右邊的組合會給內容一個全新的展示，使分段標題跳出並引導讀者的視線。

作為一個很棒的規則，一定要在確定正文的字體前來選擇你的標題的樣式，否則你會發現你自己在用和正文相同字體，只不過更大和顏色不一樣。你應該尋找能帶給你的項目正確的風格的字體組合。有時候，這就是你所需要的。

4.在正文中用更大的字體

如果你討厭在屏幕上看見大的字體，這是可用性專家Oliver Reichstein說的：

「16像素並不大。這是文字信息在瀏覽器上顯示的默認大小。這是瀏覽器應該顯示字體的大小...這一開始看上去比較大，當你閱讀更加快的時候你會認識到為什麼所有瀏覽器選這個作為默認大小了」

如果你依然么這麼覺得，試著閱讀一篇12像素字體的長文章，你很可能不會讀到最後。小字體流行起來好像是從屏幕變小的時候開始的，以顯示更多的內容。沒人考慮它的設計和易讀性。

時代變了，你也要變。用大一點的字體吧！

5.把圖片放在相關文字前

左邊的頁面比右邊的更難消化。你不能準確分辨圖片是屬於上面的文字還是下面的文字。

我們自然的閱讀方向時從左至右，從上至下。但是這裡有個例外，我們的大腦獲取和處理圖片的速度比文字快，也就是說我們先看到圖片，然後自然地過渡到下面的內容。

當你在圖片之前放描述的話，你的大腦不能處理額外的大量信息，這會導致一個不好的閱讀體驗。

基於這個理由，圖片相對應的內容應該在圖片在下面。

6.為內容豐富的項目做文字模版

對於大多數項目，你應該在版式中設計其他元素的時候試驗字體。你只需要選擇頁面標題，分段標題和段落的字體就可以了。

但是如果你的項目需要更複雜的文字排版結構（像一個在線新聞和雜誌），你最好先做一個快速的模版。一個簡單的方法就是設置一個像上面圖片的文檔，來測試我們的文字排版內容是否在一起看起來可以。

這使得你可以容易地試驗各種字體組合，而不被其他設計元素分散注意。一旦你覺得可以了，就可以著手你的設計了。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

原文來自99designs

原作者：Peter Vukovic

其實裝飾就是讓用戶知道換另個模塊了，提個醒而已，在網頁中裝飾太多了開發時比較麻煩，

標題一般使用18px，正文的14px就行。一般使用的顏色6，9，C，3（十六進位的），我現在都這麼排文字的，使用的字體是「微軟雅黑」，但在Mac系統中，「雅黑」視覺不好，我試用了「蘋方，大家有沒有好的字體呀」

最簡單的辦法，每段最多三行，段與段之間空一行