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

2015/7/16 8:58:00來源：站酷網(wǎng)

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

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

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

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

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

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

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

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

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

這是什么鬼？

這個問題的答案是顯而易見的：“因為你是一個設(shè)計師！”如果你經(jīng)常里使用單詞創(chuàng)作設(shè)計作品的話，不管你打算做還是不做你都要深入研究鉆研字體。花些時間學(xué)習(xí)的基本原則會讓你清楚了解你選擇的字體，其中使用類型的藝術(shù)特點和方式。

＃2注意你的字距

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

字距是什么？

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

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

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

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

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

＃3注意字體的溝通交流

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

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

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

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

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

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

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

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

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

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

＃4對齊

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

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

上面圖片中的前兩段是左對齊。這種方式是我們習(xí)慣用來閱讀的，因為它通常是我們在書籍或者雜志中看到的排版方式。中心對齊的段落閱讀起來更困難，由于它缺乏輪廓鮮明的邊緣。每一行都沒有一致的起點或者是終點，所以你的眼睛需要花一些時間來適應(yīng)每一個新行。在實踐中，也許這兩種不同做法是微妙的，但在原則上確是巨大的。

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

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

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

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

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

＃5選擇一個好的輔助字體

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

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

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

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

＃6尺寸問題

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

這實際上意味著，當(dāng)你創(chuàng)建一個標(biāo)題時，不要簡單地把它打印輸出出來：要去設(shè)計它。考慮以下兩個例子：

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

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

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

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

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

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

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

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

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