tft每日頭條

 > 生活

 > 一招教你提升字體設計的綜合水平

一招教你提升字體設計的綜合水平

生活 更新时间:2024-09-17 09:24:13

Hello,大家好,我們在做設計的時候總離不開字體,可是多如牛毛的字庫字體裡,免費的隻有那麼幾個,難以滿足我們的工作需求。铤而走險的話又會容易招到律師函警告,那麼怎麼辦呢?最直接粗暴的方式就是學會字體設計,需要用什麼字體就做什麼字體,自己動手,豐衣足食。那麼學習字體設計應該從哪裡開始學呢?今天的這節課,我們就為你開啟字體設計的新大門,給你們介紹一些最基礎最基礎的字體設計知識。

一招教你提升字體設計的綜合水平(學習字體設計前)1

首先,我們來了解一下字體設計的三個原則,第一個是易辨性,易辨性指的是我們設計的文字要易于識别。

一招教你提升字體設計的綜合水平(學習字體設計前)2

可讀性是指當我們設計了一套的字體,我們将它們放在一起之後,是否能夠讓人流暢、舒适的閱讀。

一招教你提升字體設計的綜合水平(學習字體設計前)3

藝術性是指字體的表現力與美觀程度,作為字體設計師,好看的字體肯定是我們所追求的。

一招教你提升字體設計的綜合水平(學習字體設計前)4

當然,不同情境下的字體對這三個原則的要求都是不同的。例如高速公路上的指示路牌,需要将易辨性做到極緻。

一招教你提升字體設計的綜合水平(學習字體設計前)5

日本就為了高速路的路牌專門設計了一款字體。

一招教你提升字體設計的綜合水平(學習字體設計前)6

我們來看看這一套字體,他的中宮非常的大,并且省略掉了非常多不影響識别度的細節。為的就是讓這款字體在極短的時間内就可以被識别。

一招教你提升字體設計的綜合水平(學習字體設計前)7

而對于書籍裡的大段文字,最主要追求的則是可讀性,降低人在大量閱讀時産生的疲憊感。

一招教你提升字體設計的綜合水平(學習字體設計前)8

對于海報上的标題字來說,藝術性則是相對最重要的,因為海報标題需要足夠的有張力和美觀才能夠吸引受衆的注意。但是海報也得保證一定的易辨性,完全丢失易辨性的海報就失去了他原本傳達的作用。

一招教你提升字體設計的綜合水平(學習字體設計前)9

不過對于一些玄之又玄的藝術作品來說,易辨性和可讀性就不是那麼重要了。但是設計師畢竟不是純粹的藝術家,我們面對的受衆是普羅大衆,我們做字體設計的時候還是需要盡可能的保證易辨性和可讀性。

對于字體設計來說,易辨性、可讀性和藝術性這三個原則是非常重要的,有許多初學字體設計的設計師總會忽略掉這三個原則,為了追求視覺上的效果,對文字的結構、筆畫進行大幅度的變動,導緻文字的識别性大大降低,而且最後做出來的效果也并不美觀。那麼初學字體設計的我們應該怎麼避免這種情況呢?很簡單,我們要先把字體的基礎打紮實,先不要追求變化。接下來我們就給大家講解一些漢字的筆畫結構以及其他基礎知識。

一招教你提升字體設計的綜合水平(學習字體設計前)10

大家還記得我們小學第一節語文課學的是什麼嗎?沒錯,學的就是筆畫和字體結構。接下來我就帶着大家一起來回顧一下這些已經被我們遺忘了的小學知識。

一招教你提升字體設計的綜合水平(學習字體設計前)11

講漢字筆畫的話我們不得不提到相傳王羲之所創造的永字八法。

一招教你提升字體設計的綜合水平(學習字體設計前)12

永字八法将永字拆分為了八個筆畫,分别為,側、勒、弩、趯、策、掠、啄、磔。

一招教你提升字體設計的綜合水平(學習字體設計前)13

他們分别對應點、橫、豎、鈎、提、撇、短撇和捺。

一招教你提升字體設計的綜合水平(學習字體設計前)14

到了現代,永字八法演變成了現代的八個基本筆畫(點、橫、豎、撇、捺、提、折、鈎),原來的短撇被折所取代了。

