2015年4月16日 星期四

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

  • Week 1:基礎入門篇
僅有一個月的時間,我們要更有效率,想快速進入狀況,必須對「字的剖析」有一定的見解,以及字型之間如何互相產生影響。首先,你必須知道一個「字(母)」可以被拆解成幾個部分,而各種字型是如何照著這個規則被分門別類。
字體和字型
什麼?他們有差別嗎?相信大多數人的認知中,將這兩者之間畫上等號。錯!字體 (typeface) 是所有同款式的字(母)集合,像是一個大家庭,以英文字母來說,26 個字母組成一個家庭,也就是一種字體。字型 (font) 則是每一個別文字共有的規則,像是長、寬與其特殊設計。
標楷體、新細明體就是兩種截然不同的字體,各有適合使用的情況。他們的差別很明顯,如果你要顯得專業點,請繼續看下去。
字體的風格 
字體最基本的區分有兩者:serif (襯線) 與 sans serif (無襯線)。先看看下面的附圖比較容易了解這部分的內容!serif 為代表的字體,在字母的線條上(通常是頭尾部)會有一些小裝飾,像是一條細線截斷筆劃的線條。而 sans serif 從翻譯上來看,就是少了這些細節的裝飾。
Serif (襯線)-有小截線。適合套用在標體和霸氣、威勢的感覺。
Sans serif (無襯線字體)-無截線。方便網頁的閱讀。
  • 字的結構
中文字有細長、方正的差別,英文的字母亦各有特色,每個字母都可以因而拆解成幾個小部分。
1. X-height:代表小寫字母「x」的高度。以此為基準,包含所有低於此長度的小寫字母。(排除 g, y, p, q 這類尾端較長的字母)
2. Baseline (基線):一條假想的基準線,幫助設計字母時皆符合一定的框架。
3. Ascender;超出「x」高度的字母。
4. Descender:超出基線的字母。
5. Counter:字母本身圈出來的封閉範圍。(例如 d, a, q 這類字母中間的圈圈
再深入一點:
激發心中的興趣了嗎?再用功一點會更厲害唷!
Web Typography 101 從簡單易懂的論述,了解字型的不同類型與字距的介紹
A Crash Course in Typography: The Basics of Type 解析字母的基礎知識,風格種類和預期效果

第一個星期,我們學會了解字的本身,但比起專業的字型設計師,一般人似乎不太需要知道得更深入,如何實際活用於生活才是重點。
  • Week 2:字體的結合與修飾
針對口頭報告、面試履歷等不同需求選擇適合的字型輕而易舉,如果你想證明自己對字型學的研究不同於一般市井小民,繼續完成接下來這個禮拜的進度吧!
字體的結合
以書面報告為例,講究一點的人會為大標題、附標題、內容等揀選不同的字體。然而,融合各種字體的報告,倘若失去和諧性與一致性,反而過於雜亂,也無法完整呈現心目中的感覺。因此以下有幾點需要特別注意:
1. Contrast(對比):不同字體間,必須有一定的辨識度,但又不能太過特別以致於影響對方。你可以試著從下圖中,辨別兩種字體的搭配,在尺寸、寬度、結構與顏色的不同下,哪一種看起來比較舒服,容易閱讀。
(附註:第一種字體搭配-ChunkFive 對於 DISCO 來說太大了
第二種-ChunkFive 與 Helvetica Neue Light 呈現出的感覺相較於前者好很多
第三種-DISCO 和 Helvetica Neue Light 搭配起來也不錯)
2. Hierarchy(層次):除了字體本身,亦能在視覺上透過階層的排列,強調標題或重點,提高易讀性。
字體的修飾
字體本身具有原本就設定好的結構,然而有時候,這些固有的設計不適用於每個人寄望的特定編排。你還是可以透過微調達到目的。
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 各種字體搭配下如何產生最好的對比效果
  • Week 3:版面編排
就算只是一份純文字的文件,潛在的細膩編排依舊會影響讀者的感受。除了個人對於美的感知能力,還可以透過方法讓你的版面引人入勝。
方格-最好的方法是善有內建方格背景為參考線的軟體,藉由隱形的格線,版面編排的過程中將更扎實,同時利於空間一致性的比對和校準。大力推薦 InDesign,它是 Adobe 系列的排版祖師爺,專業的系統設計,讓使用者隨便拖曳、選取就能輕鬆製作像樣的版面!
再深入一點:
Make Use of Grids for Typographical Layouts 一步步教你如何善用格線排版
  •  Week 4:以 Hierarchy, Lettering 盡情展現創意
現在,對於字型學的技巧你已經有了更深一層的認識,試著在生活周遭運用上這些獨特又富有創意的設計吧!然而,字最廣泛的功用就是打印在紙上供人閱讀,那就不能錯過這周的學習,將教你如何運有視覺上的階層化,吸引讀者的關注。
1. Hierarchy(層次):首先,你必須知道讀者群是誰,考量他們的需求作為設計的出發點。舉例來說,你總不能將一份專業、尋求消費者信賴的品牌專案套用上虛華不實的字體吧!特別是使用中文國家,很多時候會遇到中英文夾雜的情況,這時如何運用先前的知識,搭配和諧得體的字體就在考驗功力了!
2. Lettering:目前中文尚未有標準的翻譯,簡單來說就是手畫出來的字體,而不像電腦化固定式的字體。如果你真的不滿意現有的字體,最好的方法就是 lettering,自己動手畫畫看吧!
再深入一點:
  • 你準備好了!
一個月的時間足夠你建立字型學的基礎常識了!但是,畢竟字型學的起源來自於西方文化,套用到中文,仍舊有許多基礎理論和概念需持續編修與建立,前面提到的觀念,應付開場白已經綽綽有餘,這門大學問,需要更多人投入鑽研,有點興趣的話,不妨將參考資料閱讀完畢,一定會收穫滿滿!

沒有留言:

張貼留言