我們消耗的大部分信息都是通過(guò)閱讀獲得的，所以在網(wǎng)站設(shè)計(jì)時(shí)要注意文字是很有意義的。設(shè)計(jì)排版有很多方面，但幫助提高網(wǎng)站設(shè)計(jì)質(zhì)量的條件之一就是字母間距。

字母間距是指在字母之間添加和刪除空格，有些人把它和字距化混淆了，但這兩者是不同的；字母間距影響整個(gè)文本行，而字距調(diào)整兩個(gè)單獨(dú)字母之間的空間在同一時(shí)間。字距最好留給類(lèi)型設(shè)計(jì)者，除此之外，不像字母間距，目前在CSS中沒(méi)有控制字距的方法。

相信實(shí)踐和大量觀察會(huì)改變您在工作中對(duì)待字母間隔的方式。

字母間距的目的

字母間距的主要目的是提高文本的易讀性和可讀性，單詞的作用取決于它們的大小、顏色和它們所在的背景。通過(guò)根據(jù)工作環(huán)境調(diào)整字母間距，可以幫助讀者更快、更有效地吸收信息。有趣的是，他們甚至不會(huì)注意到這就是這份工作的全部意義。

記住，排印師考慮字母間距和字距調(diào)整在設(shè)計(jì)字體。這意味著您不必把它應(yīng)用到所有的文本中，但為了在必要的時(shí)候有一個(gè)理解，您應(yīng)該知道一些基本的原則，并使用好的字體。

字母間距如何影響易讀性和可讀性

文本的易讀性取決于行高、段落長(zhǎng)度、字體大小、字體選擇、字母間距等等。關(guān)于字母間距，如果您剛剛進(jìn)入排版，您能做的最好的事情就是不要過(guò)度使用它。意思是不要讓字母之間的距離太大或太??；即使您認(rèn)為它看起來(lái)不錯(cuò)，人們讀起來(lái)也會(huì)很費(fèi)勁，這將破壞他們的體驗(yàn)。

字母間距大寫(xiě)字母

大寫(xiě)字母的設(shè)計(jì)意圖是出現(xiàn)在句子或?qū)Ｓ忻~的開(kāi)頭，與小寫(xiě)字母結(jié)合。當(dāng)大寫(xiě)字母相鄰時(shí)，它們之間的空間就會(huì)太緊。因此，為了達(dá)到更好的可讀性，需要增加空間。這適用于大字體和小字體。

字母間距標(biāo)題

如果您使用的字體設(shè)計(jì)得很好，您可以確保它們校準(zhǔn)得很好，而且您不需要對(duì)它們做任何大的調(diào)整。然而，標(biāo)題的問(wèn)題是，在更大的比例下，字母之間的空間看起來(lái)不平衡?？梢酝ㄟ^(guò)增加或減少字母間距值來(lái)修復(fù)。

對(duì)于字母間距并沒(méi)有嚴(yán)格的規(guī)定——字體有很多，而且所有的字體都需要單獨(dú)的處理方法——但是如果您看看像谷歌和Apple這樣的大公司是如何處理他們的字體的，您會(huì)發(fā)現(xiàn)很多有價(jià)值的信息。

讓我們來(lái)看看Roboto和San Francisco字體（第一個(gè)用于材料設(shè)計(jì)，第二個(gè)用于蘋(píng)果的生態(tài)系統(tǒng)）。20到48像素的標(biāo)題可以是正的字母間距值，也可以是空的。如果字體較大，則字母間距為負(fù)。這些確切的數(shù)字并不適用于其他字體，但在嘗試了不同的方法后，我可以聲明這是一個(gè)常見(jiàn)的模式。

測(cè)試了幾個(gè)關(guān)于字母間距的指導(dǎo)原則，Bazen Agency發(fā)布的那個(gè)適用于很多流行字體。這將是一個(gè)很好的起點(diǎn)，但您總是可以應(yīng)用額外的調(diào)整：

H1-96px- -1.5%

H2-60px-0.5%

H3-48px-0%

H4-34px-0.25%

H5-24px-0%

H6-20px-0.15%

字幕-16px-0.15%

如果您碰巧設(shè)計(jì)了很多應(yīng)用程序，或者您打算這么做，有一件事對(duì)我個(gè)人很有幫助，那就是使用默認(rèn)的材質(zhì)設(shè)計(jì)和蘋(píng)果的字體指南。它們平衡得很好，節(jié)省了很多時(shí)間。

字母間距正文

如果您讀過(guò)任何有關(guān)字母間距的文章，您可能已經(jīng)從印刷術(shù)家Frederic Goudy那里看到了這種流行的智慧：“任何用小寫(xiě)字母隔開(kāi)字母的人都會(huì)偷羊”。（有一種說(shuō)法是他僅指的是Blackletter字體。）一些設(shè)計(jì)師將其作為硬性規(guī)定，現(xiàn)在從不調(diào)整小寫(xiě)字母的字母間距。

根據(jù)實(shí)踐和看到的設(shè)計(jì)師的作品，個(gè)人不同意Goudy的觀點(diǎn)，因?yàn)橛袝r(shí)小的變化可以使您的文本表現(xiàn)出很大的不同。讓我們以壓縮字體為例。字體太小時(shí)，字母靠得太近，導(dǎo)致可讀性差。通過(guò)將字母間距增加1.5%，您將看到文本現(xiàn)在更容易閱讀。

如果我們看一下前面的例子，在“Roboto”和“San Francisco”字體的指導(dǎo)原則中，字母間距被應(yīng)用于正文；盡管舊金山有專(zhuān)門(mén)的“SF Pro顯示”標(biāo)題和“SF Pro文本”正文文本，字母間距仍然用來(lái)完善它們。

有很多不同的字體，一個(gè)規(guī)則不能適用于所有的字體。嘗試一下字母間距，然后做您認(rèn)為正確的事情。這里有一些簡(jiǎn)單的指導(dǎo)方針，可以引導(dǎo)您進(jìn)入正確的方向，特別是在使用正文時(shí)：

記住線的高度

如果您的行距大于120%，極有可能負(fù)行距會(huì)導(dǎo)致段落不平衡。要精煉它，您需要保持它為0%或者只稍微增加它。

深色背景上的淺色文字

在深色背景下，白色的文字看起來(lái)曝光過(guò)度，因此字母顯得太緊。為了使它更清晰，建議您增加一點(diǎn)字母間距。

正文文本的一般值

您可以使用以下指南為正文，已經(jīng)測(cè)試了幾種字體：

主體1-16像素-0.5％

正文2-14像素-0.25％

字母間距字幕

與標(biāo)題和正文不同，較小的字體在字母間距上沒(méi)有太多變化。通常情況下，當(dāng)字體小于13px時(shí)，會(huì)增加字母之間的空間以使其更清晰。但也有例外（“SF Pro Text”指南建議，只有當(dāng)字體大小在11px或以下時(shí)，才使用正間距）。一定要對(duì)設(shè)置進(jìn)行試驗(yàn)。

您可以使用以下值作為起點(diǎn)，然后編輯他們似乎正確的字體的選擇：

標(biāo)題-12px-0.5%

上劃線-10px-1.5%

最后提示

幫助提高預(yù)算技能的一件事是尋找其他設(shè)計(jì)師，尤其是字體代工廠。通過(guò)解碼他們的作品，您可能會(huì)注意到他們對(duì)待字體的一些細(xì)微差異，這將對(duì)您將來(lái)的網(wǎng)站設(shè)計(jì)項(xiàng)目有所幫助。