你可曾盯著剛排版的單詞或詞組卻覺得看上去間距有點(diǎn)遠(yuǎn)？這就涉及到字偶距的問題了。字偶距是指兩個(gè)字母（或其他字符，比如數(shù)字，標(biāo)點(diǎn)符號(hào)等）之間的空白，而調(diào)整該空白可以避免看起來笨拙的單詞間隙，同時(shí)提升可讀性。今天這篇干貨，幫你徹底學(xué)會(huì)字偶距的調(diào)整方法。
有時(shí)字體默認(rèn)的字偶距對(duì)特定的字母組合并不理想，需要手動(dòng)調(diào)整讓所有字母間的空白看起來和諧一致。這里有必要提一句，字偶距事關(guān)視覺感受，關(guān)心字母之間視覺距離而不是實(shí)際距離。字偶距要求調(diào)整版面設(shè)計(jì)來實(shí)現(xiàn)視覺上的恰當(dāng)，并非為了數(shù)學(xué)上的等距。
印刷字體正是因?yàn)橛辛藥追忠曈X錯(cuò)覺而相當(dāng)有趣。如果按字母間距相同的原則排版，那么眼睛看到的空白卻不會(huì)是均勻的。這是因?yàn)樽煮w各自有獨(dú)特的形狀，如同拼圖碎片，每一對(duì)字母要彼此配合才能達(dá)到最佳效果。
繼續(xù)閱讀，了解為什么設(shè)計(jì)中字偶距如此重要，另外還有九條專家建議供您參考，像專家一樣開始調(diào)整字偶距吧。
為什么要將字偶距納入設(shè)計(jì)流程
字偶距或許看起來是無關(guān)緊要的細(xì)節(jié)，但是將其納入設(shè)計(jì)流程的收尾階段，當(dāng)作一個(gè)可以迅速搞定的額外小步驟，可以讓以排版為核心的設(shè)計(jì)項(xiàng)目看上去更加優(yōu)雅。而對(duì)大型，極其顯眼的排印標(biāo)識(shí)或大標(biāo)題而言，字偶距是最重要的。
要進(jìn)一步了解為何調(diào)整字偶距是個(gè)明智的決定，不妨想象每個(gè)字母都限制在框內(nèi)。你也許看過下面這種舊舊的木質(zhì)或金屬活字的照片：
盡管基本不再使用物理活字了，現(xiàn)行的數(shù)字字體的實(shí)現(xiàn)方法仍然與之類似。每個(gè)字母仍束縛在不可見的框內(nèi)，有時(shí)這些框給字母對(duì)兒引入了過多的空白，要想有看上去均勻的空白就需要框與框有重疊。在過去的打印流程中，排字工人可以在木活字上刻 V 形切口讓字母與字母靠得更近，看上去更舒服。而如今，工序不再繁瑣，點(diǎn)幾下鼠標(biāo)就可以搞定。
學(xué)習(xí)字偶距：九條專業(yè)建議
字偶距沒那么難，只需理解其工作原理。 盡管調(diào)整字偶距的主要方法仍是用眼睛盯著字間空白并手動(dòng)調(diào)整來決定怎樣看上去最好，你依然可以通過一些技巧簡化這一過程。
1、當(dāng)心特定的字母組
一些字母（尤其是那些有明顯的斜線或突出部分的字母）因其形狀難以調(diào)節(jié)字偶距。全大寫字母的單詞排版也需要格外留意。如果想象字母周圍有無形的框，這些難纏的字母就沒法緊挨框的邊，只能留著難看的間隙。下面這些難搞的東西需要額外留意：
傾斜的字母：A, K, V, W, Y
有橫劃和字臂的字母：F, L, T
字母組合：W 或 V + A（順序隨意）；T 或 F 跟著小寫的元音字母
如果單詞中間一個(gè)難處理的字母，仔細(xì)看看該字母和其兩側(cè)字母如何相互影響。比如，PANCAKE 中第一個(gè) A 和后面的 N 看上去不錯(cuò)，但是和前面的 P 的間隙過大。
2、理解空白和字形的關(guān)系
上一個(gè)建議主要關(guān)注成對(duì)的大寫字母帶來的問題，但是調(diào)整小寫字母字距時(shí)也有難題。這是因?yàn)橹毙巫帜负蛨A形字母的相互組合與其自身組合看起來不同。
排版設(shè)計(jì)者 Ilene Strizver?推薦?用下述方法來排字：兩個(gè)直形字母用最多的間距，直形字母和圓形字母則需要相對(duì)較少的間距從而在視覺上達(dá)到對(duì)等，而兩個(gè)圓形字母搭配所需間距比前者更少。下面的例子形象化的表述可以幫助理解。希望你能看出來從左到右字母的間距（用彩條表示）在縮小。然而單獨(dú)看來這些字母間距像是均勻的。
在一個(gè)真正的詞上實(shí)踐一下這個(gè)方法吧。觀察每個(gè)字母的兩邊，間距排布應(yīng)該和上述三種間距組合的任意一種相吻合。
單詞 ”headline“ 中，直形字母相鄰共用相等的間距（藍(lán)色標(biāo)注），而直形與圓形字母相鄰（青綠色標(biāo)注）還有圓形與圓形相鄰（橘色標(biāo)注）。排版的結(jié)果看上去相當(dāng)?shù)囊恢隆ｋm然也許根本沒必要這樣精確地調(diào)整字偶距，牢記這一方法有助于在排版時(shí)實(shí)現(xiàn)單詞或詞組字偶距的視覺一致，尤其是被一個(gè)看上去不對(duì)勁的字母組合難倒時(shí)。
3、留意字號(hào)
設(shè)置的字號(hào)會(huì)影響字偶距。或者說，字號(hào)不同，字母間相互作用也不同。比如大標(biāo)題設(shè)為 48 pt.，接著調(diào)整字偶距，如果把字號(hào)改到 24 pt.，之前調(diào)整字偶距的功夫就都白費(fèi)了。
鑒于此最好先定字號(hào)，再調(diào)整字偶距。若是處理的是 logo 之類印在名片上一個(gè)字號(hào)，印在 T 恤又是另一個(gè)字號(hào)的東西，最好分別調(diào)整字偶距。要記住，在處理大且顯眼的字母時(shí)，任何字偶距錯(cuò)誤（或者對(duì)其的無視）都會(huì)異常惹眼。
這兒有一條經(jīng)驗(yàn)法則，尺寸較大時(shí)字偶距緊湊些也許僥幸看起來不錯(cuò)，但是尺寸小時(shí)字母就擠在一起了，所以寬松些的字偶距是必須的。（下一條建議會(huì)進(jìn)一步解釋。）
4、 寧愿過度調(diào)整字偶距也不要冒風(fēng)險(xiǎn)
過于緊湊的文本會(huì)難以閱讀，字號(hào)較小時(shí)尤甚。字偶距不足的另一個(gè)壞處是字母離得太近會(huì)挨在一起，有時(shí)候看起來就是一個(gè)完全不同的字母（甚至單詞！）。下面這個(gè)絕妙的例子可以充分說明問題：如果 r 和 n 的字偶距太近了會(huì)發(fā)生什么呢？它們看起來就是個(gè) m（順便給排印術(shù)語表加了條目）。
由于可讀性和易讀性是任何設(shè)計(jì)中涉及排版時(shí)的首要考量，所以不知如何操作時(shí)，最好把字母的字偶距拉得稍微大一些，以免讓讀者眼睛疲勞或造成任何可能的誤解。
5、 顛倒一下
有時(shí)很難看出應(yīng)該在哪里調(diào)整字偶距，因?yàn)榇竽X首先想要知道字母的含義是什么。一個(gè)扭轉(zhuǎn)注意力的方法是把字體上下顛倒過來，這樣就可以專注于字母的字形以及字偶距，而不被單詞本身分心。
6、最后再調(diào)整字偶距
就設(shè)計(jì)流程而言，字偶距調(diào)整應(yīng)該是排版和涉及空白調(diào)整的工作流程的最后一步。一定要選定字體之后再開始調(diào)整字偶距，因?yàn)橥蛔峙季鄬?duì)不同字體看起來效果是不同的。正是這最后一步的字偶距調(diào)整讓設(shè)計(jì)看起來更優(yōu)雅，更專業(yè)。
但是在開始調(diào)整字偶距之前，應(yīng)該酌情花工夫看看其他幾種空白調(diào)整：字距和行距。
字距：亦稱字元間距，這個(gè)「空白」決定了文本整體的緊湊或稀疏。字偶距調(diào)整的是一對(duì)兒字母的間距，而字距讓選中文本使用同一間距，可以一次選中一個(gè)單詞，一個(gè)句子，一段或者一頁。如果有必要進(jìn)行字距調(diào)整，就在調(diào)整字偶距之前做。
行距：就是文本行與行之間的垂直距離。在使用文字處理軟件的時(shí)候，應(yīng)該設(shè)置過行距吧，這是個(gè)常見的功能。盡管沒什么必要調(diào)整多行文本的字偶距，了解一下改進(jìn)設(shè)計(jì)時(shí)可以調(diào)整哪些間距還是不錯(cuò)的。
另外說明一下，不少程序可以選擇許多不同的字偶距設(shè)置。除了手動(dòng)調(diào)整字偶距（這個(gè)效果總是最佳的）外，還能看到字偶距的「度量標(biāo)準(zhǔn)」或「視覺」[注](參考:?https://helpx.adobe.com/cn/illustrator/using/line-character-spacing.html) 選項(xiàng)。度量標(biāo)準(zhǔn)使用字體設(shè)計(jì)師提供的內(nèi)置于字體文件中的字偶距。視覺則忽略上述設(shè)定，根據(jù)某種算法對(duì)字體重新進(jìn)行空白調(diào)整和字偶距調(diào)整。這篇文章介紹了這些選項(xiàng)的工作原理以及該如何選用。
7、何時(shí)調(diào)整字偶距
我們反復(fù)指出過，調(diào)整大且明顯的版面的字偶距時(shí)的效果最佳，比如，大標(biāo)題、標(biāo)題、橫幅或帶文字、標(biāo)識(shí)及鏈接的主角照片。但是大塊的內(nèi)文沒必要調(diào)整字偶距（尤其是手動(dòng)調(diào)整），因?yàn)椋?/p>
1) 字偶距不會(huì)對(duì)典型的內(nèi)文字號(hào)，比如 10，11 或 12 點(diǎn)，帶來可見的影響。
2) 許多字體，尤其是高質(zhì)量字體，有成百上千的內(nèi)置字偶距配置。大多數(shù)場(chǎng)景下，這些調(diào)整過字偶距都會(huì)考慮字體的獨(dú)有的字母形狀和結(jié)構(gòu)，沒有必要手動(dòng)調(diào)整字偶距，對(duì)成段的文本尤其如此。
此外，把一整頁文本過一遍，調(diào)整字偶距會(huì)耗費(fèi)數(shù)小時(shí)，沒有這么多時(shí)間可用。不要花這么多時(shí)間在字偶距上，應(yīng)該全局考慮對(duì)哪一塊進(jìn)行調(diào)整可以獲得最佳效果。
8、付諸實(shí)踐
字偶距需要身體力行的設(shè)計(jì)概念——既要理解其工作原理又要擅長使用它。除開始著手字偶距型項(xiàng)目外，還可以通過Kerntype這個(gè)網(wǎng)頁游戲磨礪字偶距技巧（還能得到反饋）。
這個(gè)游戲并沒有教程，工作原理如下：給你一個(gè)需要處理字偶距的單詞，首尾字母是固定的，然后移動(dòng)剩下的字母實(shí)現(xiàn)視覺上的均勻分布。
完成后，選擇 Both 并點(diǎn)擊 Compare ，就可以看到你調(diào)整的字偶距（白色字母）與推薦方案（藍(lán)色字母）的對(duì)比結(jié)果。和推薦方案越接近比分越高。這種練習(xí)可以幫助你適應(yīng)依據(jù)視覺調(diào)整字偶距的過程。
9、給網(wǎng)頁設(shè)計(jì)師的話：你也能調(diào)整字偶距！
通常認(rèn)為，調(diào)整字偶距是圖像和排版設(shè)計(jì)師處理靜態(tài)排版設(shè)計(jì)時(shí)才會(huì)用到的東西。但自從網(wǎng)絡(luò)興起，對(duì)字體有了解的網(wǎng)頁設(shè)計(jì)師和程序員也想調(diào)整字偶距。現(xiàn)在也有一些工具可以幫助調(diào)整字偶距。Kerning.js，就是一個(gè)用 CSS 處理網(wǎng)頁排版中字偶距的腳本。這里可以學(xué)習(xí)更多與網(wǎng)頁相關(guān)的字偶距處理及其他排版技術(shù)。
該你了……
知道為什么字偶距很重要了？但愿如此！錯(cuò)誤的字偶距會(huì)讓設(shè)計(jì)看起來不專業(yè)（有時(shí)甚至看起來特別愚蠢），不過現(xiàn)在了解了在設(shè)計(jì)作品中該做什么了吧。不過要當(dāng)心…… 一旦開始留意糟糕的字偶距，就會(huì)發(fā)現(xiàn)它無處不在，招牌和廣告牌上，商品包裝上，所有你能想到的地方上都有。（我已經(jīng)警告你了哦！）
原文地址：designschool
譯文地址：gold.xitu
