玻璃窗上的Trajan字體，攝於華山紙街咖啡

來一個懂字懂字的節奏

「厲害的設計師對字體絕對不馬虎，他們了解文字並不只是資訊的載體，在版面上也是視覺的元素。理解字型與版面編排，就等於掌握了視覺傳達的核心概念。」—— Justfont

大家可能都聽說過「網頁設計有95%都關乎於文字排版」的說法，其實不單限於網頁設計，甚至是路標、招牌、書籍、海報⋯⋯我們的生活無一處不被文字縈繞！文字的複雜度、精密度和它的重要性成正比，也難怪字體設計大師Matthew Carter會在他的演講上提到他視自己為「工業設計師」。

文字排版（typography）影響了畫面的情緒（mood）、調性（tone）、風格（style），換了一個字體，就可能從高端大氣到平價俗氣、讓人肅然起敬到一笑置之，但它影響的不僅僅是視覺上的心理層面，在特定時刻更會牽涉到人命！正因如此，選用字體時，更要考慮到這三個原則：可讀性（readability）、易辨性（legibility）、可視性（visibility），若是UI/UX設計，還要另外考量螢幕顯示的效果（display adequacy）。

＊三個原則不會像健達奇趣蛋一樣一次滿足，依據各種情境的需要，調整字體的性能，找到最適切的安排＊

本文將致力於推廣中文字型設計的justfont blog裡的文章做脈絡化的整理（就是懶人包啦XD）分為三大部分：基本概念、背後故事、實際應用。在開始之前先介紹容易混淆的詞彙，在閱讀上才能有更好的體驗～

• 字體（typeface）：有共同設計理念的文字集合
  （例：黑體在設計上的特徵為外型方正、筆畫粗細一致）
• 字型（font）：字體可以被實際使用的形式
  （例：思源黑體是Google和Adobe開發的免費字型）
• 字型家族（font family）：多套相同風格但不同粗細的字型
  （例：思源黑體共有六種不同粗細樣式，同屬一個字型家族）

一些容易混淆的名詞

以麵來做比喻大概是這樣吧

是時候來一個懂字懂字的節奏了！！！

一、基本概念

掌握這些基礎，細節成就設計

1. 保持距離之必要：Kerning（字間微調）
2. 說話的語氣：Tracking（文字間距）
3. 讓文字呼吸：Leading（行距、行高）

你一定看過，但不一定知道為什麼

1. 差一個字就不一樣：字型＆字體
2. 區隔得一團和氣：字型家族
3. 藏在小細節裡的重要知識：為什麼有些字型後面有(P)
4. 各有各的長處：內文字型＆展示字型
5. 文字的歷史課：明體＆宋體、宋體非宋
6. 時代洪流沖刷走靈魂：書法藝術＆印刷字型
7. 常見迷思大合輯：字型的都市傳說

二、背後故事

每個字體／字型的背後，都有一段（爆肝的）故事

1. 都是心血（血汗）結晶：字型是怎麼製作的
2. 字體始終取決於載體（上篇/下篇）
3. 因為刻書工具而產生質變的文字造型：明體／宋體
4. 容易引起注意和辨識的：黑體
5. 超大型開源東亞黑體字型：思源黑體
6. 跟豆腐有關的字型：思源宋體
7. 集各種爭議於一身的字型：新細明體
8. 書法家最討厭的字型：標楷體
9. 革命年代的字型：儷宋
10. 我都念Arial，但聽說要念Arial：Arial（上篇/下篇）

羅馬文明的產物—拉丁字母

1. 拉丁字體的歷史１：Humanist（人文主義字體）
2. 拉丁字體的歷史２：Old Style（舊風格字體）
3. 拉丁字體的歷史３：Transitional（過渡時期字體）
4. 拉丁字體的歷史４：Modern（現代樣式字體）

字體控的最佳睡前讀物

1. 《字型散步》（王志弘談《字型散步》書封設計）
2. 《字型之不思議》
3. 《歐文字體１：基礎知識與活用方法》
4. 《歐文字體２：經典字體與表現手法》

他們才是真正的「文字藝術師」

1. Matthew Carter（TED Talk：我與字體的一生）
2. Adrian Frutiger（和他的字型Frutiger）
3. 應永會（和他的字型汲古書體、浙江民間書刻體）
4. 王水河（和他的字體王水河圓體）
5. 小林章（和小林章字體散步、訪談上篇/下篇）

三、實際應用

八百多個雲端字型我要選哪個

1. Google fonts 的字體：serif 篇
2. Google fonts 的字體：sans-serif 篇
3. Google fonts 的字體：display 篇

應用上的眉眉角角

1. 就算不是設計師也請避免：歐文字型應用錯誤
2. 大眾字型學１：英文履歷表要用哪套字型
3. 大眾字型學２：怎麼製作美觀的文件版面
4. 大眾字型學３：Word 預設中英搭配有什麼問題
5. 大眾字型學４：理想的排版強調法（進階篇）
6. 英文UI字型大評比：視認性測試
7. 英文UI字型大評比：易讀性測試

感恩讚嘆佛心設計師

1. 可以免費商用的中文或漢字字型
2. 部分可以免費商用的漢字字型：free japanese fonts、font free

倉頡造字以後，現在換你了

1. 中文字型設計的第一課：框線
2. 中文字型設計的第二課：中宮
3. 中文字型設計的第三課：重心

BONUS

這些地方聚集著熱愛字體的人們，跟他們一起來感受字體的生命力吧！

Facebook社團

1. 字嗨
2. 設文計字

Facebook粉絲專頁

1. Eyes on Type
2. Jason Peng Studio
3. Type is Beautiful
4. 日星鑄字行
5. TypeMeet 字體聚
6. 字戀
7. 字體課

部落格

1. Justfont Blog
2. Type is Beautiful

彩蛋

這些小遊戲可以測試你對typography的敏銳度！

1. kerntype：字間微調
2. perfect paragraph：字體大小、行高、段落寬度
3. type connection：不同字體間的搭配

懶人包結束，有任何額外資源和連結都歡迎補充！

參考資料：
Typography can make or break your design
給設計初心者：字型基礎八篇
聽說你想多了解一些字型知識，所以我們想推薦幾個粉絲頁