东城网站建设:为可读性设计网站文本

2019.08.16 mf_web

81

文字可以是美丽,简单,狂野,引人入胜,令人兴奋和其他许多东西。它可以激发情绪,帮助用户理解您的信息。类型可以是很多东西,但有一点是常见的 - 它必须是可读的。东城网站建设

这是一个有时被遗忘的因素。设计人员努力将太多信息放入太小的空间或选择看起来比读取的更好的东西。但关键在于:如果您的类型不可读,您的设计将无法完全发挥作用。

可读性:“可读的状态或质量; 影响印刷品在一段时间内可以轻松阅读的类型的属性。“ - dictionary.com

虽然这是一个大胆的声明,但几乎适用于所有事情。“你问这个类型的艺术元素怎么样?” 不太可读的类型可以在这种类型的设计中工作,但仅限 - 并且 - 如果它与可读性质的类型配对。

坚果壳中的可读性

快公司

印刷排版

介质

那么什么使类型可读?它实际上是许多因素的组合,包括线长,前导,字体样式,边距和填充,以及颜色和对比度。

每个单独的元素都有助于在屏幕上阅读有些简单或困难的内容。这些元素中的每一个都是设计师可以控制的。请注意,当我们在本文中讨论这些元素时,我们将引用网站的主体文本,其中可读性可能是最大的问题。(只要主体具有高可读性,其中许多指南对于其他文本元素来说要宽松得多。)

  • 行长度:一行文本中的字符数有助于提高整体可读性。如果文字非常宽,则可能令人生畏,难以阅读。对于太短的文本行也是如此,这会使读者的眼睛受到压力并导致混淆。

  • 领先:文本行之间的空间量同样重要。考虑一下这篇文章,如果每一行类型触及它上面和下面的线条,你将无法理解这些单词。

  • 字体样式:字体样式也会影响可读性。简单的serif和sans serif字体是最易读和可扫描的,而华丽的样式,脚本和新颖的字体是最难破译的。

  • 边距和填充:与前导一样,对象周围和对象之间的空间量会影响用户读取实际单词的程度。

  • 颜色和对比度:相应背景的文本颜色也很重要。如果您在绿色背景上放置绿色类型,则可能难以阅读。大多数设计师选择在浅色背景上的暗色背景上选择浅色文字是有原因的。对比度使刻字易于阅读。

不同屏幕上的可读性

乌木

拉时代

新闻周刊

那么如何创建最具可读性的类型呢?对于正文文本,每行的字符数和每种设备类型都有一些基本的指导原则,这些指南有助于实现最佳的可读性。

那么你怎么知道从哪里开始呢?最佳线长可以帮助您确定文本大小。方法如下:确定正文文本框架的宽度 - 通常可以将其视为桌面,桌面或移动尺寸。并将类型大小调整到理想字符数范围内。

虽然还有其他因素可以发挥作用,但这些指南是一个很好的起点。

  • 桌面:每行55到75个字符,包括空格; 理想的是每行近65个字符

  • 移动设备:每行35至50个字符

将每行的最佳字符数与较大的行间距(或前导)相结合,以提高可读性。前导通常最好定义为正文文本大小的百分比,可以定义为硬编号或使用ems。

  • 台式机:尺寸的1.5倍

  • 移动设备:类型的 1.75至2倍

其他可读性提示

创建可读的排版可能与非主体文本的类型有很大关系。使用标题,项目符号列表,段落和颜色之间的额外间距可以增加整体可读性(以及读者扫描网站的能力)。

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

  • 链接

  • 文字中的粗体或斜体

  • 子弹或编号列表

  • 图片元素,如照片

  • 标题

  • 拉引号

  • 混合衬线和无衬线字体的元素

10种易于阅读的字体

没有一些类型的建议,没有关于可读性的文章是完整的。所以这里有10个高度可读 - 相当受欢迎 - 用于构建网站的字体选项。

Sans Serifs

打开Sans

打开Sans

拉托

拉托

外

金钗

金钗

Droid Sans

Droid Sans

衬线

帕特

帕特

旧标准TT

旧标准TT

Abril Fatface

Abril Fatface

Vollkorn

Vollkorn

Josefin Slab

Josefin Slab

可读性清单

5BY

再大一点

既然您认为自己对下一个设计项目要使用的字体和样式非常了解,那么您确定已经将所有内容整合在一起,完全可读吗?这是一个快速清单,可帮助您规划类型设计。

  • 主体类型足够大吗?它是否属于每种器件尺寸的最佳线长范围?

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

  • 文本与页面边缘和其他设计元素之间是否有足够的空间?

  • 背景和主体文本之间是否有足够的对比?

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

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

  • 您是否使用其他元素(项目符号列表,粗体等)来分解大块文本?

  • 您是否使用可读字体作为主体(最好是简单的衬线或无衬线衬线)?

结论

可读性是设计的重要组成部分。如果您无法阅读和理解页面上的内容,那么对用户来说永远不会是相关和重要的。

您如何计划设计项目的可读性?你有成功的其他提示吗?在评论中与我们分享。

东城网站建设

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP