对于网页来说，视觉信息的传递非常重要。用户通过页面获取信息，文本、图片、图标、按钮、表单等UI元素都承载着不同类型的信息。其中，文字的作用尤为重要。在排版设计中，文字内容的处理占有相当大的比重。虽然互联网上呈现信息的方式多种多样，但90%以上的信息都是通过文本传递的。

　　好的排版设计可以使阅读成为一种乐趣，就像奥利弗赖因斯坦在他的文章中所说的：

　　“优化排版相当于增强可读性，提高可访问性，增强易用性，最终达到视觉平衡！”

　　换句话说，优化排版设计就是优化UI界面。今天的文章总结了文本排版的10个常见注意事项，可以帮助你真正提高内容的可读性和可读性。

　　1.控制字体数量

　　当你在网页的文本内容中使用三种以上完全不同的字体时，会使网站显得杂乱无章、不专业。

　　过多的字体和复杂的样式会影响布局。

　　为了防止这种情况发生，需要尽可能控制字体类型的数量。

　　总的来说，限制字体数量是很有用的方法(最多两种字体，通常一种字体可以处理大部分排版)，坚持在整个网站设计中使用一种字体可以带来一致的体验。如果您需要使用两种或两种以上的字体，请确保这些字体系列能够相互补充和匹配。以下面四种字体为例。乔治亚和Verdana字体大小、宽度相近，构成和谐搭配。相比之下，右侧的两种字体，巴斯克维尔和Impact，如果搭配在一起就不合适了。冲击太厚，巴斯克维尔的反差太突出。

　　2.尽量使用标准字体

　　网上的字体服务，比如Google  web  Fonts和Typekit，可以为你推荐很多新鲜有趣的字体。意想不到的字体设计可以在很多场合给用户带来新鲜的体验。在使用方面，也很方便。例如，谷歌网页字体是这样使用的：

　　选择您喜欢的字体，如“打开字体”

　　生成代码，粘贴到HTML文档的标签中。完成！

　　这个操作就像把大象放进冰箱一样简单。

　　那么，问题到底出在哪里呢？

　　首先，你选择的漂亮字体是任何人的电脑都没有的。第一个例子是Windows电脑里的微软雅黑不是Mac的标准字体。如果你在网页中使用微软雅黑，它会以平面的方式显示在Mac电脑上。你选择的字体不是万能的，最终会以另一种方式出现在别人的屏幕上。用户熟悉标准和常用字体，最安全的英文字体永远是Arial、Calibri、Trebuchet等。其实好的排版只是基础，吸引人的永远是漂亮整齐的排版和高质量的内容，而不是字体本身。3.控制每行内容的长度

　　每行文本的字符数直接影响内容的可读性。正如Baymard通过研究发现的：

　　“要想有好的阅读体验，每行文字控制在60个字符左右。这一数量的字符可以使您的内容可读性恰到好处。”

　　如果文本太短，用户内容的扫描频率会太高，往往会打破阅读的节奏，而如果太长，用户就很难保持持续的高浓度阅读。

　　在移动端，每行字符应该控制在30到40个字符之间，这也符合目前的用户习惯和阅读体验。参考下面的对比图，可以看出40~60个字符通常可以达到最好的阅读体验。

　　在网页设计中，通常使用em和px来控制文本块的宽度，从而控制每行的字符数。

　　4.选择可以在各种尺寸下很好显示的字体

　　用户注定要通过不同的设备访问您的网站。大多数用户界面需要使用不同大小的文本元素作为支持，如正文、标题、按钮标签、表单等。你选择的字体应该有不同的大小和不同的粗细。

　　最值得参考的是几个主流平台独立设计的字体家族，比如安卓上的Roboto，旧金山，苹果的全系列通用英文字体。

　　当字体足够大的时候，可识别性的问题不明显，但是当它在小屏幕上呈现内容的时候，可识别性的问题就很明显了。比如下面的Vivaldi字体很漂亮，但是尺寸小的时候可读性明显不足：

　　5.使用易于识别的字体

　　由于英文字体的几何特性，很多字体在设计时很难被用户识别，尤其是字母“I”和“L”，以及字母“R”、“N”和“H”。在选择字体时，要特别注意这些问题，确保这些基本问题不会给用户带来麻烦。

　　6.避免所有大写

　　事实上，在英语网站上使用所有大写文本是一个典型的设计禁忌。就像Miles  Tinker说的，所有段落都使用大写字母，相对于小写字母，可读性明显降低，直接体现在用户的身体上，也就是文本的阅读速度明显降低。

　　7.注意控制线的高度

　　在排版中，Leading，也就是行高，是一个很常见也很重要的概念。在排版设计中，行高也是值得注意的。用一个更容易理解的概念来解释这件事。一般情况下，行距应为文字高度的30%，以保证视觉易读性。德米特里法代耶夫(Dmitry  Fadeyev)发现，如果段落间距控制得好，整个阅读效率可以提高20%。这种布局可以让文字变得更容易被用户消化，剥离无关的细节。

　　8.确保色彩对比合理

　　文字和背景要有足够的对比，文字越明显，用户就越能快速清晰地获取其中的信息。按照W3C的建议，文本和背景的对比是有规律的：

　　小文本应确保与背景的对比度至少为4.533301

　　大文本(14pt粗体，18pt常规)应确保文本和背景之间的对比度超过：1

　　当对比度不足时，几乎无法阅读

　　这些符合对比度规格，易于阅读

　　一旦确定了配色，就需要在尽可能多的设备上进行测试，让不同的用户看到效果，尽可能避免可读性问题。

　　9.避免使用红色和绿色文本

　　红绿色盲是最常见的视觉障碍之一。彩色文本通常用于区分重要信息，但红色和绿色可能会失去视觉传达的功能。即使只用红色，也尽量搭配其他区分方法。

　　10.避免使用闪烁的文本

　　闪烁的文字确实能吸引用户的注意力，但它最大的问题是让人感觉不舒服，甚至会引起特定用户的癫痫病。恶心又让人分心的闪烁文字，无论从哪个角度来看，都是弊大于利的设计错误。

　　标签

　　现在排版在网页设计中越来越重要。糟糕的排版让人分心，内容无法清晰传达。反之，优秀的排版会更含蓄、无声，让内容传达得更清晰、更直观，最终用户更容易理解内容。