一招教你提升字體設計的綜合水平(學習字體設計前)15

通過這八個基本的筆畫,我們可以組合出更多複雜的筆畫。

一招教你提升字體設計的綜合水平(學習字體設計前)16

接着我們來回顧一下字體的結構,我們可以将字體按照結構分為單體字、上下結構、上中下結構、左右結構、左中右結構、半包圍結構、全包圍結構和鑲嵌結構。

一招教你提升字體設計的綜合水平(學習字體設計前)17

上面我們講的都是小學課本裡學過的字體知識,接下來我們就給大家傳授一些新的知識。字身框是字體外側的一個假想框,它代表了我們在電腦裡打出一個文字所占的大小。

一招教你提升字體設計的綜合水平(學習字體設計前)18

他的概念來源于鉛字印刷,指的是刻着文字的模型的外輪廓。

一招教你提升字體設計的綜合水平(學習字體設計前)19

在字身框的内部還會有一個字面框,字面框才是代表文字字形的實際大小,我們一般在做字之前都會先設定一個字面框作為設計的參考。

一招教你提升字體設計的綜合水平(學習字體設計前)20

如果我們将兩個字的字身框緊貼在一起,這兩個字的字面框之間的距離就是字間距。

一招教你提升字體設計的綜合水平(學習字體設計前)21

接着我們來講解重心,重心指的是字的視覺平衡點,在字體設計中,重心是非常重要的一個概念。那麼我們應該怎麼判斷一個字的重心在哪裡呢?

一招教你提升字體設計的綜合水平(學習字體設計前)22

按照物理學裡的方法,我們将字找兩個不同的點懸挂起來,沿着懸挂的繩子畫直線。那麼這兩條直線的交叉點就是這個字的重心。但是我們做字體設計的時候不可能按照這樣的方式去測量字體的重心,我們隻要大緻的目測一下,重心的位置是靠上還是靠下就可以了。

一招教你提升字體設計的綜合水平(學習字體設計前)23

中宮是字體設計中另外一個很重要的概念。它來源于書法中的九宮格,是九宮格最中間的一格。

一招教你提升字體設計的綜合水平(學習字體設計前)24

後來演變成了字體重心周圍的一片區域,我們通常用中宮的大小來衡量漢字筆畫的疏密程度。

一招教你提升字體設計的綜合水平(學習字體設計前)25

對于像繁體「東」字這樣中間有一個封閉空間的漢字,我們就可以通過這個空間的大小來判斷漢字的中宮大小。

一招教你提升字體設計的綜合水平(學習字體設計前)26

那麼如果是像「南」字這種沒有封閉空間的字體來說,我們應該怎麼樣判斷中宮的大小呢?這裡我們介紹一個新的概念,叫做字白。字白指的是筆畫之間和外圍的白空間,也就是字身框内除去文字的部分。

一招教你提升字體設計的綜合水平(學習字體設計前)27

字白中,筆畫之間形成的包圍或者半包圍的白空間,我們稱之為字腔。

一招教你提升字體設計的綜合水平(學習字體設計前)28

而筆畫之間其他的未封閉的空間就叫做字谷,通過字腔和字谷的大小,就可以判斷出中宮的大小了。

一招教你提升字體設計的綜合水平(學習字體設計前)29

中心線相信很好理解了,就是字面框垂直和水平方向上,中間的兩條線。

一招教你提升字體設計的綜合水平(學習字體設計前)30

對于左右結構和上下結構來說,我們還可以畫出第二中心線來确定偏旁部首的位置。

一招教你提升字體設計的綜合水平(學習字體設計前)31

文字的骨骼指的是字體筆畫的中心線,它和人的骨骼類似,人的骨骼決定了人的高矮,而文字的骨骼則決定了文字的重心、中宮和高矮胖瘦等。

一招教你提升字體設計的綜合水平(學習字體設計前)32

那麼有骨骼肯定就得有皮肉,文字中的皮肉叫做體飾,指的是筆畫中的裝飾部分,決定了字體的外觀。

