設(shè)計(jì)實(shí)用字體的8條規(guī)則

今天，我們要討論的事情，它既是一個(gè)熱門(mén)趨勢(shì)又是一個(gè)永恒的藝術(shù)——字體。下面列出的基本規(guī)則將幫助你在設(shè)計(jì)中更加了解如何構(gòu)建和使用文字。

      當(dāng)意識(shí)到這些規(guī)則,差不多可以提高你創(chuàng)作的所有事，包括一個(gè)標(biāo)題或者是主要的字體排版元素?，F(xiàn)在，讓我們開(kāi)始學(xué)習(xí)吧！

＃1 學(xué)習(xí)基礎(chǔ)知識(shí)

    為了實(shí)現(xiàn)更有效的字體排版，第一步是要了解一些藝術(shù)。如果你不熟悉它的概念，你可能會(huì)認(rèn)為字體排版一定是一個(gè)相當(dāng)簡(jiǎn)單的學(xué)科。當(dāng)然，如果你知道字母系統(tǒng)，那么你已經(jīng)贏得了 這場(chǎng)戰(zhàn)役的一半了吧？剩下的就是改變它一點(diǎn)外觀，那么你就有了屬于你自己的字體！在現(xiàn)實(shí)中，字體是相當(dāng)難懂和復(fù)雜的，因?yàn)樗仁强茖W(xué)的也是藝術(shù)的。

    一個(gè)字體的解剖涉及到非常具體詳細(xì)的專業(yè)術(shù)語(yǔ)，嚴(yán)格的尺寸和通用標(biāo)準(zhǔn)都必須知道而且遵從。和許多形式的設(shè)計(jì)一樣，需要聲明地一點(diǎn)是，如果你了解規(guī)則，知道它好在哪里，那么 你可以打破規(guī)則并且有意識(shí)地去做設(shè)計(jì)。

      一個(gè)在線學(xué)習(xí)字體的最好網(wǎng)站是—— I Love Typography,一個(gè)描述漂亮字體的博客。這是一張來(lái)自我愛(ài)字體博客上的圖片，展示一些你應(yīng)該熟悉的專業(yè)術(shù)語(yǔ)：

background-color: rgb(255, 255, 255); text-align: center;">    

     正如你看到的那樣，快速的制作出漂亮的字母就變的復(fù)雜困難了。

     上圖非常形象化地解釋了這些專業(yè)術(shù)語(yǔ)，但這并不是一個(gè)詳盡的術(shù)語(yǔ)清單和你需要熟悉的概念。例如，術(shù)語(yǔ)中的字母x的高度，字距調(diào)整，還有在平面上不被輸入的基準(zhǔn)線。為了 更好的控制這些，你應(yīng)該花一些時(shí)間來(lái)瀏覽字 體術(shù)語(yǔ)表。

這是什么鬼？

     這個(gè)問(wèn)題的答案是顯而易見(jiàn)的：“因?yàn)槟闶且粋€(gè)設(shè)計(jì)師！”如果你經(jīng)常里使用單詞創(chuàng)作設(shè)計(jì)作品的話，不管你打算做還是不做你都要深入研究鉆研字體?；ㄐr(shí)間學(xué)習(xí)的基本原 則會(huì)讓你清楚了解你選擇的字體，其中使用類型的藝術(shù)特點(diǎn)和方式。

＃2注意你的字距

      這篇文章不是為了研究字體設(shè)計(jì)，所以我不會(huì)去考上面細(xì)節(jié)中提到的每一個(gè)專業(yè)術(shù)語(yǔ)。然而，字距調(diào)整是許多設(shè)計(jì)師，無(wú)論是新的還是老的，都會(huì)忽略的事情。最近我和一個(gè)女 性時(shí)尚網(wǎng)站的高級(jí)藝術(shù)總監(jiān)在討論字體這門(mén)學(xué)科。讓她有種失落感的事情是她下面的設(shè)計(jì)師都缺乏對(duì)字距調(diào)整的認(rèn)識(shí)。

字距是什么？

     字距調(diào)整就是在給出的一個(gè)字體調(diào)中去調(diào)整兩個(gè)字母之間的間隔。

     注意這是一個(gè)獨(dú)立問(wèn)題，它需要同時(shí)調(diào)整所有字母的空間距離。你也許會(huì)認(rèn)為這是一個(gè)高價(jià)昂貴的項(xiàng)目，就像Adobe Illustrator會(huì)自動(dòng)為你解決所有字間距的問(wèn)題，因此你也認(rèn) 為字距調(diào)整不是問(wèn)題，不會(huì)出現(xiàn)在你的藝術(shù)作品中。 再想想，思考一下。體會(huì)一下下面給出的例子：

