英文站字母的網(wǎng)站設(shè)計間距指南
我們消耗的大部分信息都是通過閱讀獲得的,所以在網(wǎng)站設(shè)計時要注意文字是很有意義的。設(shè)計排版有很多方面,但幫助提高網(wǎng)站設(shè)計質(zhì)量的條件之一就是字母間距。
字母間距是指在字母之間添加和刪除空格,有些人把它和字距化混淆了,但這兩者是不同的;字母間距影響整個文本行,而字距調(diào)整兩個單獨字母之間的空間在同一時間。字距最好留給類型設(shè)計者,除此之外,不像字母間距,目前在CSS中沒有控制字距的方法。
相信實踐和大量觀察會改變您在工作中對待字母間隔的方式。
1、字母間距的目的
字母間距的主要目的是提高文本的易讀性和可讀性,單詞的作用取決于它們的大小、顏色和它們所在的背景。通過根據(jù)工作環(huán)境調(diào)整字母間距,可以幫助讀者更快、更有效地吸收信息。有趣的是,他們甚至不會注意到這就是這份工作的全部意義。
記住,排印師考慮字母間距和字距調(diào)整在設(shè)計字體。這意味著您不必把它應(yīng)用到所有的文本中,但為了在必要的時候有一個理解,您應(yīng)該知道一些基本的原則,并使用好的字體。
2、字母間距如何影響易讀性和可讀性
文本的易讀性取決于行高、段落長度、字體大小、字體選擇、字母間距等等。關(guān)于字母間距,如果您剛剛進(jìn)入排版,您能做的最好的事情就是不要過度使用它。意思是不要讓字母之間的距離太大或太??;即使您認(rèn)為它看起來不錯,人們讀起來也會很費勁,這將破壞他們的體驗。
3、字母間距大寫字母
大寫字母的設(shè)計意圖是出現(xiàn)在句子或?qū)S忻~的開頭,與小寫字母結(jié)合。當(dāng)大寫字母相鄰時,它們之間的空間就會太緊。因此,為了達(dá)到更好的可讀性,需要增加空間。這適用于大字體和小字體。
4、字母間距標(biāo)題
如果您使用的字體設(shè)計得很好,您可以確保它們校準(zhǔn)得很好,而且您不需要對它們做任何大的調(diào)整。然而,標(biāo)題的問題是,在更大的比例下,字母之間的空間看起來不平衡??梢酝ㄟ^增加或減少字母間距值來修復(fù)。
對于字母間距并沒有嚴(yán)格的規(guī)定——字體有很多,而且所有的字體都需要單獨的處理方法——但是如果您看看像谷歌和Apple這樣的大公司是如何處理他們的字體的,您會發(fā)現(xiàn)很多有價值的信息。
讓我們來看看Roboto和San Francisco字體(第一個用于材料設(shè)計,第二個用于蘋果的生態(tài)系統(tǒng))。20到48像素的標(biāo)題可以是正的字母間距值,也可以是空的。如果字體較大,則字母間距為負(fù)。這些確切的數(shù)字并不適用于其他字體,但在嘗試了不同的方法后,我可以聲明這是一個常見的模式。
測試了幾個關(guān)于字母間距的指導(dǎo)原則,Bazen Agency發(fā)布的那個適用于很多流行字體。這將是一個很好的起點,但您總是可以應(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è)計了很多應(yīng)用程序,或者您打算這么做,有一件事對我個人很有幫助,那就是使用默認(rèn)的材質(zhì)設(shè)計和蘋果的字體指南。它們平衡得很好,節(jié)省了很多時間。
5、字母間距正文
如果您讀過任何有關(guān)字母間距的文章,您可能已經(jīng)從印刷術(shù)家Frederic Goudy那里看到了這種流行的智慧:"任何用小寫字母隔開字母的人都會偷羊"。(有一種說法是他僅指的是Blackletter字體。)一些設(shè)計師將其作為硬性規(guī)定,現(xiàn)在從不調(diào)整小寫字母的字母間距。
根據(jù)實踐和看到的設(shè)計師的作品,個人不同意Goudy的觀點,因為有時小的變化可以使您的文本表現(xiàn)出很大的不同。讓我們以壓縮字體為例。字體太小時,字母靠得太近,導(dǎo)致可讀性差。通過將字母間距增加1.5%,您將看到文本現(xiàn)在更容易閱讀。
如果我們看一下前面的例子,在"Roboto"和"San Francisco"字體的指導(dǎo)原則中,字母間距被應(yīng)用于正文;盡管舊金山有專門的"SF Pro顯示"標(biāo)題和"SF Pro文本"正文文本,字母間距仍然用來完善它們。
有很多不同的字體,一個規(guī)則不能適用于所有的字體。嘗試一下字母間距,然后做您認(rèn)為正確的事情。這里有一些簡單的指導(dǎo)方針,可以引導(dǎo)您進(jìn)入正確的方向,特別是在使用正文時:
6、記住線的高度
如果您的行距大于120%,極有可能負(fù)行距會導(dǎo)致段落不平衡。要精煉它,您需要保持它為0%或者只稍微增加它。
7、深色背景上的淺色文字
在深色背景下,白色的文字看起來曝光過度,因此字母顯得太緊。為了使它更清晰,建議您增加一點字母間距。
8、正文文本的一般值
您可以使用以下指南為正文,已經(jīng)測試了幾種字體:
主體1-16像素-0.5%
正文2-14像素-0.25%
9、字母間距字幕
與標(biāo)題和正文不同,較小的字體在字母間距上沒有太多變化。通常情況下,當(dāng)字體小于13px時,會增加字母之間的空間以使其更清晰。但也有例外("SF Pro Text"指南建議,只有當(dāng)字體大小在11px或以下時,才使用正間距)。一定要對設(shè)置進(jìn)行試驗。
您可以使用以下值作為起點,然后編輯他們似乎正確的字體的選擇:
標(biāo)題-12px-0.5%
上劃線-10px-1.5%
最后提示
幫助提高預(yù)算技能的一件事是尋找其他設(shè)計師,尤其是字體代工廠。通過解碼他們的作品,您可能會注意到他們對待字體的一些細(xì)微差異,這將對您將來的網(wǎng)站設(shè)計項目有所幫助。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)