在網(wǎng)絡(luò)上設(shè)置類型時(shí)，我們?nèi)绾伪苊庾畛Ｒ?jiàn)的錯(cuò)誤？這個(gè)問(wèn)題最近一直困擾在我腦海中，因?yàn)槲易⒁獾胶芏嗯虐娑际欠ξ?，令人沮喪，難以閱讀的。那么，我們?nèi)绾胃倪M(jìn)界面，以便我們的內(nèi)容在任何時(shí)候和環(huán)境都易于閱讀？如何從別人的錯(cuò)誤中吸取教訓(xùn)呢？

這些問(wèn)題鼓勵(lì)我根據(jù)自己的個(gè)人經(jīng)驗(yàn)記下一些易于應(yīng)用并對(duì)易讀性產(chǎn)生最大影響的規(guī)則。而且，如果你不知道，那么在印刷術(shù)方面我就是一個(gè)極客。所以，我想我會(huì)分享以下六條規(guī)則，我已經(jīng)采用這些規(guī)則來(lái)啟動(dòng)我們。

＃ Rule＃1：為段落設(shè)置好的最大寬度

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

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

現(xiàn)在，這一切都取決于偉大的設(shè)計(jì)師在設(shè)置段落時(shí)考慮的大量因素。然而，作為網(wǎng)頁(yè)設(shè)計(jì)師，我們遇到的困難是我們必須確保段落在其他環(huán)境中感覺(jué)良好，例如在移動(dòng)設(shè)備上。所以，雖然這個(gè)約75個(gè)字符的規(guī)則在我們的后口袋中很好，但是當(dāng)我們?cè)噲D找出文本塊的最大寬度時(shí)，它是最有用的。更多關(guān)于這一點(diǎn)。

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

有點(diǎn)像這樣：

<div class="container">

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

</div>

p {

  font-size: 18px;

  line-height: 24px;

}

.container {

  max-width: 600px;

}

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

我發(fā)現(xiàn)通過(guò)一個(gè)只處理事物寬度的類系統(tǒng)可以鼓勵(lì)編寫(xiě)更少的代碼，同時(shí)也可以編寫(xiě)更易讀的代碼。雖然，是的，還有更多的HTML需要編寫(xiě)，但我會(huì)說(shuō)這比將來(lái)需要重構(gòu)的許多糟糕的CSS更可取。

簡(jiǎn)而言之：確保為段落設(shè)置好的最大寬度，同時(shí)確保我們?cè)诟割惿显O(shè)置寬度以保持代碼可讀。

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

我經(jīng)常在野外看到的一個(gè)問(wèn)題是段落的行高太大了。這使得閱讀長(zhǎng)文本塊非常耗費(fèi)精力和繁瑣，因?yàn)閺囊恍械较乱恍械拿恳惶几杏X(jué)像一個(gè)巨大的跳躍。

在移動(dòng)設(shè)備上，這是特別令人震驚的，因?yàn)槲医?jīng)常會(huì)看到這樣的事情：

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

這個(gè)演示當(dāng)然不是印刷完美（沒(méi)有這樣的東西），但它比我今天偶然發(fā)現(xiàn)的大多數(shù)網(wǎng)站更容易閱讀。在這個(gè)例子中，注意line-height它可能比你熟悉的要小得多，看看你讀它時(shí)的感覺(jué)：

＃ Rule＃3：在移動(dòng)設(shè)備上使邊距變小

我經(jīng)常看到的另一個(gè)常見(jiàn)錯(cuò)誤是在一段文本的任何一側(cè)使用非常大的邊距，它通常在移動(dòng)設(shè)備上產(chǎn)生難以閱讀的文本塊，如下所示：

只是 - 哎呀！我們?cè)趺纯催@個(gè)呢？

相反，嘗試在段落的任何一側(cè)使用不超過(guò)10-15px的保證金，因?yàn)槲覀冃枰_保我們的段落在較小的設(shè)備上盡可能寬。

我甚至看到人們?cè)谝苿?dòng)設(shè)備上撞到字體大小以嘗試并且有一個(gè)很好的段落寬度，但我強(qiáng)烈建議避免這種情況?？紤]上下文，因?yàn)橐苿?dòng)設(shè)備通常被保持在用戶面前。沒(méi)有必要強(qiáng)迫用戶將設(shè)備拉得更近以閱讀一小塊文本。

大多數(shù)情況下，較小的利潤(rùn)率是更好的解決方案。

