Apr.17.2014

速成!一個月學會設計師的基礎技能:字型設計

字型是一種視覺表達的方式。善用字型的獨特性,使文字除了本身的意涵之外,還加強了閱讀當下的情緒傳達。符合寓意的字型,不只是你看順眼就好,如何讓讀者接收到的感覺和你想要表達的一樣,才是高竿的學問!

仔細想想,生活中處處是字型相關的設計運用,舉凡商家招牌、廣告文宣、包裝、報章雜誌等,台灣一直努力朝向設計之都、培植文創產業邁進,但倘若連基礎關於「字的美感」都不足,還如何談設計呢?

隨著大眾與網頁、行動裝置的接觸更趨頻繁,廠商也積極開發各式各樣符合不同需求的字型,意味著視覺設計的選擇性更加多元。品牌網站的呈現,將會直接影響消費者對品牌的印象,因此,如何在各種平台上準確表達其預期營造的氣氛,顯得越來越重要。

-Cirtin Burton, Bigstock 平面設計師

想要進入文創或設計相關產業,將字型學列入履歷上的加分項目嗎?不妨利用一個月,沒錯,四個星期的時間就能讓你對這個領域有點 Sense,試試看不吃虧,在老闆眼中成為稍微特別一點的人吧!Let`s do it together!

bigstock-Block-letters-isolated-on-whit-17177627

  • Week 1:基礎入門篇

僅有一個月的時間,我們要更有效率,想快速進入狀況,必須對「字的剖析」有一定的見解,以及字型之間如何互相產生影響。首先,你必須知道一個「字(母)」可以被拆解成幾個部分,而各種字型是如何照著這個規則被分門別類。

字體和字型

什麼?他們有差別嗎?相信大多數人的認知中,將這兩者之間畫上等號。錯!字體 (typeface) 是所有同款式的字(母)集合,像是一個大家庭,以英文字母來說,26 個字母組成一個家庭,也就是一種字體。字型 (font) 則是每一個別文字共有的規則,像是長、寬與其特殊設計。

標楷體、新細明體就是兩種截然不同的字體,各有適合使用的情況。他們的差別很明顯,如果你要顯得專業點,請繼續看下去。

字體的風格 

字體最基本的區分有兩者:serif (襯線) 與 sans serif (無襯線)。先看看下面的附圖比較容易了解這部分的內容!serif 為代表的字體,在字母的線條上(通常是頭尾部)會有一些小裝飾,像是一條細線截斷筆劃的線條。而 sans serif 從翻譯上來看,就是少了這些細節的裝飾。

pic1typo

Serif (襯線)-有小截線。適合套用在標體和霸氣、威勢的感覺。

Sans serif (無襯線字體)-無截線。方便網頁的閱讀。

  • 字的結構

中文字有細長、方正的差別,英文的字母亦各有特色,每個字母都可以因而拆解成幾個小部分。

1. X-height:代表小寫字母「x」的高度。以此為基準,包含所有低於此長度的小寫字母。(排除 g, y, p, q 這類尾端較長的字母)

2. Baseline (基線):一條假想的基準線,幫助設計字母時皆符合一定的框架。

3. Ascender;超出「x」高度的字母。

4. Descender:超出基線的字母。

5. Counter:字母本身圈出來的封閉範圍。(例如 d, a, q 這類字母中間的圈圈

pictypo2

再深入一點:

激發心中的興趣了嗎?再用功一點會更厲害唷!

Web Typography 101 從簡單易懂的論述,了解字型的不同類型與字距的介紹

A Crash Course in Typography: The Basics of Type 解析字母的基礎知識,風格種類和預期效果

 

第一個星期,我們學會了解字的本身,但比起專業的字型設計師,一般人似乎不太需要知道得更深入,如何實際活用於生活才是重點。

  • Week 2:字體的結合與修飾

針對口頭報告、面試履歷等不同需求選擇適合的字型輕而易舉,如果你想證明自己對字型學的研究不同於一般市井小民,繼續完成接下來這個禮拜的進度吧!

字體的結合

以書面報告為例,講究一點的人會為大標題、附標題、內容等揀選不同的字體。然而,融合各種字體的報告,倘若失去和諧性與一致性,反而過於雜亂,也無法完整呈現心目中的感覺。因此以下有幾點需要特別注意:

1. Contrast(對比):不同字體間,必須有一定的辨識度,但又不能太過特別以致於影響對方。你可以試著從下圖中,辨別兩種字體的搭配,在尺寸、寬度、結構與顏色的不同下,哪一種看起來比較舒服,容易閱讀。

pictypo3

(附註:第一種字體搭配-ChunkFive 對於 DISCO 來說太大了

第二種-ChunkFive 與 Helvetica Neue Light 呈現出的感覺相較於前者好很多

第三種-DISCO 和 Helvetica Neue Light 搭配起來也不錯)

2. Hierarchy(層次):除了字體本身,亦能在視覺上透過階層的排列,強調標題或重點,提高易讀性。

pictypo4

字體的修飾

字體本身具有原本就設定好的結構,然而有時候,這些固有的設計不適用於每個人寄望的特定編排。你還是可以透過微調達到目的。

1. Leading:行距(適當的行距利於閱讀,為了抄筆記或批改作業等狀況也能調寬行距達到目的)

2. Kerning:特定字距(例如:kerning 中的 r, n 若沒有特別調整,看起來就會像 m,這時候微調的技巧就稱為 kerning)

3. Tracking:平均字距(同樣是調整字母間距,但 tracking 是針對整份文件,調整所有字母之間的間距)

再深入一點:

Typography Tutorial: Leading, Kerning, Tracking 字體修飾三要領進階篇

A Crash Course in Typography: Principles for Combining Typefaces 各種字體搭配下如何產生最好的對比效果

Five Simple Steps to Better Typography

字型基本知識 by JUSTFONT BLOG

  • Week 3:版面編排

就算只是一份純文字的文件,潛在的細膩編排依舊會影響讀者的感受。除了個人對於美的感知能力,還可以透過方法讓你的版面引人入勝。

方格-最好的方法是善有內建方格背景為參考線的軟體,藉由隱形的格線,版面編排的過程中將更扎實,同時利於空間一致性的比對和校準。大力推薦 InDesign,它是 Adobe 系列的排版祖師爺,專業的系統設計,讓使用者隨便拖曳、選取就能輕鬆製作像樣的版面!

pictypo5

再深入一點:

Make Use of Grids for Typographical Layouts 一步步教你如何善用格線排版

  •  Week 4:以 Hierarchy, Lettering 盡情展現創意

現在,對於字型學的技巧你已經有了更深一層的認識,試著在生活周遭運用上這些獨特又富有創意的設計吧!然而,字最廣泛的功用就是打印在紙上供人閱讀,那就不能錯過這周的學習,將教你如何運有視覺上的階層化,吸引讀者的關注。

1. Hierarchy(層次):首先,你必須知道讀者群是誰,考量他們的需求作為設計的出發點。舉例來說,你總不能將一份專業、尋求消費者信賴的品牌專案套用上虛華不實的字體吧!特別是使用中文國家,很多時候會遇到中英文夾雜的情況,這時如何運用先前的知識,搭配和諧得體的字體就在考驗功力了!

2. Lettering:目前中文尚未有標準的翻譯,簡單來說就是手畫出來的字體,而不像電腦化固定式的字體。如果你真的不滿意現有的字體,最好的方法就是 lettering,自己動手畫畫看吧!

再深入一點:

Creating Exciting and Unusual Visual Hierarchies

Understanding the Difference Between Type and Lettering

  • 你準備好了!

一個月的時間足夠你建立字型學的基礎常識了!但是,畢竟字型學的起源來自於西方文化,套用到中文,仍舊有許多基礎理論和概念需持續編修與建立,前面提到的觀念,應付開場白已經綽綽有餘,這門大學問,需要更多人投入鑽研,有點興趣的話,不妨將參考資料閱讀完畢,一定會收穫滿滿!

不可轉載
TechOrange 科技報橘
《TechOrange》,專門追蹤全球網路產業的科技網誌。提供網路創業者、行銷人員、媒體人員關於網路的資訊與知識是我們的任務;每天大概花吃顆橘子的時間來瀏覽就夠,吸收科技新知沒負擔。
《TechOrange》,專門追蹤全球網路產業的科技網誌。提供網路創業者、行銷人員、媒體人員關於網路的資訊與知識是我們的任務;每天大概花吃顆橘子的時間來瀏覽就夠,吸收科技新知沒負擔。

更多文章


READ MORE

更多文章

READ MORE

LOGIN

SIGN UP

FORGOT
PASSWORD

請輸入你的帳號或電子郵件位址。你將收到含有建立新密碼鏈結的電子郵件。