background-color: rgb(255, 255, 255); text-align: center;">    

      即使你還不習(xí)慣找字距調(diào)整的問(wèn)題，（雖然這些問(wèn)題可能是很細(xì)小的）但它們卻真實(shí)的存在。在上面的例子中，注意到大寫(xiě)字母“D”從其余的字母中明顯的突顯出來(lái)了。默認(rèn) 情況下,很多字體,尤其是那些有明顯的襯線,它們具有不一致的字符間距。通常情況下，在一個(gè)段落或句子中，混合著一些不一致的字距做副文本，通常情況下這不是什么大問(wèn)題。然而，當(dāng)你在處理只有寥 寥數(shù)語(yǔ)的時(shí)候，如在標(biāo)題或logo中，忽視字距問(wèn)題可以摧毀整個(gè)審美。

      當(dāng)在處理網(wǎng)頁(yè)字體和css控制網(wǎng)頁(yè)字體顯示樣式時(shí)，字距調(diào)整問(wèn)題變得相當(dāng)復(fù)雜；如果你在Illustrator，Photishop等軟件中作為圖像創(chuàng)建一個(gè)文本（用來(lái)印刷或者網(wǎng)頁(yè)制作） ，那么修改起來(lái)會(huì)非常容易。在兩個(gè)字符之間插入你的光標(biāo) ，蘋(píng)果電腦上是option鍵（PC=alt)結(jié)合左右方向鍵調(diào)整字距空間。請(qǐng)記住，不要集中在這么多的字母和字母的負(fù)空間上。試著讓整個(gè)單詞或短 語(yǔ)的空間在視覺(jué)上保持一致。

＃3注意字體的溝通交流

      字體的選擇從不是一個(gè)武斷任意的過(guò)程。通過(guò)你自己的字體庫(kù)找一個(gè)你喜歡的字體看上去很簡(jiǎn)單，但這樣很少會(huì)得到一個(gè)有效的結(jié)果和答案。理由是，有些確定的類型字體與固 有的心理學(xué)有關(guān)。要明白我說(shuō)的是什么意思，思考一下下面給出的例子：

background-color: rgb(255, 255, 255); text-align: center;">    

      如果你是敏銳的，那么你會(huì)發(fā)現(xiàn)這些字體選集看上去是非常糟糕的。主要原因是，有視覺(jué)個(gè)性的字體選集和手寫(xiě)單詞被分開(kāi)了，脫節(jié)了。你也從不會(huì)在看到一個(gè)世界戰(zhàn)斗冠軍用 一個(gè)一個(gè)漂亮的腳本字體來(lái)表達(dá)驚呼興奮感。同樣的道理，你可能永遠(yuǎn)都不會(huì)在你的婚禮請(qǐng)柬上使用Cooper Black字體。我們已經(jīng)習(xí)慣于看到不同類型的用于特定用途的字體。

      每種字體都在意識(shí)和潛意識(shí)兩個(gè)層面?zhèn)鬟_(dá)特定的屬性。所傳達(dá)屬性的兩個(gè)主要領(lǐng)域是性別（gender)和時(shí)代。（英語(yǔ)里的Gender,中文翻譯為社會(huì)性別/性別，其實(shí)是不對(duì)的，這 個(gè)詞是所有物質(zhì)的性別，比如語(yǔ)言中詞性有陰性、陽(yáng)性和中性。）看一下下面的例子。

background-color: rgb(255, 255, 255); text-align: center;">    

請(qǐng)注意前兩個(gè)字體強(qiáng)烈傳達(dá)了特定的過(guò)去時(shí)代。同樣，下面的兩個(gè)字體各自有著強(qiáng)烈的基于性別的特征聯(lián)系。有著堅(jiān)硬邊緣的粗字體往往看起來(lái)更加陽(yáng)剛和男子漢，同時(shí)，曲線玲瓏，纖細(xì)的字體顯示 女性的和少女的特征。

這一切似乎都顯而易見(jiàn)，如果你能夠利用這些知識(shí)，就是用隱式的和直覺(jué)的這部分或者你主動(dòng)有意的去做一些嘗試，也許你排版的技能將會(huì)突飛猛進(jìn)地提高。

關(guān)于更多的字型

了解更多特殊類型的字體，看看Adobe的類型分類圖

background-color: rgb(255, 255, 255); text-align: center;">    

