如何提高网页设计中的文本可读性

网页的文本，是网页设计中的一个重要元素，文案设计的好坏决定着网页的成败。网页文本可以是美丽的、简单的、狂野的、引人入胜的、令人兴奋的以及许多其他充满未知的东西。它可以吸引到用户的注意力，让用户快速的了解他想要的信息，激起用户情感并帮助用户理解你网站所要表达传达的信息。文本的类型可以是五花八门，千变万化，但有一点是常见的——它必须是可读性很强的。

 

这是一个有时被遗忘的重要因素。设计师努力将太多信息放入狭小的空间里面，或者选择看起来比阅读更好的东西。但要点是：如果你的字体设计如果辨识度不高，主次性不强，那么你的设计就不会完全有效，因为文字可读性不强，没有给用户留下深刻的印象。

 


简而言之，什么是可读性

 

那么是什么让类型可读呢？它实际上是许多因素的组合，包括行长、行距、字体样式、边距和填充以及颜色和对比度。

每个单独的元素都会影响在屏幕上阅读内容的难易程度。这些元素中的每一个都是设计师可以控制的。请注意，当我们在整篇文章中讨论这些元素时，我们指的是网站的主体文本，其中可读性可以说是最大的问题。（只要正文具有高度可读性，其中许多准则对于其他文本元素就宽松得多。）

行长：一行文本中的字符数在很大程度上影响整体可读性。如果文本非常宽，则可能会令人生畏且难以阅读。太短的文本行也是如此，这会给读者的眼睛带来压力并造成混乱。

前导：文本行之间的空间量同样重要。考虑这篇文章，如果每一行类型都触及它上面和下面的行，你将无法理解这些词。

字体样式：字体样式也会影响可读性。简单的衬线和无衬线字体是最易读和可扫描的，而华丽的样式、脚本和新奇字体最难破译。

边距和填充：与前导一样，对象周围和对象之间的空间量会影响用户阅读实际单词的能力。

颜色和对比度：文本相对于相应背景的颜色也很重要。如果您将绿色字体放在绿色背景上，则可能难以阅读。大多数设计师在浅色背景上选择深色背景上的浅色文字是有原因的。对比使字体易于阅读。

 


不同屏幕上的显示形式

 

那么如何创建最易读的类型呢？对于正文文本，有一些关于每行和每种设备类型的字符数的基本准则，这有助于实现最佳可读性。

那么你怎么知道从哪里开始呢？最佳行长可以帮助您确定文本大小。方法如下： 确定正文文本框的宽度——您通常可以将其假定为桌面、表格或移动设备大小。并调整字体大小以落入理想的字符数范围内。

 

虽然还有其他因素在起作用，但这些指南是一个很好的起点。

桌面：每行55到75个字符，包括空格；理想的是每行接近 65 个字符

移动设备：每行 35 到 50 个字符

将每行的最佳字符数与较大的行间距（或行距）相结合以提高可读性。行距通常最好定义为正文大小的百分比，并且可以定义为硬数字或使用 em。

台式机：字体大小的 1.5 倍

移动设备：类型大小的 1.75 到 2 倍

如果您正在寻找一种出色的工具来帮助简化所有这些数学运算，请尝试使用黄金比例排版计算器。

其他可读性提示

 

创建可读的排版与不是主体文本的类型也有很大关系。使用标题、项目符号列表、段落之间的额外间距和颜色也可以增加整体可读性（以及读者浏览网站的能力）。

考虑使用这些元素添加文本层次结构，以创建更完整且可读性更高的网站设计。并记住使用与主体文本相协调的特定字体、大小和颜色来“设计”这些元素中的每一个。

既然您认为自己对下一个设计项目要使用的字体和风格有了一个很好的了解，您确定您已经以完全可读的方式将所有内容组合在一起了吗？这是一个快速清单，可帮助您规划字体设计。

主体型够大吗？它是否落在每个设备尺寸的最佳线长范围内？

每行文本之间是否有足够的间距？

文本和页面边缘以及其他设计元素之间是否有足够的空间？

背景和正文之间的对比度是否足够？

每个新段落之间是否有额外的空间？

标题和其他文本元素是否与主体文本不同？

您是否使用其他元素（项目符号列表、粗体等）来分解大块文本？

您是否为主体使用了可读字体（最好是简单的衬线或无衬线）？

结论：可读性是设计的重要组成部分。如果您无法阅读和理解页面上的内容，则它对用户而言永远不会相关且重要。你如何规划设计项目的可读性？您还有其他成功秘诀吗？欢迎与我们分享。