译言网 | 设计易读的网页文本

   易读性：一种阅读的状态或品质；是一种影响印刷品是否能够持续阅读的属性。-dictionary.com

文本可以是优美的，简洁的，粗野的，引人的，激动人心的或很多其他的一些特性。它可以唤起情绪并帮助用户理解你要传达的信息。它可以有很多种类型的表达，但有一点是共同的-它必须是可读的。

这是一个常常被遗忘的事实。设计师们在方寸之间植入太多的信息，或者选择一些看上去很美而不是很易读的东西。如果你的文本类型不易读，那么你的设计就不是十分有效的。

尽管这听起来很粗暴，但却是适用于所有的文本设计。你会问：把文本类型作为艺术元素怎么样？不具可读性的文本类型在这类设计中是可行的，但也仅限于与本身就很易读的类型配合使用。

 

[](http://www.fastcompany.com/3034588/second-shift/how-i-taught- my-6-year-old-to-use-the-internet-and-not-let-google-take-her-allo)

[](http://typographica.org/on- typography/happy-birthday-mr-typographica/)

[](https://medium.com/@thibault_imbert /baking-is-engineering-eb2721ff410b)

那么什么使得文本变得可读？这实际上是结合了很多因素，包括行长度，行间距，字体类型，外边距和内边距，以及颜色和对比度。

每个独立的元素都导致阅读网页是容易还是困难。并且每个元素其实对于设计师来说都是可控的。注意，我们这里讨论的元素指的是网站的主体文本，从这方面来说，可读性绝对是最重要的一部分。（只要网页的主体部分可读性很高，许多其他的元素是可以降低要求的。）

• 行长度：文本中每一行的字符个数会影响到该文本的可读性。如果文本宽度相当宽，那是很难读很吓人的。同样，如果文本宽度很小，对于读者的眼睛会有一定的压力，引起模糊。

• 行距：行与行之间的距离也是很重要的。想想如果这篇文章上边一行挨着下边那行会是什么样，你就完全理解了。

• 字体格式：字体同样会影响可读性。Simple serif和sans serif字体是最适合阅读和浏览的，然而花式字体，手写体以及新式的字体是最难阅读的。
  外边距和内边距：就像行距一样，文本周围以及文本内部的每部分内容之间的距离，影响到了读者阅读正文的感受。

• 颜色和对比度：文本和相关的背景颜色也是至关重要的。如果你在绿色的背景上显示绿色的文字，那几乎是读不出来的。这也就是为什么多数设计师在深色的背景上显示浅色的文字或者在浅色的背景上显示深色的文字。而对比度会使得文本更易读。

  那么如何设计最易读的文本呢？对于主体文本部分，每一行有需要有多少字符是有一

  些基本的规则的-每一台设备都是不同的-这些可以生成最优的阅读效果。

  那么应该从哪里着手开始呢？优化行长度可以协助你决定文本的大小。你可以这样：决

  定主体文本框架的宽度-你可以大体设计为电脑桌面、平板或设计的宽度。然后调整文

  本的尺寸使其处于一个理想的范围内。

  虽然还有其他的一些因素可以考虑，但这些规则确实是一个很好的切入点。

  电脑桌面：每行55到75个字符，包括空格符，最好是每行接近65个字符；
  移动设备：每行35到50个字符。

  将每行最优字符个数和最合理的行间距都考虑进去，就可以提高可读性。行间距通常

  是由主体文本的大小的百分比来确定的或者是固定值或通过ems。

  电脑桌面：1.5倍行间距
  移动设备：1.75到2倍行间距

  如果你想找一款好软件来简化你的工作，可以试试Golden Ratio Typography Calculator.

  
  易读性的其他小贴士
  为打造出易读的排版，除了文本的主体部分，字体形式也是大有可为的。使用标题，项

  目符号，段落之间额外的间距以及颜色可以增加整体的可读性（并且读者能够容易浏览

  网站）。

   

  
  可以考虑通过这些元素来增加文本的层级，来做一个更加完整的-并且易读的-网站设

  计。并且记得把这些元素设计成独特的字体、字号以及颜色，并且与正文部分保持协调

  。

  
  标题
  链接
  粗体或斜体字
  项目符号或数字列表
  图像元素如图片
  说明
  引用
  混合使用serif 和sans serif 字体的元素

  
  10种易读字体
  没有任何一篇涉及可读性的文章是完全不推荐字体格式的。所以，这里有10种具有高易读性的字体-而且很流行-可以用来创建网站。

  
  

  Sans Serifs

  Open Sans

  

  Lato

  

  Exo

  

   

  Nobile

  [

  
  ](https ://www.google.com/fonts/specimen/Nobile)

  Droid Sans

  

  Serifs

  Arvo

  

  Old Standard TT

  

  Abril Fatface

  [

  
  ] (http://www.google.com/fonts/specimen/Abril+Fatface)

  Vollkorn

  [

  
  ](h ttp://www.google.com/fonts/specimen/Vollkorn)

  Josefin Slab

  

•  

• 易读性清单

• 
   

  

  

  

  现在你认为对于字体和格式有好想法可以运用于下次的设计。你确定把所有的想法凑

• 在一块儿就完全易读了么？这儿有一个快速列表来帮助你完成设计。

  正文部分的字体足够大吗？是不是在每种设备的最优行长度以内呢？

• 文本的每一行的行间距足够吗？

• 文本和页边距以及其他元素之间的空间够吗？

• 背景和正文部分的对比度足够吗？

• 每段之间有额外的空间吗？

• 标题和其他元素与正文部分有差别吗？

• 是否使用其他元素（项目符号，粗体等）来分解大段的文本？

• 正文部分是否使用了易读的字体（建议为simple serif 或sans serif）？

• 结论
  易读性是设计中一个重要的部分。如果不能阅读和理解网页上的内容，对于用户来说是不想关和不重要的。
  在设计项目中你打算怎么规划易读性？对于成功设计你有其他的小贴士吗？请在评论中和我们一起分享吧。