＃4對(duì)齊

      對(duì)齊是字體中一個(gè)極其重要的概念。出于某種原因，非設(shè)計(jì)師往往本能地用中心對(duì)齊來(lái)解決一切事情。在生活中，我們了解到，如果有些事情是對(duì)中的，然后讓它保持平衡，因 此這樣會(huì)更好。在現(xiàn)實(shí)中，居中對(duì)齊閱讀起來(lái)是最弱的，最難的，應(yīng)該用非常有選擇性的對(duì)齊方式。

background-color: rgb(255, 255, 255); text-align: center;">    

     上面圖片中的前兩段是左對(duì)齊。這種方式是我們習(xí)慣用來(lái)閱讀的，因?yàn)樗ǔＪ俏覀冊(cè)跁?shū)籍或者雜志中看到的排版方式。中心對(duì)齊的段落閱讀起來(lái)更困難，由于它缺乏輪廓鮮明 的邊緣。每一行都沒(méi)有一致的起點(diǎn)或者是終點(diǎn)，所以你的眼睛需要花一些時(shí)間來(lái)適應(yīng)每一個(gè)新行。在實(shí)踐中，也許這兩種不同做法是微妙的，但在原則上確是巨大的。

      這并不是意味著你在任何時(shí)候你只能使用左對(duì)齊。你在試圖實(shí)現(xiàn)的時(shí)候，只是一定要不斷的問(wèn)自己可讀性與獨(dú)特的審美哪個(gè)重要。理想情況是這些原則總在一起工作，但事實(shí)上 ，他們往往對(duì)立，需要妥協(xié)一方或另一方。

     另一件事需要注意的是混合對(duì)齊模式。無(wú)論你選哪種對(duì)齊模式，盡量在你的設(shè)計(jì)中保持一致。它通常（但并不總是）適合于把標(biāo)題中心對(duì)齊,正文左對(duì)齊。但如果嘗試混合排版可 能導(dǎo)致視覺(jué)混亂和頁(yè)面雜亂。

      有關(guān)字體排版的更多信息，請(qǐng)查看文章下面。

為網(wǎng)頁(yè)選擇字體排版的對(duì)齊方式

background-color: rgb(255, 255, 255); text-align: center;">    

＃5選擇一個(gè)好的輔助字體

在你選擇好一個(gè)主要的字型后，接下來(lái)就是選擇另一種字體來(lái)強(qiáng)調(diào)它。這是一個(gè)和主字截然相反相沖突選擇?？聪聢D。

background-color: rgb(255, 255, 255); text-align: center;">    

      上述圖像中的第一個(gè)例子中有幾個(gè)問(wèn)題。首先，所選字體的類型是非常差的。該輔助字體比主字體更加華麗（和難以閱讀）！這有損于主字體，應(yīng)該避免。另外，即使在第一個(gè) 問(wèn)題不是一個(gè)問(wèn)題，這兩個(gè)字體被一起使用，簡(jiǎn)單的說(shuō)在粗細(xì)上就太相似了。即使它們是在風(fēng)格上截然不同，它們具有相似的筆劃重量在兩者之間不能提供足夠的視覺(jué)對(duì)比。

      第二個(gè)圖像使用更恰當(dāng)對(duì)比的字體，并且利用了更細(xì)，更簡(jiǎn)單的字體做副標(biāo)題。你在設(shè)計(jì)時(shí)，你的字體肯定沒(méi)有這么大的反差（例子中的字體作用是故意夸大了的），只要確保 他們足夠的不同，以避免視覺(jué)上的混亂，和更多的重點(diǎn)是放在主要的字體上。

＃6尺寸問(wèn)題

      我成為一個(gè)設(shè)計(jì)師有六年了，在六年中我設(shè)計(jì)創(chuàng)造了大量的印刷廣告。其中一件事就是在早期工作中你就知道宣傳資料的標(biāo)題應(yīng)該立即抓住讀者的眼球。在印刷的世界中，你只 有一兩秒鐘的時(shí)間引起別人的注意。如果你錯(cuò)過(guò)了這個(gè)機(jī)會(huì)，那么你就失去了你的潛在客戶。

      這實(shí)際上意味著，當(dāng)你創(chuàng)建一個(gè)標(biāo)題時(shí)，不要簡(jiǎn)單地把它打印輸出出來(lái)：要去設(shè)計(jì)它?？紤]以下兩個(gè)例子：

