你可曾盯著剛排版的單詞或詞組卻覺得看上去間距有點遠？這就涉及到字偶距的問題了。字偶距是指兩個字母（或其他字符，比如數(shù)字，標點符號等）之間的空白，而調(diào)整該空白可以避免看起來笨拙的單詞間隙，同時提升可讀性。今天這篇干貨，幫你徹底學(xué)會字偶距的調(diào)整方法。

有時字體默認的字偶距對特定的字母組合并不理想，需要手動調(diào)整讓所有字母間的空白看起來和諧一致。這里有必要提一句，字偶距事關(guān)視覺感受，關(guān)心字母之間視覺距離而不是實際距離。字偶距要求調(diào)整版面設(shè)計來實現(xiàn)視覺上的恰當，并非為了數(shù)學(xué)上的等距。

印刷字體正是因為有了幾分視覺錯覺而相當有趣。如果按字母間距相同的原則排版，那么眼睛看到的空白卻不會是均勻的。這是因為字體各自有獨特的形狀，如同拼圖碎片，每一對字母要彼此配合才能達到最佳效果。

繼續(xù)閱讀，了解為什么設(shè)計中字偶距如此重要，另外還有九條專家建議供您參考，像專家一樣開始調(diào)整字偶距吧。

為什么要將字偶距納入設(shè)計流程

字偶距或許看起來是無關(guān)緊要的細節(jié)，但是將其納入設(shè)計流程的收尾階段，當作一個可以迅速搞定的額外小步驟，可以讓以排版為核心的設(shè)計項目看上去更加優(yōu)雅。而對大型，極其顯眼的排印標識或大標題而言，字偶距是最重要的。

要進一步了解為何調(diào)整字偶距是個明智的決定，不妨想象每個字母都限制在框內(nèi)。你也許看過下面這種舊舊的木質(zhì)或金屬活字的照片：

盡管基本不再使用物理活字了，現(xiàn)行的數(shù)字字體的實現(xiàn)方法仍然與之類似。每個字母仍束縛在不可見的框內(nèi)，有時這些框給字母對兒引入了過多的空白，要想有看上去均勻的空白就需要框與框有重疊。在過去的打印流程中，排字工人可以在木活字上刻 V 形切口讓字母與字母靠得更近，看上去更舒服。而如今，工序不再繁瑣，點幾下鼠標就可以搞定。

學(xué)習字偶距：九條專業(yè)建議

字偶距沒那么難，只需理解其工作原理。 盡管調(diào)整字偶距的主要方法仍是用眼睛盯著字間空白并手動調(diào)整來決定怎樣看上去最好，你依然可以通過一些技巧簡化這一過程。

01. 當心特定的字母組合

一些字母（尤其是那些有明顯的斜線或突出部分的字母）因其形狀難以調(diào)節(jié)字偶距。全大寫字母的單詞排版也需要格外留意。如果想象字母周圍有無形的框，這些難纏的字母就沒法緊挨框的邊，只能留著難看的間隙。下面這些難搞的東西需要額外留意：

• 傾斜的字母：A, K, V, W, Y
• 有橫劃和字臂的字母：F, L, T
• 字母組合：W 或 V + A（順序隨意）；T 或 F 跟著小寫的元音字母

如果單詞中間一個難處理的字母，仔細看看該字母和其兩側(cè)字母如何相互影響。比如，PANCAKE 中第一個 A 和后面的 N 看上去不錯，但是和前面的 P 的間隙過大。

02. 理解空白和字形的關(guān)系

上一個建議主要關(guān)注成對的大寫字母帶來的問題，但是調(diào)整小寫字母字距時也有難題。這是因為直形字母和圓形字母的相互組合與其自身組合看起來不同。

排版設(shè)計者 Ilene Strizver?推薦?用下述方法來排字：兩個直形字母用最多的間距，直形字母和圓形字母則需要相對較少的間距從而在視覺上達到對等，而兩個圓形字母搭配所需間距比前者更少。下面的例子形象化的表述可以幫助理解。希望你能看出來從左到右字母的間距（用彩條表示）在縮小。然而單獨看來這些字母間距像是均勻的。

在一個真正的詞上實踐一下這個方法吧。觀察每個字母的兩邊，間距排布應(yīng)該和上述三種間距組合的任意一種相吻合。

單詞 ”headline“ 中，直形字母相鄰共用相等的間距（藍色標注），而直形與圓形字母相鄰（青綠色標注）還有圓形與圓形相鄰（橘色標注）。排版的結(jié)果看上去相當?shù)囊恢?。雖然也許根本沒必要這樣精確地調(diào)整字偶距，牢記這一方法有助于在排版時實現(xiàn)單詞或詞組字偶距的視覺一致，尤其是被一個看上去不對勁的字母組合難倒時。

