認識字體的分類與用途
前幾天我在設計新部落格外觀的時候，突然覺得字體這個東西好像從來就沒試過新的。一直以來我選字都是 Arial、Inter、Roboto 這些，會選他們不外乎就是 好看，而且他們經常被當作預設字體。
打開 Figma 的字型選單，發現真的是超級無敵多選項，完全不知道該如何選擇。所以我就跟 AI 聊聊字型這個話題，聊下去才發現原來字型也是有很多種分類，並且這些分類都是為了特定的功能、場景去設計的。
在深入了解字型之後，我發現我對字型開始有了看法。能夠了解 Inter、Roboto 為什麼常被用於預設字體，也能夠感受到「標楷體」帶來的美感。
這篇文章就先來筆記一下這幾天吸收到的內容，希望對你也有所幫助 ~
中文字體分類
我們先來看中文字體，中文基本字體分別是明體(宋體)、黑體、楷體。
明體（宋體）
明體的「橫細直粗」風格來自明代「匠體字」，而得名。關於到底叫做宋體還是明體，基本可以視為同一個東西，只是稱呼不同。有興趣可以參考 justfont 的 「But 專欄｜明體？宋體？傻傻分不清楚」一文。
特色：
- 橫筆細、豎筆粗，有明顯對比
- 造型方正、重心穩固，能夠有效維持穩定的閱讀
- 相當於西文的襯線體
適用場合： 書籍內文、報章雜誌、正式文件
黑體
黑體最先由日本發明，最早可見於明治十九年的官報小標題。在日本稱為「ゴシック」(Gothic)。
特色：
- 橫筆粗，豎筆也粗，橫筆較豎筆細，只為取得視覺粗度平衡
- 筆畫粗細均勻，沒有裝飾
- 相當於西文的無襯線體
適用場合： 螢幕顯示、標題、現代設計
楷體
楷體（楷書、正楷），由隸書漸漸演化而成的正規字體，模仿楷書書法。
特色：
- 保持手寫書法的特徵
- 講究文字書寫力量、節奏、立體結構
- 相當於西文的 Script 類型
適用場合： 詩詞、書法作品、需要文化感的設計
西文字體的基礎分類
Serif（襯線體）
襯線體在字母筆畫末端有小裝飾線（serifs），這些小線條看起來像是筆畫的延伸。
特色：
- 筆畫末端有裝飾性的小線條
- 傳統印刷用字，易讀性佳
- 給人正式、傳統、可信任的感覺
適用場合： 書籍內文、正式文件、新聞報紙
Sans-serif（無襯線體）
Sans-serif 來自法文，「sans」意思是「沒有」，「Sans-serif」指的是沒有襯線裝飾的字體。
特色：
- 筆畫乾淨簡潔，沒有裝飾線
- 現代感強，在螢幕上顯示效果好
- 給人現代、簡潔、專業的感覺
適用場合： 網頁內容、使用者介面、現代設計
Script（手寫體）
Script 字體模仿手寫或書法的字型，通常字母間有連接。
特色：
- 字母間通常有連接，具有流動感
- 有手寫的個人特質
- 給人優雅、個性化的感覺
適用場合： 邀請函、品牌標誌、裝飾性標題
Display（展示體）
專為大字號設計的裝飾性字型，強調視覺衝擊力。
特色：
- 設計誇張，具有強烈視覺效果
- 不適合長文閱讀
- 給人印象深刻、引人注目的感覺
適用場合： 大標題、海報、廣告
Monospace（等寬體）
每個字符寬度相同的字體，特別適合用於寫 Code！我個人超愛 JetBrains Mono 和 Fira Code，它們不只等寬，還有連字功能（ligatures），像是 -> 會自動變成箭頭符號，看起來特舒服 (▰˘◡˘▰)
特色：
- 每個字元佔用相同寬度，讓程式碼對齊更容易
- 通常有專門為程式設計優化的功能
- 給人技術性、精確的感覺
適用場合： 程式碼、終端機、表格、技術文件
更細緻的西文分類
襯線體和無襯線體還可以更細的分類：
襯線體的子分類
Old Style（古典體）
- 傳統襯線體，對比度較低
Transitional（過渡體）
- 介於古典體和現代體之間
Modern（現代體）
- 高對比度的襯線體
Slab Serif（粗襯線體）
- 襯線較粗且方正
無襯線體的子分類
Grotesque（怪誕體）
- 早期的無襯線體，被稱為「grotesque」是因為當時人們認為它們拒絕了更「優雅」的襯線設計
Neo-Grotesque（新怪誕體）
- 設計得比早期版本更易讀，通常有更簡潔的設計
Humanist Sans（人文無襯線體）
- 帶有手寫特質的無襯線體
Geometric Sans（幾何無襯線體）
- 基於幾何形狀設計
功能性分類
除了風格分類，我們也可以從用途來分類字體：
Text Type（內文字型）
- 專為長文閱讀設計
- 注重易讀性和舒適度
- 通常筆畫不會太粗或太細
Headline Type（標題字型）
- 用於標題和短文
- 強調視覺效果
- 可以有較誇張的設計
Caption Type（說明文字型）
- 用於小字號的說明文字
- 在小尺寸下仍保持清晰
- 通常比內文字型更粗一些
實際應用建議
網站設計的實際例子
你現在看到的 WEBCRAFT 網站，使用的字體順序是（ ui-sans-serif, system-ui, sans-serif）讓不同系統的使用者都能看到他們最熟悉的無襯字體。另外，Apple 的官網大量使用 SF Pro（他們自己設計的字體），給人很乾淨現代的感覺。
- 內文：選擇 Sans-serif 或細體黑體，在螢幕上易讀
- 標題：可以選擇較粗的黑體或 Display 字體
- 中英混排：確保中英文字體在視覺重量上平衡
印刷品
- 書籍內文：明體或 Serif 字體，長時間閱讀較舒適
- 雜誌標題：可以選擇較有特色的 Display 字體
- 正式文件：選擇傳統、可信任感的字體
品牌設計
- 科技公司：Sans-serif 或黑體，給人現代專業感
- 傳統行業：Serif 或明體，給人穩重可靠感
- 創意產業：可以選擇較有個性的 Script 或特殊字體
我的字體選擇經驗
經過這次研究後，下次網站改版我應該會使用 LINE Seed 作為主要字體。為什麼選它呢？
LINE Seed 的優勢：
- 完全免費可商用：採用 SIL Open Font License，可以放心用於商業專案
- 現代幾何設計：它是幾何無襯線體，保持了 LINE 品牌的圓角設計語言，看起來既現代又親切
- 優秀的中英混排：由 LINE 攜手華康字型合作打造，中英文搭配效果特別好
- 多種字重：提供 Thin、Regular、Bold、Extra Bold 四種字重，靈活度很高
- 高辨識度：官方強調要讓文字「看起來舒服、讀起來親切」，確實在閱讀體驗上很棒
- 跨平台一致性：使用 web font 載入 LINE Seed，我可以確保 Windows、Mac、iOS、Android 的使用者看到的字體都完全一樣，不會有系統預設字體的差異問題
唯一要注意的是，LINE Seed 的拉丁字符集比較基礎，如果需要特殊符號或重音符號可能會有限制，但對於繁體中文網站來說已經非常夠用了。
結語
寫完這篇文章，我覺得字體選擇雖然看起來很多，但其實不用想得太難。我現在選字體時會先想想這個設計想要給人什麼感覺，然後從對應的分類去找 ~ 好像專業度有提升 🤣
最近也開始會注意身邊的設計，看看人家是怎麼選用字型的，感覺多了一個觀察世界的角度 ~ 有的時候真的就是這樣，對一個東西有深入一些認知的時候，好奇心跟感受度就會上來！
希望我的筆記對你有幫助，如果你有什麼字體推薦或使用心得，也歡迎寫信跟我聊聊！