在字體設計中有一句行話,叫做骨骼大于體飾,什麼意思呢?就是一個字的骨骼搭得好,那麼他體飾即使沒那麼好看,這個字看上去也像那麼回事。可是如果這個字的骨骼本身就很難看,不穩,那麼體飾無論再怎麼變,這個字也很難變得好看。前面說到骨骼與文字的字面、中宮和重心有緊密的聯系,下面我們就給大家介紹一下,骨骼是怎麼樣影響文字的氣質的。

一招教你提升字體設計的綜合水平(學習字體設計前)33

那我們先來看看字面,我們還是用這個東字來做示範。字面可以分為窄體、寬體和正常體。

一招教你提升字體設計的綜合水平(學習字體設計前)34

不知道大家有沒有看過指環王,字面寬的字體就像是電影裡雖然很矮但是非常強壯的矮人戰士,他給人力量感和穩重的印象。

一招教你提升字體設計的綜合水平(學習字體設計前)35

而字面窄的字體就像是高挑纖瘦的精靈王子,靈動、優雅是他的特征。

一招教你提升字體設計的綜合水平(學習字體設計前)36

接着我們來分析一下重心。這三個東字分别重心偏下,重心在中間和重心偏上。重心的高低可以類比人的腿長,重心越高,腿越長。

一招教你提升字體設計的綜合水平(學習字體設計前)37

所以重心偏高的字體就像是腿超長的超模,給人一種秀麗的印象。

一招教你提升字體設計的綜合水平(學習字體設計前)38

而重心低的字體就像是短腿柯基,給人可愛、嬉皮的印象。

一招教你提升字體設計的綜合水平(學習字體設計前)39

那麼像我們這樣普通腿長的人呢?重心靠中間甚至是稍微有一些偏低的字體是能夠給人一種成熟穩重的印象。

一招教你提升字體設計的綜合水平(學習字體設計前)40

影響骨架的還有中宮的大小。

一招教你提升字體設計的綜合水平(學習字體設計前)41

一般我們書寫的字中宮都比較小,所以中宮小的字會傳達出傳統或者文藝的氣質,而且會更偏秀氣一些。

一招教你提升字體設計的綜合水平(學習字體設計前)42

那麼中宮大的字是怎麼産生的呢?是因為最開始的印刷技術和電子顯示技術不夠發達,為了讓字體在較低的清晰度下也能被識别,所以當時的字體設計師就将字體的中宮設計得稍微大一些,提升字體的易辨性。所以中宮大的字體會給人一種現代感覺。另外中宮大的字體則相對比較大氣。

一招教你提升字體設計的綜合水平(學習字體設計前)43

接着我們就來分析一些作品來驗證一下剛剛我們的理論是否成立。化妝惑星的這四個字,字面偏窄,重心中間偏高,中宮偏小,所以這四個字的氣質是比較俏麗的,符合資生堂化妝品的特點。

一招教你提升字體設計的綜合水平(學習字體設計前)44

不動的這兩個字,字面很寬,重心很低,那麼就有活潑、調皮的氣質,而中宮是偏大的,所以整體氣質是現代、活潑的。

一招教你提升字體設計的綜合水平(學習字體設計前)45

這三個字的字面是寬的、重心中間偏低,傳達出穩重的氣質,而中宮偏大,所以舟山港的這三個字是既現代又穩重的。

一招教你提升字體設計的綜合水平(學習字體設計前)46

再看看這個logo,這四個字的字面是一個正方形,而重心稍微偏低,所以傳達出來的印象也是穩重的,然後搭配上偏小的中宮,讓這四個字有一些攝影的文藝屬性。

一招教你提升字體設計的綜合水平(學習字體設計前)47

這個美術館logo骨骼上的特點是窄字面、大中宮和中間的重心,所以這個美術館的氣質是現代、秀麗的。

一招教你提升字體設計的綜合水平(學習字體設計前)48

我們再來看看這個美術館,這個logo的字體與上一個logo的字體骨骼上的區别是重心變低了,所以他比上一個logo多了一些活潑的氣質。

一招教你提升字體設計的綜合水平(學習字體設計前)49

制面所的logo用了寬字面、中間重心的字體,體現了穩重的氣質,也可以體現了産品的品質保證,而中宮偏小,則表達了制面的傳統手法。

