字距调整、跟踪和引导：有效字体设计的简单指南

在为 Web 设计时，您必须始终牢记一件事：可读性。 无论设计多么出色，布局多么华丽，或者您对颜色的使用多么天才。 如果人们无法阅读屏幕上的文字（当然，这是假设屏幕上有文字），网站就无法发挥其功能。 文本可读性的三个最重要的元素是字距调整、跟踪和引导，尽管许多人要么让它们感到困惑，要么根本不了解如何有效地使用它们。 我们打算今天解决这个问题。

字距调整、跟踪和领先

如果您将这三个归结为绝对基础，您将看到 X 轴和 Y 轴上字符之间的间距。 深入研究，您会看到更多内容，但本质上，您正在查看文本字符之间的关系。 了解这三个属性之间的关系很重要，因为良好的设计和可读性取决于您是否尽最大努力使用它们。

这需要时间和练习。 但是，一旦您开始关注它们，您就会注意到字距调整、跟踪和行距在您每天阅读和看到的所有内容中都被有效地和糟糕地使用了。 让我们深入了解。

调整字距、行距和跟踪（以及更多！）

实际上，在我们深入研究之前，让我们先了解一下如何更改和调整这些设置。 虽然大多数文字处理程序都有调整它们的选项，但大多数人在编写副本或典型文本时不需要。 当您设计文本时，它会成为一个更大的问题，因此 Photoshop、Illustrator 等程序将提供您最需要的选项。

在 Adob​​e 产品中，您只需打开文本图层字符面板，您就拥有了所需的一切。 V/A 是字距调整，框中的 VA 是跟踪，带下划线的垂直 A 是领先的。 您还可以在此面板中调整删除线、粗细、大小、上标/下标等。 习惯于保持开放是值得的。

只需将光标放在需要调整间距的位置即可。

什么是字距？

让我们从字距调整开始。 字距调整是三者中最简单的，真的。 它是两个并排字符之间的空间。 总之，您可以使用可变字距调整，因为前两个字母之间的空格可能与后两个字母之间的空格不同（依此类推）。

在等宽字体中，每个字符占据完全相同的水平空间，没有重叠。 A 与 B 的宽度相同，J 与 K 的宽度相同。调整这些字母之间的字距调整往往比可变间距字体更容易，其中字母可能会重叠并以不同的宽度打印。

在上面的示例中，我们使用等宽字体Courier New复制和粘贴了三行。 顶行的字距设置为 0，这是默认值，并使用字体设计者选择的任何间距。 第二行在字母（和空格）之间设置为 200。如您所见，整行字符之间的空格是统一的。 最后，第三行被随机调整，每个单词内都有正负间距。 如您所见，每个字符的每一侧都可以有不同的字距调整。

什么是跟踪？

跟踪类似于字距调整，但它不是字距调整。 字距调整是两个单独字符之间的间距，跟踪是每个单词或行之间的统一间距。 不必像字距调整那样担心如何逐个字母地将事物组合在一起，而是确保整行的间距均匀。 回顾之前的示例图像，第二行本可以用更简单的方式完成。

我对字距调整所做的是将光标放在每个字符之间并调整为 200。我基本上跟踪了整行。 这是你应该做的。 只需在字符面板中突出显示您需要跟踪和调整的内容。

但是请注意，随着跟踪调整，某些字体和脚本可能会变得不可读。

手写字体和草书字体设置有特定的字距调整，如果您调整跟踪，您将在其他不间断的行中出现间隙。 或者从另一个方向压缩行，您可能只会使脚本不可读。

什么是领先？

使用领先，您不再需要处理字符之间的间距。 领先的是线之间的空间。

有效地利用前导可以让您有效地利用设计中的空白。 狭窄的线条——即使有正确且做得好的字距调整/跟踪——会给读者带来痛苦的体验。

在某些地方，您可能会看到名为line height 的领先，但它们大致相同。 一个好的经验法则是确保在角色上方和下方至少留出一点空间。 正如你在上面的例子中看到的，一个 40px 的字体有一个 48px 的行高。 这意味着无论如何，字母之间都会有间距。 如果将其设置为等于或小于字体大小，则会出现字符重叠。

此外，这是字符所在行的高度。 这不是人物的身高。 正如字距调整和跟踪不会使角色变胖或变瘦一样，跟踪也不会使他们变短或变高。 这只是他们周围的空间。

但是，如您所见，Photoshop 字符面板中字距调整/跟踪下的选项可独立于字距调整、跟踪和行距调整字符的宽度/高度。

Photoshop/Illustrator 键盘快捷键

角色面板的唯一缺点是当您需要微调时它会变得非常烦人。 值得庆幸的是，有一些键盘快捷键可以使字距调整、跟踪和引导使用变得轻而易举。

这些快捷方式适用于 Adob​​e Creative Cloud 套件，因此它们在 Gimp 或 Paint.NET 或其他程序中可能有所不同。

• 字距调整– 将光标置于两个字符之间，按住 ALT（或 Mac 上的 Option）并使用左/右箭头调整字距调整
• 跟踪– 突出显示单词/行，按住 ALT（或 Mac 上的 Option）并使用右/左箭头调整突出显示文本的跟踪
• 行距- 突出显示要调整的行，按住 ALT（或 Mac 上的 Option）并使用向上/向下箭头调整行之间的间距

虽然您可以将光标置于字符面板中或突出显示文本和类型值，但键盘快捷键使整个过程不再那么乏味和耗时。 此外，您可以获得更精细的控制，因此您也可以通过这种方式做出更好的设计。

（顺便说一句，如果您不经常使用 Photoshop/Illustrator/Premier 等键盘快捷键，我们强烈建议您学习，因为它使您的工作流程更顺畅、更愉快、更高效。）

包起来

字距调整、跟踪和引导是网页设计（以及一般设计）中可读文本的基础。 了解差异以及如何有效地使用它们中的每一个将使您成为更好的设计师。 像字母和线条之间的间距这样简单的东西可能会产生如此大的影响，这似乎有点奇怪，但是一旦你处理了它，即使只是一小会儿，你将永远不会看网站、广告、徽标或广告牌再次以同样的方式。

在设计中获得完美的跟踪、字距调整或领先的技巧和窍门是什么？

BarsRsind/shutterstock.com 提供的文章特色图片