字体的字符和字间距

字符

字符是一个信息单位，简单来讲就是一个汉字、假名、韩文字、标点符合、英文字母等。

提问：

一个英文字母是一个字符吗？一个标点符号是一个字符吗？一个汉字是两个字符吗？设计中什么时候运用到字符呢？

答案：

汉字、英文字母、标点符号、假名等都是一个字符。

很多人的概念中会把中文、英文与全角、半角关联起来，其实是不对的。工程师都会有基本认知。可以通过代码检测出汉字、英文字母、标点符号、假名对应的字符。我通过Bear软件进行测试：1、汉、？、A、a共9个字符数。

那为什么汉字看上去要比英文字母和标点符号大？因为字节是用作计算机信息计量单位，一个英文字母占一个字节的空间，一个中文汉字占两到四个个字节的空间。中文汉字的字节空间取决于不同的字符编码形式。

字符编码

字符编码种类有ASCII编码、EBCDIC编码、GB2312编码、UTF-8编码、以及Base64编码。

国际通用的编码标准是UTF-8编码；其中GB2312编码是为了满足国内汉字的需求而开发的。

如图前端代码中都需要定义字符编码标准的。

字符在设计中的应用

当登陆或注册、定义用户名时，需要定义input框输入的最大字符数。因为汉字空间大于字母空间，所以当定义最大字符数时，input输入框的宽度可以容纳汉字的最大字符数。

如图微信的用户名纯汉字为最大16个字符。

如图微信的用户名纯字母为最大32个字符。

如图微信的用户名中文加拼音有7个汉字和18个拼音，共25个字符。当名字保存后，名字字段被分成了两行了。这个我不知道是Bug还是规则没定义好，

其实是可以用定宽的方法去解决的。

按照名字设置好的显示样式，可以按照汉字的最大字符样式定义最大框度，超过不在允许输入，个人信息页面也不会出现两行的特殊情况。

如图上海公众交通卡的文字介绍红框就是内容展示信息的固定宽度，程序员会通过代码自动计算显示不下就…，解决了定义最大字符后容器宽度的问题。

微信为了满足更多用户的需求，在视觉美观度上会运用多套规则去定义，而在我们一般企业模块化和组件化后，再去根据业务推进设计（基于美学与用户体验需要多种规则实现的）就很难推进。产品在追求效率的同时，美学和用户体验也得跟上。目前国内C轮以下的企业真心很难推进。其实就是程序员口中的hardcode（硬编码）。

字间距和字偶间距

字间距之间选择正确的距离是为了提高文本的可读性和易读性。好的字体都是经过精心设计的字体，都需要精心调整字间距。

字间距（Tracking / Letter-spacing）

字间距是每个字母之间的间隙。

词间距（Word Space）

词间距是单词之间的间隙。

字偶间距（Kerning）

字偶间距是经过对特定字母调整后的间距，来让文字视觉上更和谐。铅字时代，字偶间距的调整需要排印工人根据实际情况进行优化调整。到了计算机排印时代，字偶间距的设置是由专业的字体设计师设计完成，并默认内嵌在相应的排版软件中，在大多数情况下并不需要设计者自行调整。

字偶间距训练小游戏

字偶间距训练小游戏是Jan Tschichold在1966年开出的，通过字间距的调整来锻炼设计师的眼力，以及字体负空间留白关系的处理。

https://type.method.ac/#

通过调整字间距提高文本可读性

字间距和字偶间距调整是文本设计的基本要素，对文本可读性和视觉效果影响很大。字间距调整是增加或减少选定文本块的间距，而字偶调整是增加或减少特定字符的间距。

在 InDesign 中，可以使用“Character”（字符）面板轻松调整字间距（Tracking）和字偶距（Kerning）。要打开“Character”（字符）面板，请选择 “Type”（文字）>“Character”（字符）。

要调整字间距，首先请选中文本从“Character”（字符）面板的下拉菜单中选择“Tracking”（字间距）值，点击向上/向下箭头，或直接输入一个值（以千分之一 em 为单位）。

提示：可同时按 Option (Mac) 或 Alt (Windows) 键和键盘上的向左或向右箭头，快速直观地调整字间距。

调整字偶距