03. 留意字號

設(shè)置的字號會影響字偶距?；蛘哒f，字號不同，字母間相互作用也不同。比如大標題設(shè)為 48 pt.，接著調(diào)整字偶距，如果把字號改到 24 pt.，之前調(diào)整字偶距的功夫就都白費了。

鑒于此最好先定字號，再調(diào)整字偶距。若是處理的是 logo 之類印在名片上一個字號，印在 T 恤又是另一個字號的東西，最好分別調(diào)整字偶距。要記住，在處理大且顯眼的字母時，任何字偶距錯誤（或者對其的無視）都會異常惹眼。

這兒有一條經(jīng)驗法則，尺寸較大時字偶距緊湊些也許僥幸看起來不錯，但是尺寸小時字母就擠在一起了，所以寬松些的字偶距是必須的。（下一條建議會進一步解釋。）

04. 寧愿過度調(diào)整字偶距也不要冒風險

過于緊湊的文本會難以閱讀，字號較小時尤甚。字偶距不足的另一個壞處是字母離得太近會挨在一起，有時候看起來就是一個完全不同的字母（甚至單詞?。Ｏ旅孢@個絕妙的例子可以充分說明問題：如果 r 和 n 的字偶距太近了會發(fā)生什么呢？它們看起來就是個 m（順便給排印術(shù)語表加了條目）。

由于可讀性和易讀性是任何設(shè)計中涉及排版時的首要考量，所以不知如何操作時，最好把字母的字偶距拉得稍微大一些，以免讓讀者眼睛疲勞或造成任何可能的誤解。

05. 顛倒一下

有時很難看出應(yīng)該在哪里調(diào)整字偶距，因為大腦首先想要知道字母的含義是什么。一個扭轉(zhuǎn)注意力的方法是把字體上下顛倒過來，這樣就可以專注于字母的字形以及字偶距，而不被單詞本身分心。

06. 最后再調(diào)整字偶距

就設(shè)計流程而言，字偶距調(diào)整應(yīng)該是排版和涉及空白調(diào)整的工作流程的最后一步。一定要選定字體之后再開始調(diào)整字偶距，因為同一字偶距對不同字體看起來效果是不同的。正是這最后一步的字偶距調(diào)整讓設(shè)計看起來更優(yōu)雅，更專業(yè)。

但是在開始調(diào)整字偶距之前，應(yīng)該酌情花工夫看看其他幾種空白調(diào)整：字距和行距。

• 字距：亦稱字元間距，這個「空白」決定了文本整體的緊湊或稀疏。字偶距調(diào)整的是一對兒字母的間距，而字距讓選中文本使用同一間距，可以一次選中一個單詞，一個句子，一段或者一頁。如果有必要進行字距調(diào)整，就在調(diào)整字偶距之前做。
• 行距：就是文本行與行之間的垂直距離。在使用文字處理軟件的時候，應(yīng)該設(shè)置過行距吧，這是個常見的功能。盡管沒什么必要調(diào)整多行文本的字偶距，了解一下改進設(shè)計時可以調(diào)整哪些間距還是不錯的。

另外說明一下，不少程序可以選擇許多不同的字偶距設(shè)置。除了手動調(diào)整字偶距（這個效果總是最佳的）外，還能看到字偶距的「度量標準」或「視覺」[注](參考:?https://helpx.adobe.com/cn/illustrator/using/line-character-spacing.html) 選項。度量標準使用字體設(shè)計師提供的內(nèi)置于字體文件中的字偶距。視覺則忽略上述設(shè)定，根據(jù)某種算法對字體重新進行空白調(diào)整和字偶距調(diào)整。這篇文章介紹了這些選項的工作原理以及該如何選用。

07. 何時調(diào)整字偶距

我們反復(fù)指出過，調(diào)整大且明顯的版面的字偶距時的效果最佳，比如，大標題、標題、橫幅或帶文字、標識及鏈接的主角照片。但是大塊的內(nèi)文沒必要調(diào)整字偶距（尤其是手動調(diào)整），因為：

1) 字偶距不會對典型的內(nèi)文字號，比如 10，11 或 12 點，帶來可見的影響。

2) 許多字體，尤其是高質(zhì)量字體，有成百上千的內(nèi)置字偶距配置。大多數(shù)場景下，這些調(diào)整過字偶距都會考慮字體的獨有的字母形狀和結(jié)構(gòu)，沒有必要手動調(diào)整字偶距，對成段的文本尤其如此。

此外，把一整頁文本過一遍，調(diào)整字偶距會耗費數(shù)小時，沒有這么多時間可用。不要花這么多時間在字偶距上，應(yīng)該全局考慮對哪一塊進行調(diào)整可以獲得最佳效果。