一招教你提升字體設計的綜合水平(學習字體設計前)50

這個建築事務所則用大中宮、中間中心的方式來體現出現代、專業的氣質。

一招教你提升字體設計的綜合水平(學習字體設計前)51

不知道大家有沒有吃過翠華餐廳?他是一家老字号的港式茶餐廳,所以他用了小的中宮去體現他的老字号,另外窄的字面也讓logo顯得更秀麗。

一招教你提升字體設計的綜合水平(學習字體設計前)52

這個logo同樣是窄字面、小中宮,但是重心卻高了不少,所以這個logo的氣質會更偏文藝一些。

當然,我們這些案例分析僅僅是從字體的骨骼上去分析,但是影響字體氣質的不隻有骨骼,體飾的多少、體飾的線條是幾何線條還是手寫線條、體飾的尖銳程度等等,都會影響字體的氣質,所以我們分析字體的時候應該更加綜合的去分析。接下來我們要給大家介紹字體中的視錯覺,相信作為設計師的大家對視錯覺都不會陌生吧?而字體設計中,視錯覺對字體的影響是非常大的,我們一起來看看吧。

一招教你提升字體設計的綜合水平(學習字體設計前)53

你們能看出這兩個矩形誰粗誰細嗎?看着是不是水平的這個矩形更粗一些呢?其實這兩個矩形是一模一樣的,因為由于視錯覺的關系,所以橫線看着會比豎線粗一些。

一招教你提升字體設計的綜合水平(學習字體設計前)54

我們再加入斜線和曲線進行對比,同樣粗細的線條,在視覺上,橫線最粗,接着是斜線,然後是豎線,曲線在視覺上是最細的。知道了這些視錯覺之後,我們就可以來講解筆畫的粗細應該怎麼進行視覺調整。

一招教你提升字體設計的綜合水平(學習字體設計前)55

第一點要注意的是橫線要細,豎線要粗。

一招教你提升字體設計的綜合水平(學習字體設計前)56

這是三條粗細一樣的線條,我們用他來做一個工字,會發現中間的這一條豎線看起來偏細了,所以我們要将他進行加粗處理。

一招教你提升字體設計的綜合水平(學習字體設計前)57

豎線加粗之後的工字就顯得粗細更勻稱了。

一招教你提升字體設計的綜合水平(學習字體設計前)58

第二點要注意的是字體中的主筆畫要加粗,副筆畫要細一些。

一招教你提升字體設計的綜合水平(學習字體設計前)59

例如這個申字,中間的長豎線就是他的主筆畫,其他的筆畫是副筆畫。現在中間的主筆和旁邊的筆畫是一樣粗細的,這樣看起來其實也沒有什麼太大的問題,不過我們嘗試加粗一下中間的主筆畫看看會有什麼區别。

一招教你提升字體設計的綜合水平(學習字體設計前)59

主筆畫加粗了之後,就能感覺到這個字更穩了,因為主心骨粗了一些。而且也使這個字的内部産生了主次關系,視覺上更突出了。

一招教你提升字體設計的綜合水平(學習字體設計前)61

對于筆畫少的字來說,主副筆的差别可能不太明顯,甚至我們不調節主副筆的粗細也影響不大,可是對于筆畫多而且筆畫比較粗的字來說,主粗副細這個原則就很重要了,例如這個獅字,現在他的筆畫就是全部一樣粗細,導緻了許多筆畫粘在一起了。如果我們将主筆調粗一些,副筆調細一些去避讓主筆畫,那麼這個字看起來就和諧多了。那麼問題來了,主筆到底應該是個怎麼樣的存在呢?

一招教你提升字體設計的綜合水平(學習字體設計前)62

文字裡的主筆就相當于建築裡的承重柱,他支撐着整個文字的骨架,那麼我們應該怎麼去尋找這些承重柱呢?下面給大家介紹兩個比較常見的主筆判斷方式。

一招教你提升字體設計的綜合水平(學習字體設計前)63

一般來說,橫畫和豎畫為主筆,而像點、撇、捺、提等筆畫均為副筆。

一招教你提升字體設計的綜合水平(學習字體設計前)64

