字距調整、跟踪和引導：有效字體設計的簡單指南

在為 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 提供的文章特色圖片