在網絡上設置類型時，我們如何避免最常見的錯誤？這個問題最近一直困擾在我腦海中，因為我注意到很多排版都是乏味，令人沮喪，難以閱讀的。那么，我們如何改進界面，以便我們的內容在任何時候和環境都易于閱讀？如何從別人的錯誤中吸取教訓呢？

這些問題鼓勵我根據自己的個人經驗記下一些易于應用并對易讀性產生最大影響的規則。而且，如果你不知道，那么在印刷術方面我就是一個極客。所以，我想我會分享以下六條規則，我已經采用這些規則來啟動我們。

＃ Rule＃1：為段落設置好的最大寬度

這通常被稱為印刷圈中的度量，并且備受推崇的印刷商會建議段落具有大約75個字符的寬度以用于易讀性原因。任何比這更長的東西變得難以閱讀并且由于眼睛必須從左到右再往后行進（假設ltr那樣）而導致眼睛不必要的緊張。

這是max-width一個段落的良好設置的快速示例。哦，并確保在大屏幕設備上查看此演示。

現在，這一切都取決于偉大的設計師在設置段落時考慮的大量因素。然而，作為網頁設計師，我們遇到的困難是我們必須確保段落在其他環境中感覺良好，例如在移動設備上。所以，雖然這個約75個字符的規則在我們的后口袋中很好，但是當我們試圖找出文本塊的最大寬度時，它是最有用的。更多關于這一點。

另外，我建議在包裝段落的容器或網格類上設置該寬度，而不是max-width在段落元素本身上設置值。

有點像這樣：

<div class="container">

  <p>This is where our text goes.</p>

</div>

p {

  font-size: 18px;

  line-height: 24px;

}

.container {

  max-width: 600px;

}

否則，將來可能會有某些段落需要更大并且具有更廣泛的度量（如可能的介紹性段落）。在這些情況下，創建一個只處理其中元素的較大寬度的不同容器類是一種很好的模塊化方法。

我發現通過一個只處理事物寬度的類系統可以鼓勵編寫更少的代碼，同時也可以編寫更易讀的代碼。雖然，是的，還有更多的HTML需要編寫，但我會說這比將來需要重構的許多糟糕的CSS更可取。

簡而言之：確保為段落設置好的最大寬度，同時確保我們在父類上設置寬度以保持代碼可讀。

＃規則＃2：使線條高度比您想象的要小

我經常在野外看到的一個問題是段落的行高太大了。這使得閱讀長文本塊非常耗費精力和繁瑣，因為從一行到下一行的每一跳都感覺像一個巨大的跳躍。

在移動設備上，這是特別令人震驚的，因為我經常會看到這樣的事情：

出于某種原因，很多人傾向于認為較小設備上的段落需要更大的line-height值 - 但事實并非如此！由于段落的寬度較小，line-height因此可能比桌面顯示屏上的寬度更小。這是因為在較小的屏幕上，并且段落較小，讀者的眼睛距離一條線的末端到下一條線的開頭的距離要短得多。

這個演示當然不是印刷完美（沒有這樣的東西），但它比我今天偶然發現的大多數網站更容易閱讀。在這個例子中，注意line-height它可能比你熟悉的要小得多，看看你讀它時的感覺：

＃ Rule＃3：在移動設備上使邊距變小

我經常看到的另一個常見錯誤是在一段文本的任何一側使用非常大的邊距，它通常在移動設備上產生難以閱讀的文本塊，如下所示：

只是 - 哎呀！我們怎么看這個呢？

相反，嘗試在段落的任何一側使用不超過10-15px的保證金，因為我們需要確保我們的段落在較小的設備上盡可能寬。

我甚至看到人們在移動設備上撞到字體大小以嘗試并且有一個很好的段落寬度，但我強烈建議避免這種情況。考慮上下文，因為移動設備通常被保持在用戶面前。沒有必要強迫用戶將設備拉得更近以閱讀一小塊文本。

大多數情況下，較小的利潤率是更好的解決方案。

＃規則＃4：確保類型不是太薄

這可能是我在網絡上排版時最大的抱怨，因為很多網站都使用非常薄的無襯線字體來表示段落文本。這使得閱讀變得困難，因為由于缺乏對比度，當它們開始逐漸消失在背景中時，很難看到字母中的每個筆畫。

以下是使用太薄的字體的示例：

嘗試閱讀那里的文字。你注意到自己在努力閱讀嗎？因為在這個例子中我們使用Open Sans的輕量級，所以字體開始分解并落到位。閱讀它需要更多的關注。可讀性降低，閱讀變得比實際情況更令人討厭。

我建議為正文選擇常規權重，然后嘗試使用這些設置讀取一長串文本。細長字體看起來很可愛漂亮，但以較長的形式閱讀它會顯示出困難。

＃規則＃5：標題使用粗體

清晰的層次結構對于控制讀者的關注至關重要，尤其是在顯示大量數據的復雜應用程序中。雖然它在幾年前比較常見，但我仍然傾向于看到很多人在網站上使用非常薄的重量或常規權重作為標題。同樣，這不一定是一個頑固的規則 - 這是一個建議。也就是說，掃描這個標題是多么困難：

在這個例子中有點難以看到，但在具有大量UI的大型應用程序中很容易錯過標題。我經常發現，沒有經驗的印刷師傾向于創造等級，font-size而經驗豐富的印刷師則會帶領font-weight。

這是一個更容易掃描的例子：

在這個例子中，我將段落文本設置為深灰色，并且在應用粗體重量時將標題設置為更接近黑色的顏色。這不是代碼中的重大變化，但它在層次結構方面是一個巨大的改進。

當用戶被要求瀏覽大量文本時，這樣的小改進將很快增加整體體驗。

＃規則＃6：不要使用Lorem Ipsum排版頁面

我認為這個建議可能是最被低估的，我很少聽到它在前端，排版或設計組中提出。我甚至注意到經驗豐富的設計師很難排版頁面，因為Lorem Ipsum用于占位符內容，這使得無法判斷文本段落是否易于閱讀。

在Lorem Ipsum中設置文本可以很好地排版。

相反，選擇你真正喜歡閱讀的文字。理想情況下，排版將使用最終內容完成，但這通常是前端開發的奢侈品。這就是為什么我建議選擇聽起來接近項目語音和語調的文本，如果缺少實際內容的話。

但嚴重的是，這一改變將對易讀性和層次結構產生巨大影響，因為它鼓勵閱讀文本而不是從美學角度來看待它。當我停止使用無法解讀的Lorem Ipsum文本并從我最喜歡的小說中挑選內容時，我發現自己的設計有了很大的改進。

就是這樣！在排版方面確實存在很多規則，而這些規則僅僅是我看起來最容易被打破的規則。你在網上看到了什么樣的排版問題？讓我們在評論中知道！