說起排版，這是個大學問。頁面上的每一個元素都能影響瀏覽，排版設計的好壞絕對很考驗一個人的基本功底。那么什么是好的排版？在小編看來有比較棒的閱讀性的，內容在視覺上是平衡連貫的，并且有整體空間感和美感的就是好排版。所以現在就從文字排版和圖片排版這兩大方面，與大家分享內容排版的技巧。

當下社會的快餐文化，直接的使得我們的各種習慣隨之改變，人們好像越來越不愿將時間花在長時間閱讀上，用戶習慣讀圖，那么一定是讀圖比讀字更符合他們自身的使用習慣，所以不應該強行沒收大家讀圖的權利，而應該想辦法讓文字內容更加易讀美觀并脫穎而出。

創造排版的層次感，讓頁面結構更加清晰。排版的層次感通常指頁面中文本排列構建出的視覺層次。平時我們看過的書籍，書中的主標題看起來比副標題更重要，而主標題和副標題又明顯比正文部分更顯眼。所以我們在進行文字排版時，一般也可以遵循這個原則。

頁面中所有字體尺寸應該是基于正文字體來進行選擇的，因為正文是用戶在每個頁面中閱讀最多的部分。那么如何基于正文來選取其他部分字體的大小，下面有一些基本原則。
1、正文字體：調整字體大小，直到感覺看起來非常舒服為止。
2、標題字體：通常將正文字體放大到180%-200%。
3、副標題字體：通常為正文字體的130%-150%。

通過調整行間距和段間距，讓用戶更容易掃讀文字。段間距讓用戶能夠更好地識別內容塊和意群，行間距控制好則可以讓大腦更輕松識別文字內容。

1、行間距
行間距沒有固定的值，通常是根據字體大小來定義的。在word里我們常看到雙倍行距、單倍行距和1.5倍行距的選項。網頁上行距的單位常用em來表示，不管是中文網站還是英文網站，大家多喜歡用1.5em-1.8em的行距，不超過2em。控制在正文尺寸的120%-160%，同時文本字體越小，兩行之間的行距應該越大，確保字與行間的呼吸空間。

2、段間(jian)距
一般而言，段(duan)間距等于(yu)(yu)或大于(yu)(yu)正文(wen)字體(ti)行高。比如文章篇幅較短，就不需要很寬的段距，二文章篇幅很長，特別是那些偏學術的比較枯燥的文章，就要多利用段距把握文章的節奏，給閱讀者喘息和思考的機會，且使文章更有層次和可讀性。

我們隨手拿起一本書或者一份報紙，數一數每行的文字，一般情況下都不會超過40個漢字。這是因為如果每行文字過長，讀者會不停的轉動脖子，感到疲憊的同時也會降低閱讀效率；目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節奏。這點同樣適用于網頁上的文章閱讀。由于顯示器是橫向的，我們更要注意劃分閱讀區域。

文本寬度控制在450-700px為宜，此范圍內參照字號大小：
● 英文每行80-100個字母(空格算一個字母)為宜；
● 中文每行30-40個漢字為宜。

對比（contrast）是四項基本設計原理之一，在網頁中對文字的排版也非常適用。可以將對比分為三類，主要是標題與正文的對比、文字顏色的對比，以及文字顏色與背景顏色的對比。

1、標題與正文對比
標題使用18號的微軟雅黑，正文使用12號的宋體，兩種字體字號的對比讓文字內容富有層次，很容易吸引讀者眼球。

2、強(qiang)調文本(ben)對比(bi)
一部分文字采用了與主要文字不同的樣式，增加視覺效果，突出展示了段落的重點。一般規則是，強調文本不要超過整個文本的10%，如果所有都被強調，那就不是強調了。當然，一次僅僅使用兩種或是三種強調技巧。換句話說，不要同時使用，顏色，字體改變，大小，下劃線，斜體，黑體。

3、文字顏色與(yu)背景顏色對(dui)比
正文文本與背景合適的對比可以提高文字的清晰度，產生強烈的視覺效果。將文字內容清晰襯托出來，既有豐滿的層次感，同時有具有很強的視覺沖擊力。在使用這一原則時需要注意，必須確保文字是容易看清的，如果文字過小或過于纖細、色彩對比度不夠，會適得其反。如果對色彩的對比度還不夠熟悉時，可以通過顏色對比檢測工具（Check My Colours、Colour Contrast Check）檢測色差和亮度差，確保網頁設計的易讀性。

