寫給設計師的字偶距調整指南

發表於2016-04-24

你可曾盯著剛排版的單詞或片語卻覺得看上去間距有點遠?

這就涉及到字偶距的問題了。字偶距是指兩個字母(或其他字元,比如數字,標點符號等)之間的空白,而調整該空白可以避免看起來笨拙的單詞間隙,同時提升可讀性。

有時字型預設的字偶距對特定的字母組合並不理想,需要手動調整讓所有字母間的空白看起來和諧一致。這裡有必要提一句,字偶距事關視覺感受,關心字母之間視覺距離而不是實際距離。字偶距要求調整版面設計來實現視覺上的恰當,並非為了數學上的等距。

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

繼續閱讀,瞭解為什麼設計中字偶距如此重要,另外還有九條專家建議供您參考,像專家一樣開始調整字偶距吧。

為什麼要將字偶距納入設計流程

字偶距或許看起來是無關緊要的細節,但是將其納入設計流程的收尾階段,當作一個可以迅速搞定的額外小步驟,可以讓以排版為核心的設計專案看上去更加優雅。而對大型,極其顯眼的排印標識或大標題而言,字偶距是最重要的。

要進一步瞭解為何調整字偶距是個明智的決定,不妨想象每個字母都限制在框內。你也許看過下面這種舊舊的木質或金屬活字的照片:

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

學習字偶距:九條專業建議

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

01. 當心特定的字母組合

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

  • 傾斜的字母:A, K, V, W, Y
  • 有橫劃和字臂的字母:F, L, T
  • 字母組合:W 或 V + A(順序隨意);T 或 F 跟著小寫的母音字母

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

02. 理解空白和字形的關係

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

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

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

單詞 ”headline“ 中,直形字母相鄰共用相等的間距(藍色標註),而直形與圓形字母相鄰(青綠色標註)還有圓形與圓形相鄰(橘色標註)。排版的結果看上去相當的一致。雖然也許根本沒必要這樣精確地調整字偶距,牢記這一方法有助於在排版時實現單詞或片語字偶距的視覺一致,尤其是被一個看上去不對勁的字母組合難倒時。

03. 留意字號

設定的字號會影響字偶距。或者說,字號不同,字母間相互作用也不同。比如大標題設為 48 pt.,接著調整字偶距,如果把字號改到 24 pt.,之前調整字偶距的功夫就都白費了。

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

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

04. 寧願過度調整字偶距也不要冒風險

過於緊湊的文字會難以閱讀,字號較小時尤甚。字偶距不足的另一個壞處是字母離得太近會挨在一起,有時候看起來就是一個完全不同的字母(甚至單詞!)。下面這個絕妙的例子可以充分說明問題:如果 r 和 n 的字偶距太近了會發生什麼呢?它們看起來就是個 m(順便給排印術語表加了條目)。

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

05. 顛倒一下

有時很難看出應該在哪裡調整字偶距,因為大腦首先想要知道字母的含義是什麼。一個扭轉註意力的方法是把字型上下顛倒過來,這樣就可以專注於字母的字形以及字偶距,而不被單詞本身分心。

06. 最後再調整字偶距

就設計流程而言,字偶距調整應該是排版和涉及空白調整的工作流程的最後一步。一定要選定字型之後再開始調整字偶距,因為同一字偶距對不同字型看起來效果是不同的。正是這最後一步的字偶距調整讓設計看起來更優雅,更專業。

但是在開始調整字偶距之前,應該酌情花工夫看看其他幾種空白調整:字距和行距。

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

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

07. 何時調整字偶距

我們反覆指出過,調整大且明顯的版面的字偶距時的效果最佳,比如,大標題、標題、橫幅或帶文字、標識及連結的主角照片。但是大塊的內文沒必要調整字偶距(尤其是手動調整),因為:

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

2) 許多字型,尤其是高質量字型,有成百上千的內建字偶距配置。大多數場景下,這些調整過字偶距都會考慮字型的獨有的字母形狀和結構,沒有必要手動調整字偶距,對成段的文字尤其如此。

此外,把一整頁文字過一遍,調整字偶距會耗費數小時,沒有這麼多時間可用。不要花這麼多時間在字偶距上,應該全域性考慮對哪一塊進行調整可以獲得最佳效果。

08. 付諸實踐

字偶距需要身體力行的設計概念——既要理解其工作原理又要擅長使用它。除開始著手字偶距型專案外,還可以通過Kerntype這個網頁遊戲磨礪字偶距技巧(還能得到反饋)。

這個遊戲並沒有教程,工作原理如下:給你一個需要處理字偶距的單詞,首尾字母是固定的,然後移動剩下的字母實現視覺上的均勻分佈。

完成後,選擇 Both 並點選 Compare ,就可以看到你調整的字偶距(白色字母)與推薦方案(藍色字母)的對比結果。和推薦方案越接近比分越高。這種練習可以幫助你適應依據視覺調整字偶距的過程。

09. 給網頁設計師的話:你也能調整字偶距!

通常認為,調整字偶距是影象和排版設計師處理靜態排版設計時才會用到的東西。但自從網路興起,對字型有了解的網頁設計師和程式設計師也想調整字偶距。現在也有一些工具可以幫助調整字偶距。Kerning.js,就是一個用 CSS 處理網頁排版中字偶距的指令碼。這裡可以學習更多與網頁相關的字偶距處理及其他排版技術。

該你了……

知道為什麼字偶距很重要了?但願如此!錯誤的字偶距會讓設計看起來不專業(有時甚至看起來特別愚蠢),不過現在瞭解了在設計作品中該做什麼了吧。不過要當心…… 一旦開始留意糟糕的字偶距,就會發現它無處不在,招牌和廣告牌上,商品包裝上,所有你能想到的地方上都有。(我已經警告你了哦!)

相關文章