2020-7-13 資深UI設計者
宋體字可以說是我們現在最常用的字體之一,一方面他與黑體一樣,具有非常良好的可讀性和易辨性,另一方面,他又比黑體更具有歷史感和東方韻味,我們可以看到很多的教材、書籍內文或者官方文件,都是用的宋體字,甚至許多設計都會用一些比較有表現力的宋體字作為標題。所以可想而知,學習設計宋體字對我們的幫助有多大。正所謂欲知大道,必先知史。所以在講如何設計宋體字之前,我們先來扒一扒宋體字的歷史吧。
雖然說宋體字叫做宋體字,但是如果要追溯宋體字的起源,我們還得從唐朝說起。
唐朝時期,佛教在中國開始盛行開來,唐朝皇帝甚至派出唐僧師徒四人前往西天取經。
于是便出現了「抄經生」這種人肉印刷機。這篇經文便是當時唐朝的抄經生所抄寫的,他們需要使用規整統一的楷體,文字的開頭在同一水平線,而且每一列的字數統一規定為17或者19個字,方便字數的統計,像這一篇經文每一列就是17個字。
可是即便出現了大量的抄經生,依舊滿足不了人們對經書的需求。于是聰明的中國人開始印刷經書,將經文刻在木板上,就可以實現大量的印刷了。
可是楷書刻起來是很不方便的。一方面,書法家寫的楷書講究起承轉合、抑揚頓挫,不同的人寫出來的字風格差異十分明顯,例如顏真卿和趙孟頫他們所寫的「宋」字就明顯不同,即便用筆臨摹都很難了,更別說雕刻出來了。
另一方面楷體由于是書寫的字體,所以大多數筆畫都是帶有弧度的,而在木板上刻字,曲線是非常難刻的。
于是他們逐漸將曲線刻成直線,把筆畫的弧形特征降低,也將楷體中相同的筆畫進行規范了,這樣的字體便是宋體字的前身。
我們可以看一下宋朝時期的刻本,這是南宋時期陳宅經籍鋪所刊刻的《朱慶馀詩集》。這時,撇、捺等筆畫的彎曲程度大大降低了,而豎筆和橫筆也基本上變成筆直的直線了。不過宋朝時期刻本體的橫畫依舊是傾斜的,從中依然能很明顯地看到楷體的痕跡。那么為什么宋體字會形成橫細豎粗,橫畫后帶三角形飾角的字形呢?
那是因為刻字的木板上是帶有木紋的,如果垂直木頭的紋理刻的話,筆畫會比較容易斷,需要加粗一些。而如果是順著木紋刻的話,就沒那么容易斷,所以可以相對細一些。可是為什么是橫畫細,豎畫粗呢?反過來不行嗎。
那是因為在大多數的漢字中,橫畫都是比豎畫多的。上海交大的郭曙綸教授對20902個漢字進行了統計,發現這些漢字的總筆畫數量多達268479個,而其中橫畫有82682個,占30.8%,而豎畫有51459個,占19.2%。可見,在漢字中橫畫是比豎畫多的。所以如果將橫畫刻粗,豎畫刻細的話,可能會使得字體過擠而不美觀。
雖然說橫畫順著木紋,比較不容易斷,可是橫畫的兩端還是會比較容易磨損的,所以工匠們一般會將橫畫的兩端稍微刻大一些,形成飾角。
在明朝,宋體得到了進一步的簡化,原本復雜精細的刀刻技法簡化成了橫、豎和斜三種,所以刻字工匠的門檻大大降低了,宋體字得到了真正的普及。我們同樣來看一下明朝時期的刻本,這是明朝時期汲古閣刻印的《道德指歸論》,這個時候的宋體橫畫已經基本變成水平了,雖然筆畫依舊比較張揚,但是已經少了許多楷體的影子。所以從明朝時期開始的刻本體才能算作真正的宋體。
也是在明朝時期,宋體字傳到了日本,所以現在日本將宋體字稱為明朝體。
清朝是刻本最多的一個朝代,而宋體字在中國真正被確定統一稱為「宋體字」也是發生在清朝。
了解了宋體字的歷史后,我們可以發現宋體字的意義并非只是美觀和易讀而已,他是經過中華民族近千年傳承、優化和改良的文化結晶,他的身上有著厚重的文化氣息。也難怪中國、日本、韓國等受中華文化影響的國家會對宋體有獨特的偏愛。接著我們就正式進入設計宋體字的教程部分,首先我們來了解一下宋體字的主要特征。
從楷體字轉變為宋體,主要產生了三個特征,第一個是橫平豎直,也就是說橫畫是水平的,豎畫是垂直的。第二個特征是橫畫比較細,豎畫比較粗。第三個特征是筆畫上出現了三角形的裝飾角。
可是隨著字體設計的發展,對于宋體的定義已經越來越模糊了。例如上面的這三種字體,雖然他們不完全滿足宋體的特征,可是它們都能算作是宋體。所以我們也不需要對宋體下一個死定義,免得我們在設計字體的時候被定義所束縛住了。
可是仿宋體是不能夠算是宋體字的。我們看仿宋體是不是覺得他和宋朝時期的刻本非常像呢?因為仿宋體是在民國時期,丁善之和丁輔之模仿宋刻本所設計出來的字體,所以仿宋體模仿的是宋朝刻本,而非宋體字,那么仿宋體當然也就不能算在宋體的行列里了。
接著我們來分析一下宋體字的氣質。由于宋體誕生于明朝,具有非常悠長的歷史,而黑體是在民國時期才產生的,所以宋體相對于黑體更能體現傳統感、文化感的氣質屬性。
所以我們做現代風格的設計的時候,可以使用黑體。
而做比較具有傳統風格的設計則可以用宋體。當然也并非說宋體就沒辦法做現代感的設計,通過對宋體體飾和中宮的設計,我們完全可以做出一款現代型的宋體。
先來說一下中宮,我們在之前的教程里說過,中宮越大,越顯現代感,而中宮越小,則越有傳統感。在宋體里也不例外。
我們再來看看這兩個「東」字,很明顯也是左邊的「東」字更現代一些,而右邊的「東」字傳統一些。這兩個字的區別在于體飾的不同。體飾越少越簡潔,宋體就越顯現代;體飾越多越復雜,就越顯傳統。
另外幾何形的體飾也會給宋體帶來現代感。
而傳統宋體字的體飾則是具有手寫感的,線條比較圓滑。
根據體飾和中宮的不同,我們可以大致地將宋體分為三大類。中宮小、體飾多且具有手寫感的宋體歸類為傳統型宋體,中宮大、體飾少且為幾何體飾的則歸類為現代型宋體。而具有一定手寫感的體飾,且中宮偏大的宋體,則歸類為中間型的宋體。
除了中宮和體飾之外,我們還經常調整筆畫粗細去適應宋體字不同的用途。首先我們先來講講正文的宋體。一般正文的字號都是比較小的,如果橫畫過細的話,會使得橫畫幾乎看不見了,而如果橫畫過粗的話,筆畫又會糊在一塊了,所以為了讓宋體字在小字號下也能清晰的顯示,一般橫畫和豎畫的粗細會控制在1:2到1:3左右,最大一般也不會超過1:4。
不過我們設計正文字體的機會還是比較少的,大多數時候我們都是需要設計比較具有張力的標題字。這個時候我們就可以嘗試拉大橫畫和豎畫的粗細差距。當橫畫和豎畫的粗細差距非常大的時候,可以產生較強的視覺沖擊力。畫面中這三款標題宋體,都用了細橫畫搭配粗豎畫。
有時候我們也可以反其道而行之,將橫畫加粗,讓橫畫與豎畫差不多的粗細。這樣我們就可以獲得一款非常醒目的宋體。這樣的宋體有點像比較粗的黑體,既有醒目的特點,也保留了宋體優雅的屬性。
當然,具有張力的標題宋體也并非一定要通過控制橫豎筆畫的粗細來塑造,通過設計一些有張力的體飾,同樣可以讓宋體字變得具有表現力。設計體飾是設計宋體字非常重要的一個環節,因為宋體字的大多數筆畫是存在許多體飾的,我們除了要將體飾設計得好看之外,更重要的是讓不同的體飾和諧共存。如果一個宋體字里存在的體飾都風格不一,那么這個宋體字看著就會不倫不類了。下面我就給大家介紹一個我比較常用的,設計宋體字體飾的方法。
在做字之前,我們要先確定我們想要做的字體的氣質,是傳統的,還是現代的?文藝的還是可愛的?又或者是其他的氣質。因為我們前面也說到,體飾和中宮都會影響字體的氣質,所以我們必須要確定了氣質之后,才能動手去設計字體的中宮和體飾。
另外還要確定字體的用途,需要比較有張力的標題字體,還是需要具備閱讀舒適性的正文字體,那我們也能確定文字的筆畫粗細。
確定好了風格之后,我們就可以開始設計筆畫了。那么我們先來回顧一下,漢字里的八個基本筆畫,我們可以先把這八個筆畫的體飾特征都設計好了,再去拼湊我們想要的字。
一般來說,我們設計宋體會先從橫畫開始設計。因為確定了橫畫之后,體飾的風格、體飾大小、筆畫粗細等很多東西就都可以確定了。
其實宋體中的體飾都是來源于書法中的頓筆,所以我們來看看書法中,橫畫是怎么寫的,書法中的橫在起筆和收筆處分別有一個頓筆。這兩個頓筆分別對應著宋體橫畫首尾的兩處體飾。對于宋體字來說,橫畫末尾的這個體飾是非常重要的,他對整個字體的氣質影響非常的大。
我們前面已經介紹了這兩種襯角分別具有現代感和傳統感。
而這一個的襯角是一個比較圓潤的圓形,他可以用來做比較可愛的宋體。
這一個襯角和剛剛的就正好相反,非常的非常尖銳,適合用來做比較恐怖的宋體。
還有一點要注意的是,如果豎畫越粗的話,橫畫的襯角一般也要相應的變大一些。
因為宋體的橫畫本來就已經很細了,如果襯角還非常小的話,橫畫很容易就會被忽略掉了,橫畫末端的這個三角形起到了一定強調橫線的作用。當然如果是故意要設計成小襯角或者無襯角的話就另當別論了。
橫畫做好之后,就可以開始設計豎畫了。在書法中,豎畫在起筆處會有一個頓筆,而收筆的地方會稍微往左側偏一些,這樣分別形成了宋體中豎畫起筆和收筆的兩處體飾。
那么我們應該怎么用橫畫推導出豎畫呢?橫畫和豎畫關聯度最大的地方在橫畫三角形襯角和豎畫上方襯角的這個地方。例如這一組都是直線加切角。
而這組都是曲線加圓角。
另外我們還能將這兩個地方給聯系起來,因為他們都是起筆的位置。如果橫畫的起筆是水平的話,那么豎畫的起筆就應該是垂直的。
而如果橫畫的起筆是往外擴的話,那么豎畫的起筆也可以往外擴張。
我一般還會將豎畫的起筆和收筆的的地方關聯起來,如果起筆是垂直的,那么收筆我也會設置成垂直的。
而如果起筆往外擴的話,那么收筆我也會往外擴形成書寫曲線,這樣整個豎畫能看起來平衡一些。
接著來設計橫折。書法中在這個轉折的地方會有一個頓筆。所以在宋體的橫折處也會形成一個裝飾角。
其實橫折這個筆畫在設計好橫畫和豎畫之后基本就已經出來了。只要將他們組合在一起,然后將橫畫的襯角往回縮小一些,橫折就做好了。
講完了橫折我們順便也講一下這種口字的結構好了。口字結構由剛剛做好的橫折加上一個豎線和一個去掉三角襯角的橫線組成。然后我們需要做一些細微的調整。豎筆體飾的這個地方需要往上收一些,不要漏出來,這樣的筆畫看著能干凈一些。
然后豎畫入筆的地方也要往上提一些,讓左右兩邊的體飾能夠平衡。
最后加上橫畫,把襯角的部分裁去,注意兩個豎線需要出頭一些。這個口字就完成了。
然后來做撇和捺。書法里的撇起筆的地方有一個頓筆,所以宋體里,撇有一處體飾。
書法里捺則在起筆和收筆處各有一處轉折。所以宋體里,捺則有兩處體飾。
撇基本上可以從豎線輕易地推導出來,因為他們的起筆都是一樣的,只要稍微調整一下起筆的角度就可以了。
而捺與撇是正好相反的,起筆細,收筆粗,所以捺的起筆需要縮小一些,但是需要保證這兩個地方是相同的。而捺的收筆是一個比較獨立的地方,只需要風格保持大致一致就好了。
接著來做提。在書法中,提的起筆一般是會有一個頓筆的,這一個頓筆與豎的起筆的頓筆是類似,所以在宋體中,提的起筆會有一個與豎類似的體飾。
提與豎起筆的體飾是差不多的,只是方向不同而已。
最后就只剩下點和鉤兩個基礎筆畫還沒設計了。這兩個筆畫和別的筆畫之間的聯系不太大,同樣也只需要保持整體筆畫風格一致就好了。不過點和鉤之間卻存在著一定的聯系的。最主要的是體現在這個地方,如果是尖角,那么點和鉤最好都統一為尖角。
而如果點是圓滑過渡的,那么鉤最好也是圓角。
另外還有如果點的這個位置是比較飽滿的話,那么鉤轉折的位置也應該設計得飽滿一些。
而如果是瘦瘦的點,鉤轉折的位置也要相應的瘦一些。
最后還有一個需要統一的地方,就是撇、點、鉤等筆畫的收筆必須要保持一致。可以是圓角、還是切角、尖角或者是其他特殊的角,收筆的大小也應該統一。
不過我們設計宋體字時,也并非一定要百分百遵循這一套設計方法,因為這一套設計理論是結合書法所推導出來的,而隨著時代的發展,宋體字的形式和定義也不斷被拓寬,例如一些比較新型的宋體,都會省略掉豎、撇、捺等筆畫的體飾,讓字體顯得更簡潔一些。所以如果大家想做一些比較創新的宋體字,而非傳統嚴謹的字體的話,大可以放開手腳去設計,最終只要保證美觀和和諧統一就好了。
我們在將所有筆畫都設計完之后,就可以將筆畫拼起來了,可是如果我們設計的筆畫比較沒有特點,最后拼湊出來的字體也就顯得有些中規中矩,缺乏視覺張力。那么接下來我就給大家介紹幾個讓宋體字比較有張力的常用方法。
第一個是在宋體字的筆畫之間加入連接線,模擬寫字的連筆效果。
由于宋體字是用刀刻出來的字,基本上是不會有連筆的存在,而加入連筆線條就可以緩和宋體字刀刻的僵硬感,讓文字顯得更靈動。
第二個方式是將設計好的筆畫松散的排列。
因為宋體具有文藝的氣質,而將筆畫松散地排列能夠體現一種慵懶的文藝感,和宋體的氣質是非常契合的。
不過這種方式最好能與詞義吻合,例如團圓這個詞應該是筆畫凝結在一起更能符合團圓的詞義,像這樣做得松松垮垮的味道就有些不太對了。
第三個方式是省略橫畫。由于宋體字存在著三角襯角,所以即便省略掉了橫線,依舊能夠通過三角襯角判斷橫線的位置。
所以省略橫畫對宋體的識別度影響不大,并且能夠增加宋體字的圖形感。
第四個方式是斷筆。
剛剛我們講到了宋體存在著三角襯角,所以省略掉橫畫也不會過多的影響識別度。那么在斷筆這里也是一樣的道理,我們最好選擇斷開橫畫,因為這樣對字體識別度的影響最小。
也許有的人聽到這里會覺得,這才是課程的重點。其實并不是的,這里教給大家的四個增加張力的手法只是輔助工具而已,不是說我先隨便瞎設計一個字體,然后再套用這幾個方法去增加形式感,我認為這樣的方式只是在遮丑而已,而作為設計師的我們更應該追求骨骼和體飾的美感,而非一味遮丑。那么教程部分就到這里結束,下面給大家示范一個案例吧。
我們這節課的案例就是做韋禮安這首貓咪共和國的單曲封面。這是我從MV開頭截的圖。我們可以看到MV中貓咪共和國這五個字是手寫的,給人一種可愛隨意的感覺。那么我們這節課就嘗試用宋體字來體現這種感覺。
那么我們對這款字體的定位就很明確了,是一款可愛的標題字體。
我們先在屏幕上打上貓咪共和國五個字作為字體骨骼的參考。這里我選擇了思源宋體,因為思源宋體是一款現代型的字體,中宮比較大一些。太過緊湊的中宮不適合我們塑造可愛、隨意的感覺。另外一個很重要的原因是,思源宋體雖然高貴,但是免費,如果我們改動的程度不大,也不會造成侵權。
為了讓字體更憨一點,我們可以將文字壓扁一點點,營造出一種老子一米五的感覺。然后就可以降低透明度,開始在這個參考骨架上秀一波操作了,接下來我們就一個筆畫一個筆畫地來設計。
首先因為是標題字體,所以我們希望做一個橫畫和豎畫都差不多粗的宋體,這樣會比較醒目一些。然后因為氣質是可愛的,所以我把體飾設置成圓圓的,胖胖的。
我們用橫畫推導出豎畫。體飾方面基本上就直接照搬了橫畫的體飾,因為橫畫的風格很明顯了,豎畫保持一致就可以了。
接著做橫折。我們先將橫畫和豎畫湊一起看看。這樣會有兩個比較大的問題,一個是豎線的體飾凸出來了一塊,另一個是橫畫和豎畫的襯角疊加在一塊顯得太大了。所以我們需要將襯角縮小一些。
接著做口字結構,我們將豎畫放好之后,發現不用調整也挺平衡的,所以我們就直接用這一個口字。
然后撇和捺的起筆我們也可以直接用豎畫的起筆推導出來。
值得注意的是,我們可以看一下這個撇,為了凸顯這個筆畫的可愛,所以我們筆畫的粗細變化其實是很小的,為的是讓收筆的地方比較鈍一些,顯得更人畜無害。
同樣為了營造字體可愛的氣質,我將捺的收筆也設計成圓弧收筆,而并非普通宋體的尖銳收筆。
接下來我們應該是要做提筆畫的,可是我們發現這五個字里并沒有提,所以我們就跳過他,直接做點和鉤了。同樣為了保證風格的一致,這個點的粗細變化也不大,而且頭特別鈍。
點和鉤之間是有關聯的,這三組地方分別互相對應。
① 端點應該都比較大,比較鈍一些;
② 圓滑地過渡;
③ 屁股的地方比較飽滿一些。
將做好的筆畫放上去,接著還需要做一些調整,因為我們現在用的還是思源宋體的骨架,這個骨架和我們設計的筆畫并不一定搭。我對字面大小,視錯覺等進行了一定的修正,然后還將中宮稍微擴大了一些。這時候我們會發現,調整過后的這組字依然顯得太過正經,還是擺脫不了思源宋體正文字的屬性,而我們想做的字應該是可愛、慵懶的標題字。
不知道大家還記不記得我們剛剛講的宋體字四種增加張力的套路。很明顯松散筆畫這種方式最適合隨機慵懶的感覺,那么我們來試試看。
我們先將這五個字的字距拉開一些,方便我們調整筆畫。然后將筆畫松散地排列開。
接著我們還需要做一些調整,這樣看起來太粗糙了。我們將點、撇、捺等筆畫調短一些,讓他們具有點的感覺。因為點的構成具有隨機和活潑的氣質。
然后將重心往下壓,因為重心靠下的字體會顯得比較憨一些,那么我們這一組字就完成了。
最后我們用這個字來做一個版面,先建立一個單曲封面125mm*125mm的畫板,并設置5mm的頁邊距和7*7的網格。
然后我們放入一張貓的照片作為版面的主體,占據右下角的5.5欄。
接著我們將做好的字體放在左上角,和右下角的貓做對角線的呼應,可是這么擺放好像還是不夠好玩。
所以我們加入英文和線條做成一個文字組合。
最后在版面的左下角加入其它信息,這個單曲封面就做好了。
效果還不錯吧。
最后我們來總結一下這節課。首先我們給大家扒了一下宋體字的歷史,知道了宋體字誕生于明朝,可是最早能夠追溯到唐朝。接著分析了宋體字的特征和氣質,宋體字相較黑體字具有傳統、文化的屬性,可是也能通過對體飾、中宮的控制,設計出具有現代感的宋體。然后我們教給了大家一套設計宋體字體飾的方法,最后是四個增加宋體字張力的常用手法。那么我們這節課就到這里,我是千樹,我們下次再見。
文章來源:優設 作者:研習設
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務