為了增加閱讀體驗，一種友好的圖文排版必不可少。圖文混排的樣式有很多，我們大體可以分為具有設計樣式的和簡單混排的。富有設計感的圖文排版較復雜，需要一定的設計功底才能做的好看。因此簡單好看的圖文排版越來越受歡迎，處理好圖片和文字的關系就可以。

1、左(zuo)右圖文
左右圖文可以選擇，左邊放圖片，右邊放文案；或者右邊放圖片，左邊放文案。但需要注意的是，使用這種排版方法要保證圖片尺寸盡量一致，文案長度盡量相近，保證它們都是對稱對齊的。

2、上下圖文
上下圖文和左右圖文差不多，可以上圖片下文案，也可以下圖片上文案。跟左右圖文一樣，要注意盡量保證圖片尺寸和文案長度的相同。

3、在內容文字比圖片多很多時，上圖下文的效果比上文下圖的好，因為圖文同時出現時，用戶會先被圖片吸引，如果文字在圖片上方，很容易造成大家忽略跳過文字的結果。而大段文字出現在圖片下方，也會讓人比較有耐心閱讀。

1、高清圖(tu)鋪滿
如果是一張高清的圖片，我們可以選擇用它直接鋪滿整個頁面，再把文字置于圖片中。當圖片構圖復雜或文案顏色與背景顏色相近時，不能直接將文案置于背景上，否則就會看不清。

① 給圖片加(jia)個(ge)色塊，再把文案放到(dao)色塊上(shang)面。

② 或者干脆給整個背景都覆(fu)蓋(gai)上一個帶透(tou)明(ming)度的矩形。

③ 如果圖(tu)片構(gou)圖(tu)簡單，你可以直接把文案置于(yu)圖(tu)片空白處。

2、模糊圖(tu)縮小
如果所選的這張圖片質量不好模糊，可以考慮走氣質路線：小圖配上少量文字，再加上留白。但是當圖片實在太小，而文案又實在過多時，此時這條路不但走不通，還會顯得單調呆板。

此時可以考慮通過設(she)計(ji)以增大圖片面積：

①加個(ge)好看的(de)邊框

②插入幾個形(xing)(xing)狀，用圖片填充形(xing)(xing)狀以后，更(geng)改形(xing)(xing)狀的透明度

排版設置完全是一個常規技能，遵循簡單的原則能讓文本的可讀性更好。雖然這些規則相對簡單可行，但是并不能覆蓋全部的排版需求，比如在移動端閱讀。由于移動設備的逐漸發展，人們平時往往使用它的機會多于使用電腦，因此在移動端的排版上，我們要尤為注意。

從移動端有限的屏幕以及頁面加載速度這兩方面來考慮，最好的展示效果是簡單，有一個核心元素，突出重點為最優。以可口可樂的這個“我們在這 我們在乎”為例，相較而言，越簡單的排版會越容易引起關注。這是因為我們的大腦里最初看到這種簡潔排版，會立刻出現“嗯 我可以馬上看完不費勁”的潛意識信息而帶著輕松的態度去閱讀。

在桌面端我們可能會采用字號差異較大的文字組合，移動端屏幕較小，容納的文字也較少，同等的字號差異在小屏幕上的感受會被放大。原因是我們在使用這兩種設備時的觀看距離不同，桌面端我們的眼睛離屏幕較遠，而在移動端則相反，因此我們應該在移動端使用較小的字號反差。

移動設備使用環境復雜多變而不局限在室內，可能在室外，甚至暴露在強烈的陽光下，應確保文字在背景中不會識別困難，即使是色弱者也可以正常閱讀。建議的文字和背景的顏色反差比應該高于4.5:1（AA級），才能確保更多人及環境都可以輕松閱讀。我們可以借助檢測工具來幫助檢測這個比值。例如：Colour Contrast Check。

在英文的段落排版中，通常是左側對齊，而讓右側自然形成起伏邊。對中文排版與閱讀習慣而言則相反，特別是在移動端上閱讀，段落的頭尾對齊尤其重要。一邊是夾雜了數字或英文字母字符的情況下，原本中文的整齊排列被打亂了，右側嚴重參差不齊不美觀。一邊是微調文字的間距以補足右邊存大的空白，整潔對齊。