• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析網頁中文字體設計總結




    詳細解析網頁中文字體設計總結

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自未知的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    讀一本書,看一份報,文字從產生之初就發揮着它不可撼動的地位,充斥着我們每個人每天的生活;然而在繁雜的文字設計中,跳開這些設計,更該去看看最初的文字是什麼樣子的,珍惜它們每一次的蛻變。


    設計理論教學開始

    讀一本書,看一份報,文字從產生之初就發揮着它不可撼動的地位,充斥着我們每個人每天的生活;然而在繁雜的文字設計中,跳開這些設計,更該去看看最初的文字是什麼樣子的,珍惜它們每一次的蛻變…

    詳細解析網頁中文字體設計總結

    中文字體之宋體

    中國文字創造之初,與埃及相同,都是由圖畫、象形文字演化而來的。但其進化情況卻又不同。中國文字的演化,始終維持着原始的繪畫或符號內容,只是在形成更多文字時,在原有文字的基礎上,加以各種組合,以求形成更多的文字,這在世界文化史上是獨一無二的。中國文字的發展,由秦始皇統一中國后,漢字進行了一系列簡化,規範化的處理。在木板印刷出現以前,古代典籍為了流傳的需要只能手工傳抄,由於手工抄寫成本高效率底,易出錯誤,於是木板印刷逐漸盛行。這樣,為了刻版方便,漸漸的刻工們發明了一種新字體,它的特點是:字形方正,M直粗。在轉折處有小三角形裝飾。這種字體比楷體更加規範標準,成為了標準字體,適合大規模地刻版使用。這無疑是為了刻書方便從楷體演變出的一種新的字體。由於這種字體大大流行使用於宋朝以後的木版印刷的書籍,後人就稱有這種特點的字體為“宋體”。宋體字從歷史上出現以後,它的特點就固定了下來,一直使用到現代,直到出現了機械化的印刷工業。在現代印刷中區分更加詳細,把橫細豎粗的成為“老宋體”。宋體字的字形方正,筆畫橫平豎直,橫細豎粗,稜角分明,結構嚴謹,整齊均勻,有極強的筆畫規律性,從而使人在閱讀時有一種舒適醒目的感覺。在現代印刷中主要用於書刊或報紙的正文部分。宋體字傳承了中國書法的審美韻味 ,在筆畫上,仍然保持了中國書法的本質特徵。在與唐楷顏體比較時,我們看得更清楚,如點、捺、撇及轉折處的頓挫處理,就是對書法運筆進行了高度的藝術化概括。

    詳細解析網頁中文字體設計總結

    上圖4種字體除了第一種最保守的老宋體,其他3種都是衍生出來的宋體字體,我們可以看出前面兩種的胸線比較大(字體比較開闊),這是明顯的比較現代的字體;而後面兩種字體胸線比較小,偏向傳統的字體。傳統宋體,可以看出,在它身上保留有不少楷體的特徵,紅色小圈圈裡面三角形的鱗(小三角裝飾)比較剛硬,是用稜角分明的幾何形構成的,雖然給人以嚴謹的感覺但是讓人覺得太過嚴肅拘謹,所以在現代設計的運用中,大家更偏向於運用其他宋體字形。和傳統宋體相比,長宋體的鱗就顯得沒有那麼尖銳了,停筆處依稀可見手筆的停頓轉折,看上去圓潤了不少。長宋體看上去比一般的宋體要長,也就是剛才說的胸線比較小;它的橫、豎粗細相近,點、撇、捺、挑、勾比較挺拔,綜合了老宋和仿宋的特點。大標宋,它的特點是橫豎筆畫對比明顯,筆畫輕重適中,沒有那麼硬朗,字形端正,醒目有力,常用於內文標題、封面和廣告設計,具有現代感 (類似粗襯線體,後面會提到)。仿宋體,最大特點是橫豎等寬”,風格更偏向於手寫體,它其實是宋徽宗的瘦金書字體演變而來的,特點是瘦直挺拔,橫畫收筆帶鉤,豎划收筆帶點,撇如匕首,捺如切刀,豎鉤細長;如果說宋體是具有裝飾藝術的代表字體,那麼與之相對立的就是黑體,黑體的特點就是橫線和豎線寬度相等,去除過多的裝飾細節,更加簡潔。由於當時印刷業的發展,正文部分用的都是宋體,想要突出標題部分從而發展了黑體。

    詳細解析網頁中文字體設計總結

    黑體本身就屬於比較現代的一種字體,所以它的字面和胸線都比較大,這樣比較容易閱讀,根據不同需要,設計出橫豎筆畫不同粗細的黑體字形來,最基本的就是第一種,纖細的黑體字給人輕,秀氣的感覺,粗厚的黑體字給人重,粗壯,力量的感覺,這些字形都是根據不同的需要設計而來的。中文字形除了宋體和黑體這兩種基本字形以外,還有很多不同種類的,比如

    詳細解析網頁中文字體設計總結

    PS:襯線體說法後面會有提到,因為襯線體和無襯線體都是西方字體發展中出現的說法,套用在中文字形中,宋體即是襯線體;黑體即是無襯線體。

    英文字體之有無襯線體

    西方字母的產生過程,經由埃及→腓尼基→希臘的演變之後,最後在羅馬體上集大成,被西方世界廣泛運用到現在而風行於全世界。隨着活字印刷的產生,在原始羅馬體的基礎上越來越多的設計師努力創作優美,更易閱讀的字體,現在歐洲使用的字母文字,被稱為拉丁字母或羅馬字母,是世界上應用最廣泛的字母。英文字母一般分為襯線體(serif),無襯線體(sans serif)和其他字體。襯線字體,意思是在字的筆畫開始、結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。相反的無襯線體就沒有這些額外的裝飾,而且筆畫的粗細也差不多。現代襯線體出現在18世紀末,強調了粗細筆畫之間的強烈對比,加重了豎畫,而把襯線做的細長。大部分現代襯線體的可讀性不及舊體和過渡襯線體。

    詳細解析網頁中文字體設計總結

    襯線體又可分為傳統和現代形字體,上圖為傳統襯線體(左)和現代襯線體(右)

    傳統襯線體,看S這個字母最細部分,用紅色斜虛線標出可以看出它的較細部分始終保持傾斜狀態,也就是說筆畫的粗細是有變化的,看起來就比較傳統,這是一種基本字形。而現代襯線體,筆畫粗細始終保重一致的狀態,相對比較更加理性,機械,規範化的感覺。再來看底座的支架(我暫且把它叫做支架)傳統支架它的筆畫連接是弧線的,而現代的就是平直幾何形的,這也可以理解為感性與理性的一種對立呈現方式。

    詳細解析網頁中文字體設計總結

    無襯線體大致可以分為3類,上圖的依次順序為古典無襯線體,過渡無襯線體,現代無襯線體

    古典無襯線體和傳統宋體是一樣的,最突出的特點就是裝飾細節比較多,底部有支架(但是因為它是無襯線體,筆畫上不會出現明顯的弧度,用的形狀比較幾何,力量感一點)過渡無襯線字體是介於古典和現代之間的字形,最大的特點就是既有現代感理性簡練的感覺也不失感性略帶筆觸,纖細秀氣的感覺。可以看到上圖第二個中畫紅圈部分,它的轉角,停頓處是一樣的粗細分佈。現代無襯線字體的特點是筆畫之間粗細很均衡,是理性的象徵。

    在傳統的正文印刷中,普遍認為襯線體能帶來更佳的可讀性(相比無襯線體),尤其是在大段落的文章中,襯線增加了閱讀時對字母的視覺參照。而無襯線體往往被用在標題、較短的文字段落或者一些通俗讀物中。但是隨着現代生活和流行趨勢的變化,如今的人們越來越喜歡用無襯線體,因為他們看上去“更乾淨”。 在文字足夠大的情況下,無襯線字體也是同樣可讀的。而且因為無襯線字體通常有藝術性,因此在顯示器上顯示通常比較賞心悅目;而且無襯線字體種類比襯線字體多得多,因此選擇餘地也很大。

    除了有無襯線體之外,還有其他字體:比如一些比較捲曲,貼近自然的巴洛克風手寫體,還有一些為了迎合設計風格的變形字體

    詳細解析網頁中文字體設計總結

    從這些基本字形我們可以發現:文字在發展的過程中,也在不斷經歷着去繁為簡的過程。包豪斯學校的成立,影響了工業產品設計的思維模式,使人們在設計的過程中從以往崇尚自然,繁雜的工藝文化中分離出來,設計在慢慢萌芽,從工業產品到平面藝術,都有所體現。

    下面就來看看這些字形在現實生活中的應用:

    詳細解析網頁中文字體設計總結

    上圖中的英文字體是現代襯線體中的一種,“髮絲型襯線體”,它的特點是由細緻線構成的,看起來非常平整,粗細線條對比清晰,明確,具有現代感。

    詳細解析網頁中文字體設計總結

    上圖標題部分是傳統無襯線體的一種字形,畫面上體現的是一幅類似傳統工業製作的畫面,在字體的選用上為了迎合當時的氛圍需要,並且能突出主題,選用了粗襯線體,粗曠有力而且很古典。

    詳細解析網頁中文字體設計總結

    上圖標題用的是完全現代的無襯線體字形,版面是橫向設計,字體上就選用了比較修長的無襯線體黑體,視覺中心點同樣是在中心,和左邊的畫面有相呼應的細節設計,和字腔較小相呼應的字腔較大字形,比較易讀,但是視覺中心點也相對較散一些,人的視線落腳點會比較開闊。

    詳細解析網頁中文字體設計總結

    相對上面的字形,這份書籍裝幀設計因為它上面僅有文字,所以需要用文字去控制整個版面。在這裡,信息層級上最主要的信息選用了較粗的,胸線較大的字體,利用筆畫粗細對比去吸引到更多人的關注;兩個粗細很極端的字體放一起,用這種對比手法去突出該突出的,弱化該弱化的,但是又不會把空間撐的滿滿的。

    詳細解析網頁中文字體設計總結

    上圖這張邀請函上面採用捲曲的手寫體,讓人感覺非常的親近,活潑和愉悅。

    詳細解析網頁中文字體設計總結

    這是一張日本海報上的字體,中國古代的文字記載就喜歡採用豎排,從右到左進行排列,日本直到現在仍然採用,上圖的這種字體有點類似中文宋體中的瘦金書字體,保持它筆畫特徵的同時,又將它處理地更加圓滑,親切感自然感增加許多。

    詳細解析網頁中文字體設計總結

    這其實是一本李永銓的新書封面,因為他在書中分享自己的成長之途,講述個人經歷或時代背景如何影響他的品牌設計意念,所以封面上出現的應該是他做過的品牌包裝。為了迎合整體設計的氣質,書名標題沒有用力量感過重的粗線形黑體去表現,而是選擇了力量適中,看上去纖細適中的中黑;這裡也穿插出現了粗細對比的字體;吸引人注意力的同時也十分注重力量的節奏感,不會有強迫閱讀感的產生,豎排的設計顯得很傳統。

    好啦~我在這裡只是很淺顯地羅嗦了這麼多,希望能給大家一點小小的啟示!

    — —

    文章永久連結為: 詳細解析網頁中文字體設計總結