有时候，相邻文字的间距会由于过大或过小而影响可读性，并在文本行中造成多余的空白。InDesign 提供了三个文本字偶距调整选项：“Metrics”（度量）、“Optical”（光学）和“Manual”（手动）。

其中，“Metrics”（度量）和“Optical”（光学）字偶距调整是由 InDesign 自动完成。

InDesign 自动调整

两个自动字偶距调整选项都可以在“Character”（字符）面板中找到。“Metrics”（度量）字偶距调整为默认设置，基于字型内置的字偶距表格进行调整。InDesign 会按照字体设计师的设计自动调整特定文字的字偶间距。

“Optical”（光学）字偶间距调整是根据文字形状调整字偶间距。如果你对“Metrics”（度量）字偶距调整的结果不满意，或者你希望在一行中使用多个样式或大小的字体，“Optical”（光学）字偶距调整会非常有用。

手动调整字偶间距

在大标题中，可能需要突出某些文字。要手动调整字偶间距，请将鼠标放在两个文字之间，然后在“Character”（字符）面板中更改字偶距的数值即可。

提示：可将鼠标放在任意两个文字之间，按 Option (Mac) 或 Alt (Windows) 键的同时点击键盘上的左箭头或右箭头，快速直观地调整字偶间距。

紧排与宽排

文字与文字的间隔（字距），或是行与行的间隔（行距），关系到文章的可读性与易读性。将字距或行距变小称为“紧排”。一般来说适当压缩字距，可以让整行文字更容易阅读，如果过度压缩就会容易无法阅读。

紧排

“紧排”也能运用在行距上，当行距缩小到比易于阅读的间隔更小后，文字就会无法阅读。“紧排”可以制造出紧张感和密度感，所以“紧排”应该适可而止，不宜过度使用。如图紧排在可阅读范围之内，加上合理的布局让版面更和谐。

宽排

文字拉大字距的设计称为“宽排”。“宽排”可以展现轻松柔和的空间感。在儿童绘本的图画书中，常见字与字之间留有足够的空间。古诗词中字距也会适当拉大给人轻松的阅读节奏。

还有在海报、音乐封面中常常把文字当成点来处理，拉大字距营造一个高级优雅的氛围。当然这里的文字不是最重要的信息，如果将重要信息过于形式化而忽略易读性，这会是一个失败的设计。如图版面的主题就采用了宽排，适当的拉大字距让版面有呼吸感，整个界面看上去更加高低。

字间距在产品界面中的应用

移动端

在产品界面设计中，设计师可能很少去关心字间距，我也请教过资深iOS开发人员，字间距可以定义，但是还是用系统默认的多，很少去改动。

在几个月前微信改版时，我尝试研究过微信改版后的字间距。由于当时找不到汉字的字间距的调整规范，只好运用了最傻的方法，截图然后像素级对照去尝试整理微信APP的字间距的规律。

也整理了iOS系统默认的字间距。

从整理的字间距来看，普通都是字号越大，字间距越紧凑。汉字是等宽字体，不同字号的字间距也没有强制的规范。宋朝大书法家苏东波说：“大字难于结密而无间，小字难于宽绰而有余。”意思是说大字要写紧凑，而小字要写的宽松。虽然这是书法理论，但是用于文字排版也一样成立。

短短几个月过去了，今天再次写这篇文章时，微信、iOS的字号、字间距都重新做了调整，导航栏的标题字号从原来的17px改成了16px，整体页面布局也更加紧凑了。其他很多微信界面的字号都缩减了1px。

我的界面中的「名称」和公众号详情页的「标题」都是21px，但是我的界面中字间距为0.15px，而公众号详情页的「标题」字间距为1px。相同字号运用了两套字间距的规则，由于公众号标题一般文字比较多，适当宽松一点更易于阅读。如果我们对于字间距需要定义一套标准，微信就是最好的标准，用户多，使用率高，界面简洁。微信会根据不同的界面场景去定义对应字间距的规则。

B端、Web端

B端、Web端主要还是参考Material Design的字间距进行定义或微调，毕竟西文字体和汉字还是有一定区别的。

总结

字间距/字符没人关心，没人去研究，这样的研究才会跟有意义。时代在变，字库厂商的字型设计在变，人们对事物感知也在变化，好的设计系统应该是动态持续变化的。我们在成长的道路上也是需要学习复杂的系统，学习是痛苦的，也是人一步一步成长成熟的体现。