background-color: rgb(255, 255, 255); text-align: center;">    

      第一個(gè)標(biāo)題需要你閱讀每一個(gè)單詞，才會(huì)得到一個(gè)大致的消息。一切都是相同的尺寸，寬度和顏色，這沒(méi)有強(qiáng)調(diào)任何部分的消息。單詞“could”在視覺(jué)上和單詞“win”一樣重 要。

      相比之下，第二標(biāo)題要比第一個(gè)強(qiáng)得多，雖然它利用完全相同的消息。我不再去強(qiáng)調(diào)整句話，整句話不再那么重要，真正在吶喊的是里面的單詞。第一個(gè)標(biāo)題的問(wèn)題是，觀眾必 須愿意花時(shí)間去閱讀它。第二個(gè)的關(guān)鍵是當(dāng)觀眾看到標(biāo)題，只去閱讀最重要的部分，就像偶然發(fā)生的一樣。

      縱觀第二個(gè)例子中，你應(yīng)該注意到的第一件事就是單詞“WIN”，其次是“THE BAHAMAS”?！痹谶@一點(diǎn)上，如果你是目標(biāo)受眾，我們已經(jīng)激起了你的興趣，你更可能花費(fèi)時(shí)間來(lái) 看看這個(gè)消息是怎么一回事。

＃7 當(dāng)作藝術(shù)使用字體排版

background-color: rgb(255, 255, 255); text-align: center;">    

      現(xiàn)在，停止思考作為簡(jiǎn)單的標(biāo)題和正文排版的問(wèn)題  ，開(kāi)始考慮它作為一個(gè)設(shè)計(jì)元素該怎么設(shè)計(jì)。字體是精心設(shè)計(jì)的，因此具有一種高的審美對(duì)你設(shè)計(jì)庫(kù)來(lái)講是一個(gè)寶貴 的資產(chǎn)。這當(dāng)然遠(yuǎn)遠(yuǎn)超出用字母構(gòu)建外貌。如果你想創(chuàng)建一個(gè)typography-centric設(shè)計(jì)，想想你要怎樣把英雄和字體結(jié)合，作出一個(gè)吸引人的設(shè)計(jì)。

      另外，不要覺(jué)得你被現(xiàn)有的字體的結(jié)構(gòu)限制。擴(kuò)大字體的形狀來(lái)適應(yīng)你的需求。試著增加旋轉(zhuǎn)，紋理結(jié)構(gòu)，斑點(diǎn)等，和其他任何你能想到的，使字體看上去更加活躍。

background-color: rgb(255, 255, 255); text-align: center;">    

＃8找好的靈感

要學(xué)會(huì)創(chuàng)建有效的和有吸引力的排版，最好的辦法是找到并研究一些現(xiàn)有的例子。以下是網(wǎng)上尋找靈感一些好的文章，但不要就此止步。到處轉(zhuǎn)一下，看看你身邊其他人在做什么，為什么么這么做， 或者為什么看上去沒(méi)起到好的效果。

華麗的花字體設(shè)計(jì)案例

background-color: rgb(255, 255, 255); text-align: center;">    

40個(gè)漂亮的版式廣告設(shè)計(jì)的例子

background-color: rgb(255, 255, 255); text-align: center;">    

華麗的廣告設(shè)計(jì)中字體的例子

background-color: rgb(255, 255, 255); text-align: center;">    

50個(gè)古老 字體設(shè)計(jì)的例子

background-color: rgb(255, 255, 255); text-align: center;">    

打破規(guī)則

      記住這些規(guī)則只是為了成為指導(dǎo)方針來(lái)幫助您創(chuàng)建好的字體排版。

      一路上，你會(huì)發(fā)現(xiàn)一些你最好的作品公然破壞了一個(gè)或多個(gè)在本文中列出的原則。正如我之前所說(shuō),當(dāng)你完全了解一個(gè)給定的設(shè)計(jì)規(guī)則后，你可以打破它的許可。只要確保不是 任意的無(wú)視，而是有目的的執(zhí)行，以實(shí)現(xiàn)特定的目標(biāo)。

額外的學(xué)習(xí)資源

• Typedia: A Shared Encyclopedia of Typefaces

• Typophile

• The Elements of Typographical Style Applied to the Web

• 15 Tips to Choose a Good Text Type

規(guī)則往往會(huì)束縛我們，但我希望這8個(gè)建議你能夠好好了解，知道字體排版設(shè)計(jì)規(guī)則，但又不局限于規(guī)則中，也希望這8條建議可以成功打開(kāi)你的字體設(shè)計(jì)的可能性。