＃規(guī)則＃4：確保類型不是太薄

這可能是我在網(wǎng)絡(luò)上排版時(shí)最大的抱怨，因?yàn)楹芏嗑W(wǎng)站都使用非常薄的無(wú)襯線字體來(lái)表示段落文本。這使得閱讀變得困難，因?yàn)橛捎谌狈?duì)比度，當(dāng)它們開(kāi)始逐漸消失在背景中時(shí)，很難看到字母中的每個(gè)筆畫(huà)。

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

嘗試閱讀那里的文字。你注意到自己在努力閱讀嗎？因?yàn)樵谶@個(gè)例子中我們使用Open Sans的輕量級(jí)，所以字體開(kāi)始分解并落到位。閱讀它需要更多的關(guān)注。可讀性降低，閱讀變得比實(shí)際情況更令人討厭。

我建議為正文選擇常規(guī)權(quán)重，然后嘗試使用這些設(shè)置讀取一長(zhǎng)串文本。細(xì)長(zhǎng)字體看起來(lái)很可愛(ài)漂亮，但以較長(zhǎng)的形式閱讀它會(huì)顯示出困難。

＃規(guī)則＃5：標(biāo)題使用粗體

清晰的層次結(jié)構(gòu)對(duì)于控制讀者的關(guān)注至關(guān)重要，尤其是在顯示大量數(shù)據(jù)的復(fù)雜應(yīng)用程序中。雖然它在幾年前比較常見(jiàn)，但我仍然傾向于看到很多人在網(wǎng)站上使用非常薄的重量或常規(guī)權(quán)重作為標(biāo)題。同樣，這不一定是一個(gè)頑固的規(guī)則 - 這是一個(gè)建議。也就是說(shuō)，掃描這個(gè)標(biāo)題是多么困難：

在這個(gè)例子中有點(diǎn)難以看到，但在具有大量UI的大型應(yīng)用程序中很容易錯(cuò)過(guò)標(biāo)題。我經(jīng)常發(fā)現(xiàn)，沒(méi)有經(jīng)驗(yàn)的印刷師傾向于創(chuàng)造等級(jí)，font-size而經(jīng)驗(yàn)豐富的印刷師則會(huì)帶領(lǐng)font-weight。

這是一個(gè)更容易掃描的例子：

在這個(gè)例子中，我將段落文本設(shè)置為深灰色，并且在應(yīng)用粗體重量時(shí)將標(biāo)題設(shè)置為更接近黑色的顏色。這不是代碼中的重大變化，但它在層次結(jié)構(gòu)方面是一個(gè)巨大的改進(jìn)。

當(dāng)用戶被要求瀏覽大量文本時(shí)，這樣的小改進(jìn)將很快增加整體體驗(yàn)。

＃規(guī)則＃6：不要使用Lorem Ipsum排版頁(yè)面

我認(rèn)為這個(gè)建議可能是最被低估的，我很少聽(tīng)到它在前端，排版或設(shè)計(jì)組中提出。我甚至注意到經(jīng)驗(yàn)豐富的設(shè)計(jì)師很難排版頁(yè)面，因?yàn)長(zhǎng)orem Ipsum用于占位符內(nèi)容，這使得無(wú)法判斷文本段落是否易于閱讀。

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

相反，選擇你真正喜歡閱讀的文字。理想情況下，排版將使用最終內(nèi)容完成，但這通常是前端開(kāi)發(fā)的奢侈品。這就是為什么我建議選擇聽(tīng)起來(lái)接近項(xiàng)目語(yǔ)音和語(yǔ)調(diào)的文本，如果缺少實(shí)際內(nèi)容的話。

但嚴(yán)重的是，這一改變將對(duì)易讀性和層次結(jié)構(gòu)產(chǎn)生巨大影響，因?yàn)樗膭?lì)閱讀文本而不是從美學(xué)角度來(lái)看待它。當(dāng)我停止使用無(wú)法解讀的Lorem Ipsum文本并從我最喜歡的小說(shuō)中挑選內(nèi)容時(shí)，我發(fā)現(xiàn)自己的設(shè)計(jì)有了很大的改進(jìn)。

就是這樣！在排版方面確實(shí)存在很多規(guī)則，而這些規(guī)則僅僅是我看起來(lái)最容易被打破的規(guī)則。你在網(wǎng)上看到了什么樣的排版問(wèn)題？讓我們?cè)谠u(píng)論中知道！