全文 2208 字，大约需要15分钟读完
Image by Willi Heidelbach from Pixabay
在UI设计中，文本是常用的元素之一，他是 传递信息 的主要工具。或许是因为它太过基础，很多时候我们会忽视它的存在，导致页面最终效果不够理想。对于注重用户体验的产品来说，每一个细节的偏差都可能成为致命伤。
“艺术是无依据可循的，但是文字排版却是有依据可循的。”
正文的大小、字阶的比例，字与字之间的距离、文本的颜色和对比度等，都是影响可读性和易读性的关键因素。
下文中提到的数值都只是一个参考，如果死磕数值那设计将失去了意义。重要的是理解你想通过页面传递给用户的信息，从而 明确设计目标，以此对你的设计进行针对型的调整。
“在高分辨率的显示器普及的今天，为什么我们还把浏览器默认的最小文本12px来定义正文的标准字号？即使这个默认值已经存在了超过20年。”
正文大小
在打字机时代里，我们定义 12pt（点）的文本是 印刷品的最佳阅读尺寸（这个值还考虑通过文本尺寸控制书籍、杂志、报纸的纸张数量成本）
20世纪90年代，数字平台建立了 pt（点）到 px（像素）到转换，在默认分辨率为 72dpi 的 Mac OS 上直接转换 12pt 等于 12px 。
pt = 1/72(英寸), px = 1/dpi(英寸)然而 12pt 在 Windows 默认的 96dpi 分辨率下等于 16px，当时的设计师普遍认为16px的正文太大了，因为那个年代的只有 14英寸的低分辨率屏幕作为衡量基础。
直到2004年，14px的文本仍然被认为对于正文来说是偏大的，但是从2011年开始 随着更大分辨率的显示器以及响应式技术的来到使得越来越多的设计师将14px的文本视为最小字体大小。
字阶
通过 字体大小区分内容层级 是常规的设计方法，如何选择字阶的大小达到比较满意的效果呢？
基于14px的主体字号我们可以通过一些“美”的比例得到一系例对应的字体大小组合，从而来支持产品及内容的需求；
Material Design 定义了13种尺寸组合，每种类型都有对应的语义说明：
Ant Design 定义了10种尺寸组合：
U-Design 定义了7种尺寸组合：
如果在比例选择上缺乏信心，也可以通过一些辅助工具，比如Modular Scale（Adobe的排版负责人Tim Brown创建的工具），里面 列举一些常规的比例关系，通过这些比例至少可以保证不出错。
对比度
在 页面中文本需要足够的对比度才能保证内容清晰易读，过强或过弱的对比度都是不利于用户阅读的，有什么方法可以去 科学地衡量 这个对比度呢？
“无论你的技术水平或身体状况如何，网络应该为所有人提供信息访问”
实际上，W3C 的 Web 无障碍推进组织制定了 Web 内容无障碍指南(WCAG)
如何快速的 验证页面是否符合WCAG 标准 呢？下面我列举一些自用的工具：
1）色彩对比计算器
2）网页在线比对工具
3）sketch色彩对比插件
字间距
在 较大尺寸的文本 中（例如标题）使用 更紧密的字间距，可以减少文本之间的空间提高可读性。
而在 较小尺寸的文本 中（例如正文）适当的 增加字间距，可以提高可读性，因为字符之间更多的空间增加了字形之间的对比度。
字体类型
在字体类型上除了我们常说的衬线字体与非衬线字体外，还有两种不同的间距类型：等宽字体和比例字体，这也是目前很多设计师容易忽略的区域。
比例字体：具有可变间距，每个字符宽度根据字符实际占用空间来定义
等宽字体：每个字符占据相同的空间宽度
下面提到的等宽字体和比例字体指的都是英语类字体，其实在现实社会中人们所书写的都是比例字体，但在计算机时代早期，因为技术限制的原因无法做到字体不等宽的设定从而产生的字体类型，随着技术的发展比例字体开始出现。
由于网络上有着 大量的内容信息和有限的可用时间，用户只会 阅读页面上大约28%的单词，通常会 扫读而不是阅读。而等宽字体就有一个很明显的缺陷，因为它所有 字符的宽度都是相同的并不适合扫读，所以在内容字体选择上不会使用等宽字体。
但是仍有 一些场景下等宽字体的阅读体验是优于比例字体 的，比如于最常见的是 代码相关 的内容都是用等宽字体。
其实除了代码外还有很多场景需要用到等宽字体，比如：
1）表格数字
序列表，价格表，财务报表 中每一列中 需要对比数据时，等宽字体可以让数据一致且清晰的方式展现 给用户。
2）动态标签
在动态标签中使用 比例字体 会导致 标签水平摆动，因为标签会 随着字符的变化而改变宽度，这会导致用户的视线失去焦点。
而 等宽字体就可以避免这种标签的摆动，这将改善产品整体的体验。
结语
前文所提到的 尺寸、对比度、间距、字体类型，在前端和产品经理眼中只是一个值。但是这些数值 细微的区别会对页面产生很大的影响，每个设计师都应该认真对待。
参考文献
Material Design
Ant Design
iOS 9 Proportional Numbers
Web Content Accessibility Guidelines (WCAG) 2.1
网友评论