在网络上设置类型时，我们如何避免最常见的错误？这个问题最近一直困扰在我脑海中，因为我注意到很多排版都是乏味，令人沮丧，难以阅读的。那么，我们如何改进界面，以便我们的内容在任何时候和环境都易于阅读？如何从别人的错误中吸取教训呢？
这些问题鼓励我根据自己的个人经验记下一些易于应用并对易读性产生最大影响的规则。而且，如果你不知道，那么在印刷术方面我就是一个极客。所以，我想我会分享以下六条规则，我已经采用这些规则来启动我们。
＃ 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文本并从我最喜欢的小说中挑选内容时，我发现自己的设计有了很大的改进。
就是这样！在排版方面确实存在很多规则，而这些规则仅仅是我看起来最容易被打破的规则。你在网上看到了什么样的排版问题？让我们在评论中知道！