例如木字,他的豎畫和橫畫就是這個字的主筆,起到支撐的作用,而撇和捺則是副筆。

一招教你提升字體設計的綜合水平(學習字體設計前)65

另外既然主筆作為承重柱,那麼他肯定得有足夠的長度去貫穿整個文字,所以筆畫長的比較可能是主筆,而筆畫短的一般就是副筆了。

一招教你提升字體設計的綜合水平(學習字體設計前)66

例如師字,他存在着很多的豎線,這些豎線裡,長的是主筆,而短一些的則是副筆。

當然這兩個判斷方式不足以判斷所有的漢字,所以我們對主筆的判斷可以稍微靈活點,具體情況具體分析。另外,當我們做一些變化性比較大的字體的時候,我們盡量将變化放在副筆上,而主筆保持不動。這樣可以保證文字的骨骼變化不會太大,導緻文字不穩。

一招教你提升字體設計的綜合水平(學習字體設計前)67

第三點要注意的是對于全包圍或者半包圍的文字,應該外圍筆畫加粗,内部筆畫減細。

一招教你提升字體設計的綜合水平(學習字體設計前)68

例如這個國字,如果我們内部和外部的筆畫是一樣粗的話,内部會顯得比較擁擠。稍微減細一下内部筆畫,中間的部分就會通透一些,沒那麼擠了。

一招教你提升字體設計的綜合水平(學習字體設計前)69

第四點是筆畫多的字減細,筆畫少的加粗。

一招教你提升字體設計的綜合水平(學習字體設計前)70

我們來看看這四組線條,他們的粗細都是相同的。随着筆畫的增多,圖形就變得越黑,越擠。我們可以看到第四個圖形基本上已經變成一塊黑色的色塊了。如果我們調整一下這些筆畫的粗細,這四個圖形在灰度上就會看起來比較均衡。

一招教你提升字體設計的綜合水平(學習字體設計前)71

我們用實際的文字做例子。十和鷹這兩個字的筆畫就相差得十分懸殊,十字隻有簡單的兩筆,而鷹字卻有十八筆。如果這兩個字用相同粗細的筆畫的話,我們可以看到鷹字的筆畫都糊在一塊了。所以我們需要對十字稍微加粗,鷹字的筆畫減細一些。這樣雖然兩個字的筆畫粗細不同,但是他們看起來是比較和諧的,灰度上不會差距過大。

一招教你提升字體設計的綜合水平(學習字體設計前)72

粗細調整的最後一點是筆畫交叉的地方減細。

一招教你提升字體設計的綜合水平(學習字體設計前)73

當兩個比較粗的筆畫交叉的時候,他們重疊的地方會出現一塊比較黑的區域。

一招教你提升字體設計的綜合水平(學習字體設計前)74

特别是當這兩個筆畫相差的角度不大的時候,這塊很黑的區域會顯得更大,所以我們需要對這個交叉的位置進行稍微的減細,減少這塊黑色的面積。

一招教你提升字體設計的綜合水平(學習字體設計前)75

例如這個希字。這個希字特别黑的地方有兩個,分别是頭頂上撇和捺的交接處,還有布字上方橫與撇的交接處。

一招教你提升字體設計的綜合水平(學習字體設計前)76

我們将這兩個交接的地方稍微減細一點之後,是不是這個字看起來就舒服多了,顯得沒有這麼憨。

一招教你提升字體設計的綜合水平(學習字體設計前)77

看到這裡你們會不會有疑問,交叉的位置我具體應該減細哪個筆畫呢?其實減細的地方是由文字中的其他筆畫決定。例如希字中的這一撇,為了避讓下方的撇,所以我們選擇在這個筆畫做減細處理。

一招教你提升字體設計的綜合水平(學習字體設計前)78

下方的這一撇也一樣,為了減少這一撇與巾字的重疊面積,所以将這一撇減細。

一招教你提升字體設計的綜合水平(學習字體設計前)79

除了筆畫的粗細需要視覺修正之外,文字的重心也是需要調整的。

一招教你提升字體設計的綜合水平(學習字體設計前)80

字身框垂直中線與水平中線的交點是文字的絕對中心,但是人對中心的判斷是有視錯覺的誤差的。人眼看到的視覺中心會比絕對中心高一些,并且稍微偏左一些。

