文章目录

调整字间距,先选中文字,在 Pixso 右侧文本属性中修改字间距数值,再回到实际阅读尺寸观察。中文正文优先保持连贯,英文标题要留意字母组合,数字列表还要检查列对齐;字距不是越大越好,也不能代替行高。下面结合三种观察方法,帮助你判断该增大、减小,还是维持默认值。

在界面设计中,文字要和按钮宽度、卡片空间一起判断。先选好字体与字号,再调间距,避免换了一种字体后继续沿用原来的数值。

同一组中文正文、英文标题与数字金额在字距调整前后的排版对照

字间距是什么意思?

字间距是相邻字符之间的水平间隔;行与行之间的距离属于行高或行距。整体字距调整会影响一段文字中字符的间隔,字偶调整则关注某两个字符的组合,例如英文标题中的 A 与 V。先确定问题发生在哪一层,再选择调整方式。

当进行字距调整时,我们可以调整两个字符之间的距离,以使其看起来更加协调。我们知道在西文排版中,字间距是非常重要的参数,这主要是因为英文字母的外形是不同的,其所占的宽度空间也就不同,在设计时往往需要进行重新调整。

字母 P 与 I 的字形宽度不同,但字体通常已经包含字形宽度和字偶信息,不能只因为两个字母宽度不同就判定默认字距错误。短英文标题可重点观察 A/V、T/o 等组合是否显得忽松忽紧;中文标题则要观察整行文字的节奏。相关的文字排版技巧可作为相关延伸,字距本身仍要回到当前字体和内容判断。

字形宽度与字符之间留白的关系

字间距调整的3个技巧

下面在 Pixso 中输入“pixso”,通过右侧文本属性调整整体字间距。先保留一份默认状态,旁边复制一份用于比较,避免只盯着修改后的结果。

使用文本工具(快捷键 T)输入“pixso”,选中文本图层,再修改右侧文本属性中的字间距数值。一次只改字距,暂时保留字体、字号和文本框宽度,便于判断变化来自哪里。

在Pixso右侧文本属性中调整字间距

字距是否合适,需要结合实际字体和内容观察。数值相同不代表视觉间隔相同,调整后应通读整行文字,确认它既协调又容易辨认。

那么,在进行字距调整时,对于还没什么经验的设计师,该如何进行调整把控,才能做出好的字距调整呢?这里,Pixso设计师,也给大家总结了以下几个要点:

2.1 缩小界面观察

字间距调整是一个非常注重细节的过程,通过缩小界面,可以帮助我们确认文字是否与放大界面看起来一样紧凑。例如,如果当缩小界面时即从远处看文字时,文字字母间的距离无法辨认,那么可能就需要加宽它,以保证其识别性。

缩小画布观察文字整体密度

2.2 模糊文字

当你盯着一个词看,会觉得有些奇怪时,很有可能就是存在字间距的问题,可以使用模糊该文字的方法帮你判断,是哪里出现了问题。通过模糊文字的方式,可以帮助我们更多关注文字的形状和颜色,而不是文字本身。

比如说将在白色的背景上的黑色字体进行模糊,如果文字的一部分显得很暗,那可能就是因为那里的字符之间的距离太小了。反之, 如果文字的任何部分看起来都更亮,那么它们的字符间就有更多空间。

可以复制一份文字,在 Pixso 的效果设置中添加高斯模糊,暂时弱化具体字形,观察文字的黑白分布。保留原文本作对照,检查后回到清晰文字继续排版。

新建画板并输入“pixso”,选中文字后调整高斯模糊效果。模糊仅用于辅助观察,不需要为了这一步把文字转成组件;最终展示的文本应保持清晰。下图展示了文字模糊后的观察效果。

用高斯模糊辅助观察字符之间的黑白分布

2.3 倒置文字

还可以复制一份文字并旋转或翻转,让自己暂时不按词义阅读,集中观察字形之间的留白。下图展示垂直翻转后的观察方式;检查结束后仍需恢复正常方向,在实际尺寸下通读一次。

垂直翻转文字后观察字形间隔

中文、英文和数字,分别看哪里

内容任务先观察调整后要确认
中文正文词句能否自然连续阅读不要因为拉开字距让一行变短、卡片突然多出数行
短英文标题相邻字母组合的留白是否均匀整句仍像一个词组,不能只修一对字母却破坏整体节奏
价格与数据列数字是否容易比较,单位是否贴合数值不同位数能否对齐;若有等宽数字选项,先判断是否更适合数据列
按钮与导航标签文字与两侧留白是否协调长标签不被裁切,触区和布局不因字距调整失去一致性

例如同一张订单卡片中,“待付款”是状态标签,“PAY NOW”是英文按钮,“¥1,280.00”是金额。三者不能直接套一个“高级感字距”:状态要快速读懂,按钮要维持整体词组,金额要便于比较。先复制同一张卡片,只调整其中一种内容,再与原稿并排观察。

判断字距时也要看真实内容长度。把两字标题换成十几个字的标题,把三位金额换成带小数的五位金额;如果文字溢出,不要首先把字距压成负值来硬塞,而应检查容器宽度、换行和信息优先级。

留出用户放大和调整间距的空间

页面交付后,用户可能放大字号或使用自定义文字间距。设计阶段可先在副本中扩大字号和间距,观察按钮、表格和提示框是否出现遮挡或截断;画布检查完成后,仍需要在真实网页中验证重排。

W3C 的文字间距说明关注的是用户调整间距后内容和功能仍然可用,并不要求所有设计默认使用同一个数值。因此,不必把某个间距比例当成中文正文、英文标题和数字界面的万能参数。

用Pixso保存并复用文字样式

每种字体的字形结构不同,同样的间距数值未必产生同样的视觉效果。保留缩小观察、模糊观察和倒置观察三种练习,再用实际内容通读,才能判断调整是否让文字更易读。

可以用 Pixso 练习这些方法:在浏览器中打开设计文件,输入实际要使用的文字,再将调整前后的版本并排比较。团队协作时,把确定的文字样式留在同一份设计文件中,便于成员查看和复用。

完成一处调整后,可以把适合当前界面的字体、字号、行高与字距整理为文本样式,供同类标题或正文复用。复用的是已经验证过的文字层级;遇到另一种字体、语言或容器宽度时,仍要重新观察。

现在可以在 Pixso 中练习字距调整,从一段中文、一组英文标题和一列金额开始,逐项比较调整前后的阅读效果。

Pixso中的字体与颜色样式管理