08. 付諸實踐

字偶距需要身體力行的設(shè)計概念——既要理解其工作原理又要擅長使用它。除開始著手字偶距型項目外，還可以通過Kerntype這個網(wǎng)頁游戲磨礪字偶距技巧（還能得到反饋）。

這個游戲并沒有教程，工作原理如下：給你一個需要處理字偶距的單詞，首尾字母是固定的，然后移動剩下的字母實現(xiàn)視覺上的均勻分布。

完成后，選擇 Both 并點擊 Compare ，就可以看到你調(diào)整的字偶距（白色字母）與推薦方案（藍色字母）的對比結(jié)果。和推薦方案越接近比分越高。這種練習可以幫助你適應(yīng)依據(jù)視覺調(diào)整字偶距的過程。

09. 給網(wǎng)頁設(shè)計師的話：你也能調(diào)整字偶距！

通常認為，調(diào)整字偶距是圖像和排版設(shè)計師處理靜態(tài)排版設(shè)計時才會用到的東西。但自從網(wǎng)絡(luò)興起，對字體有了解的網(wǎng)頁設(shè)計師和程序員也想調(diào)整字偶距?，F(xiàn)在也有一些工具可以幫助調(diào)整字偶距。Kerning.js，就是一個用 CSS 處理網(wǎng)頁排版中字偶距的腳本。這里可以學(xué)習更多與網(wǎng)頁相關(guān)的字偶距處理及其他排版技術(shù)。

該你了……

知道為什么字偶距很重要了？但愿如此！錯誤的字偶距會讓設(shè)計看起來不專業(yè)（有時甚至看起來特別愚蠢），不過現(xiàn)在了解了在設(shè)計作品中該做什么了吧。不過要當心…… 一旦開始留意糟糕的字偶距，就會發(fā)現(xiàn)它無處不在，招牌和廣告牌上，商品包裝上，所有你能想到的地方上都有。（我已經(jīng)警告你了哦?。?/p>

【優(yōu)設(shè)名師訪談系列】

1. 曾任騰訊大粵網(wǎng)設(shè)計主管的跨域達人：《優(yōu)設(shè)訪談！騰訊設(shè)計師米田的設(shè)計之道與成長之路》
2. 沒有聽過馮叔的設(shè)計師不是好設(shè)計師：《優(yōu)設(shè)訪談！著名設(shè)計師馮鐵的設(shè)計思考與經(jīng)驗之談》
3. 前端重構(gòu)視覺交互無一不精的設(shè)計師：《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計師C7210的十年設(shè)計路》
4. 非議不斷前行不止，用心的設(shè)計團隊：《優(yōu)設(shè)訪談！國內(nèi)知名設(shè)計團隊專訪之滴滴DISIGN》
5. 前網(wǎng)易現(xiàn)阿里寫的書是交互領(lǐng)域必讀：《優(yōu)設(shè)訪談！阿里交互設(shè)計專家劉津的設(shè)計管理之路》
6. 職業(yè)路徑最為清晰的科班交互設(shè)計師：《優(yōu)設(shè)訪談！LBE安全大師產(chǎn)品總監(jiān)曉生的職場進階之路》
7. 能靠臉吃飯偏偏不的設(shè)計界「鹿晗」：《優(yōu)設(shè)訪談！阿里資深設(shè)計師的自學(xué)設(shè)計之路》
8. 300多人的百度設(shè)計團隊該如何運轉(zhuǎn)：《優(yōu)設(shè)訪談！國內(nèi)知名設(shè)計團隊專訪之百度大UE》
9. 百度上海團隊負責人的非科班設(shè)計師：《優(yōu)設(shè)訪談！百度設(shè)計大咖JJ YING的自學(xué)成才之路》
10. 他帶的學(xué)生已經(jīng)是國內(nèi)的設(shè)計大咖了：《優(yōu)設(shè)訪談！灰晝：從非科班生到首席美術(shù)總監(jiān)的15年設(shè)計路》
11. 設(shè)計的產(chǎn)品有幾億人在用的非科班生：《優(yōu)設(shè)訪談！騰訊電腦管家視覺負責人張曉翔的UI自學(xué)之路》
12. 英雄聯(lián)盟穿越火線天天愛消除都有他：《優(yōu)設(shè)訪談！騰訊游戲Tgideas團隊設(shè)計總監(jiān)李若凡的十年設(shè)計路》
13. 高考一百多分現(xiàn)任UC藝術(shù)指導(dǎo)的大神：《優(yōu)設(shè)訪談！小火：從非科班生到UC藝術(shù)指導(dǎo)的勵志設(shè)計路》

原文地址：designschool
譯文地址：gold.xitu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com