一招教你提升字體設計的綜合水平(學習字體設計前)81

我們還是用這個申字作為例子,現在這個申字的重心就是絕對中心上,可是這麼看起來這個申字的重心是有一點偏下的,如果我們是想做一個重心在正中間的字體的話就得将中間這個田字往上和往右移動一點點,現在我們看這個申字的重心就在視覺的中間了。

一招教你提升字體設計的綜合水平(學習字體設計前)82

如果我們設計一系列的多個字體的話,我們需要讓這些字體的重心盡量保持一緻,現在我們看這一組字重心就是不一緻的,看起來就特别的别扭,重心頻繁的上下跳動會使得閱讀起來非常吃力。

一招教你提升字體設計的綜合水平(學習字體設計前)83

我們把重心調成大緻一緻之後,這組字體閱讀起來就舒服多了。

一招教你提升字體設計的綜合水平(學習字體設計前)84

不過我們需要知道,有些文字的重心是難以調整的,例如筆畫粗細均勻的刀和口字的重心總是在中間,而丁字的重心總會靠上。

一招教你提升字體設計的綜合水平(學習字體設計前)85

又例如上和下這兩個字的重心就比較難調成一緻,我們也沒必要為了強行讓兩個字重心一緻而做太多的變形。

一招教你提升字體設計的綜合水平(學習字體設計前)86

還有字面也是需要進行視錯覺修正的。

一招教你提升字體設計的綜合水平(學習字體設計前)87

這兩個矩形你們看的出來哪個才是真正的正方形嗎?是不是覺得左邊的有一點點偏窄,而右邊是正方形呢?

一招教你提升字體設計的綜合水平(學習字體設計前)88

可是實際上左邊才是真正的正方形,而右邊是一個100:103的長方形。我們的視錯覺會讓正方形顯得有些偏窄,所以當我們想要做一個絕對正方形的文字時,需要将字面稍微拉寬一些。

一招教你提升字體設計的綜合水平(學習字體設計前)89

例如這兩個國字就是分别用絕對正方形和視覺正方形做出來的。

一招教你提升字體設計的綜合水平(學習字體設計前)90

除了正方形之外,我們加入一些别的幾何圖形,試一下在字面框裡應該怎麼編排這些圖形。如果将這些幾何圖形撐滿整個字面框的話。去掉字面框之後我們會發現這些圖形的大小相差很多,而且在視覺上,他們上下兩側并不是對齊的。

一招教你提升字體設計的綜合水平(學習字體設計前)91

所以針對不同的幾何圖形,需要稍微進行一些調整,例如正方形和圓形往中間縮小一些,三角形往上方縮小一些。這樣去掉字面框之後,他們看起來就和諧多了。

一招教你提升字體設計的綜合水平(學習字體設計前)92

為什麼我們要用這四種幾何圖形做這樣的試驗呢?因為這四種幾何圖形對應着部分漢字的外輪廓,例如田字對應正方形,今字是典型的菱形,卷字是圓形,而上字則可以類比成三角形。

一招教你提升字體設計的綜合水平(學習字體設計前)93

如果我們對這四個漢字不進行視覺上的調整,他們看起來也會顯得非常不整齊和不協調。

一招教你提升字體設計的綜合水平(學習字體設計前)94

所以我們也應該根據漢字的外形進行字面的調整,讓他們在視覺上看起來大小一緻,上下方也能夠對齊。

關于字體設計的基礎知識就講到這裡,我們一起來回顧一下這節課都講了些什麼,首先我們給大家講解了字體設計的三大原則——易辨性、可讀性和藝術性,接着講了字體設計中的一些基礎術語與知識,然後分析了骨骼中的字面、中宮和重心對字體氣質的影響,最後解析了字體設計中的視錯覺以及視錯覺修正。聽完這節課下來是不是覺得做一套看起來平平無奇的字庫字體,其實也有非常多值得考究的地方,瞬間就覺得其實字庫的收費也沒有那麼過分呢?那麼這節課就到這裡啦,你們還想聽什麼關于字體設計的知識,歡迎留言,我是千樹,我們下期再見,byebye。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved