說到排版，這是一個大學問題。 網站上的每個元素都會影響瀏覽。排版的質量絕對可以測試設計師的基本知識。一篇簡短的文章不能清楚地介紹排版。本文主要分享網站主題部分的排版。之后，我們還將介紹基于不同系列文章中關鍵點的印刷技術。

文本布局需要考慮文本識別和頁面易讀性。本文分享了如何從理想的易讀性規范和CRAP設計原則的角度在網頁中制作精彩的文本布局。

首先考慮一下，您如何看待良好的文本布局？

我們認為，良好的排版必須具備良好的閱讀能力。文本內容在視覺上是平衡和連貫的，并且具有整體空間感。

布局，內容放置和列設計都會影響文本的可讀性。從易讀性的角度來看，設計師需要考慮字體，字體大小，行間距，間距，背景顏色和文本顏色對比。

我們在上一篇文章中突出顯示了字體和字體大小。以下理想的易讀性規范引入了行間距和間距，共享適當的線寬和線高，并幫助觀眾保持閱讀節奏，以便讀者獲得更好的閱讀體驗。

首先，理想的可讀性規范

1.線寬

我們可以想象：如果文字行太長，視線的距離很長，很難注意到段落的開頭和結尾，閱讀起來比較困難;如果文字行太短，眼睛應該來回掃描，破壞閱讀的節奏。

因此，我們可以使內容區域的每一行都帶有適當數量的單詞以提高易讀性。

傳統書籍排版的每一行中理想的字符數是55-75，實際上在75-85字符行中更受歡迎。第14種字體推薦使用中文35-45個字符。

2.間距

行間距是影響易讀性的一個非常重要的因素。行間距太寬會導致文本失去連續性并影響閱讀。如果行間距太窄，則容易跳躍。它很容易跳躍。

在網頁設計中，文本間距通常選擇為行間距的1到1.5倍，以及段間距的1.5到2倍。

例如，第12個字體，行間距為12px-18px，段落間距為18px-24px。

另外，線高/段之間的間隙是=0.754。行間距恰好是段落間距的75％是很常見的。

例如，簡單的書號為16號字體，行間距為27px /段間距為36px=75％。字體大小本身相對較大，因此行間距不需要嚴格按1 - 1.5倍的比例設置，但行間距和截面間距比為75％，看起來非常好。這種視覺效果在閱讀時保持一致。節奏感，這是規范在實際情況下的靈活應用。

3.行對齊

排版中最重要的規范之一是對齊應放置的位置，例如每個段落的行的對齊方式。無論視覺效果如何，美麗，正式，有趣或嚴肅，都可以應用清晰的對齊來實現目標。通常，建議只與頁面上的文本對齊，并盡量避免理由。

4.文字留白

格式化文本時，需要在布局中留出可用空間。白色空間應從小到大的順序是：字間距，行間距和段間距。另外，在布局內容區域之前，需要根據頁面的實際情況在頁面周圍留下空白區域。

二、CRAP設計四原則在文字排版中的應用

CARP是四個基本設計原則，包括對比度，重復，對齊和接近，這些原則已被設計師廣泛使用。這四個基本原則也非常適用于網頁設計中的文本布局。

1.對比

我們將比較分為三類，主要是標題和正文的字體和字體大小比較，文本顏色的對比度，文本顏色和背景顏色之間的對比。

＆gt;標題與文字

在AnyForWeb網站案例頁面中，標題在18日使用Microsoft Yahei，在12日使用歌曲。兩種字體大小之間的對比使得文本內容豐富且易于吸引讀者的注意力。

＆gt;文字顏色比較

在Garan的官方網站上，一些文本使用了與正文不同的另一種顏色。這種對比是增加視覺效果的有效方法之一，突出了段落的重點。

＆gt;文字顏色與背景顏色

這是一種非常常見的排版設計。文本和背景之間的適當對比可以提高文本的清晰度并產生強烈的視覺效果。

例如，在埃森哲的官方網站上，白色背景，紅色標題，黑色文字以及紅色背景和白色文本之間的對比清晰地顯示了文本內容，其具有完整的層次感和強烈的視覺沖擊力。

設計師在使用這個原則時需要注意。有必要確保文本易于查看。如果文字太小或太細，顏色對比度不夠，則會適得其反。例如：

對顏色對比不熟悉的設計師可以通過顏色對比度檢測工具（例如檢查我的顏色，顏色對比度檢查）來檢測顏色和亮度差異，以確保網頁設計的易讀性。

2.重復

設計中的元素可以在整個網頁設計中重復。對于文本，字體，字體大小和樣式的重復可以是相同類型的圖案裝飾，文本和圖像布局。重復為用戶提供了有組織，一致的體驗，從而創造了連貫性并且看起來更多。

例如，HeyJuice網站在產品指南部分使用統一的“圖片+標題+正文”表單。內容不同，布局統一，圖片風格一致。當用戶查看過去時，他們可以知道這是同一部分的內容。這種重復很容易具有連貫和平衡的美感。

例如，圖巴兔裝飾網絡的過程，標題文字在圖片的相同位置，使用相同的形式，不僅與圖片的背景顏色形成對比，而且還與文本樣式的重復形成對比。

重復原則廣泛用于網頁設計。單次重復可能是單調的。設計人員可以根據不同的網站要求靈活使用它。例如，改變重復可以增加創新并增加網頁設計的活力。

3.對齊

在網頁設計中，元素不能隨意放置在頁面上，并且每個項目都應該與頁面內容有一些連接。對齊可對齊性是網頁設計的重要組成部分。它可以幫助設計師制作有吸引力的設計，并且是良好網頁設計的潛在要求。

有很多對齊的情況，我們只列出兩個。

曼秀雷敦的左對齊網站：

DarryRing網站的中心對齊：

左右對齊使文本看起來更清晰，更清晰;中心對齊更莊嚴，更正式，更穩定。

4.親密性

位置的接近意味著存在關聯。親密關系是指將相關項目組織在一起，使它們從整體上看起來和諧統一。

親密關系可以從兩點開始：適當的白色空間，側重于視覺強調。

例如，在以下情況下，圖形和文本匹配，這是多個元素組合在一起。

首先將人眼吸引到橫幅和文本內部，然后向下移動到文本描述和鏈接文本。這些元素的親密關系和對比形成了平衡。

以上是此次分享的內容。如上所述，排版測試的質量是設計師的基本技能，平時的努力是必不可少的，我們期待大家的精彩布局！