Typography 101：非設計師也能用的字體搭配規則
很多設計看起來不專業，並不是因為想法差，而是因為文字看起來沒有被認真管理。
標題太花，正文太小，按鈕又換了第三種字體。圖片、顏色、賣點都可能不錯，但 typography 會很早告訴使用者：這張圖是被「拼出來」的，不是被「設計出來」的。
Lovart is the AI design agent trusted by 10M+ creators. Try Lovart Free →
Related: 如何 Create a 品牌 Kit for an Ice Cream Shop | ## 雞尾酒吧品牌工具包：打造夜間視覺識別，讓你的酒吧成為熱門去處
Typography 不只是選字體。它決定使用者先看哪裡、相信什麼、如何從標題走到細節，再走到行動。如果你要做提案、產品頁、社群圖、菜單、客戶方案、活動海報或品牌素材，文字系統就是體驗的一部分。
好消息是，你不需要成為字體設計師。你只需要一個小決策系統：認識主要字體家族，按對比關係搭配，建立清楚文字層級，並在真實場景裡測試。Lovart 可以透過 Text Tool、Brand Kit、ChatCanvas 和 Text Edit 幫你執行，但判斷仍然從清楚的 brief 開始。
Typography 實際控制什麼
Typography 解決四個問題：
- 讀者第一眼應該看到什麼？
- 哪些資訊是重點、輔助或可選？
- 品牌感覺是嚴肅、溫暖、高級、有趣、技術感，還是編輯感？
- 這些文字在真實投放渠道裡能不能被快速讀懂？
最後一個問題最容易被忽略。桌面上的海報標題可能很好看，放到手機資訊流裡就失效。纖細的高級 serif 字體在 mockup 裡很美，疊在複雜產品圖上可能直接消失。英文裡能放下的一行文字，換成中文、日文或繁體中文後也可能完全改變節奏。排版不是最後的裝飾，而是可讀性決策。
如果你正在搭建完整視覺系統，typography 應該和顏色、Logo 使用、圖片風格放在一起管理。可以把這篇和 Building a Complete Brand Kit from Scratch、How to Create a Brand Style Guide with AI 一起看。
你真正需要認識的五類字體
不需要背字體史，先把字體放進五個桶裡。
| 字體家族 | 傳遞的感覺 | 適合用在 | 不適合用在 |
|---|---|---|---|
| Serif 襯線體 | 編輯感、傳統、可靠、高級 | 雜誌標題、奢侈品牌、報告、長閱讀 | 很小的 UI 標籤或複雜圖片上的文字 |
| Sans-serif 無襯線體 | 乾淨、現代、中性、直接 | 網站、App、簡報、正文、SaaS 頁面、說明文字 | 需要強烈歷史感或儀式感的場景，除非搭配得很謹慎 |
| Script 手寫體 | 個人化、手作感、優雅、慶祝感 | Logo、邀請函、點綴詞、精品品牌瞬間 | 段落、說明、法律文字、小按鈕 |
| Display 展示字體 | 強烈、戲劇化、有主題感 | 海報、Campaign 標題、活動圖、社群 hook | 正文、重複標籤、小字號資訊 |
| Monospace 等寬字體 | 技術感、精確、程式碼感、工具感 | 開發者品牌、規格、程式碼片段、復古系統風格 | 情緒化生活方式內容，除非是刻意反差 |
新手常問：「哪個字體好看？」更好的問題是：「這段文字要完成什麼任務？」
如果文字要快速讀懂，先用 sans-serif。如果想要編輯感或高級感，可以嘗試 serif 標題加中性的 sans-serif 正文。如果只是短點綴，script 或 display 可以用。如果是段落，就讓它安靜。
60 秒字體搭配決策表
打開字體選單之前，先看這張表。
| 如果設計需要顯得... | 可以嘗試 | 為什麼有效 |
|---|---|---|
| 高級、編輯感 | Serif 標題 + Sans-serif 正文 | Serif 給氣質，Sans-serif 保證可讀性 |
| 現代、實用 | 同一 Sans-serif 家族的標題和正文 | 用粗細、字號和間距建立層級，不增加噪音 |
| 友好但可信 | 圓潤 Sans-serif 標題 + 人文 Sans-serif 正文 | 字形親近，正文仍然清楚 |
| 強促銷感 | Display 標題 + 簡單 Sans-serif 正文 | Display 抓注意力，Sans-serif 負責解釋 |
| 技術、精確 | Sans-serif 標題 + Monospace 細節標籤 | 等寬字體增加系統感，但不會佔領整張設計 |
如果不確定，就選一個有性格的標題字體，再選一個安靜的正文字體。這個規則能解決大多數業餘排版問題。
字體搭配的三條規則
規則 1：要對比，不要打架
兩種字體應該因為分工不同而不同。高對比 serif 標題配乾淨 sans-serif 正文，通常有效，因為一個負責氣質，一個保護可讀性。
容易失敗的是「差一點點相似」：例如 Helvetica 配 Arial，或兩個能量接近的裝飾字體。普通讀者可能說不出哪裡錯，但會覺得不乾淨。
快速測試：瞇眼或縮小畫面。你還能分辨標題和正文嗎？如果可以，對比在工作。如果整個畫面變成一片灰，層級太弱。
規則 2：只讓一種性格當主角
每個設計都需要一個主聲部和一個輔助聲部。主字體可以有表達性，輔助字體應該安靜。
如果兩個字體都很大聲，版面會開始互相爭搶。展示字體標題、手寫體副標題、裝飾字體按鈕，單獨看可能都不錯，放在一起就是視覺噪音。選一個性格字體，其他文字負責讓內容更好讀。
這和顏色一樣：一個強調色能聚焦，五個強調色會互相競爭。如果你也在決定顏色系統，可以把 Color Theory Meets AI 作為配套參考。
規則 3：先用字號、字重和間距，不要急著加新字體
你不需要每個資訊層級都換一種字體。一個字體家族就能建立完整層級：
- 48px Bold 做主標題
- 24px Semi Bold 做區塊標題
- 16px Regular 做正文
- 13px Medium 做標籤
- 12px Regular 做說明文字
這已經是五個角色，但只用了一個字體家族。只有當設計真的需要另一種語氣時，再加入第二種字體。
可靠的字體搭配起點
這些不是永遠的規則，而是安全起點。
| 標題 | 正文 | 適合場景 | 注意事項 |
|---|---|---|---|
| Playfair Display | Inter | 編輯內容、奢侈品牌、創辦人故事 | Playfair 要足夠大，小字號會變弱 |
| Montserrat | Merriweather | 教育內容、SaaS 解釋頁、公益頁面 | Merriweather 在行動端不要太小 |
| Bebas Neue | Lato | 活動、健身、社群促銷 | Bebas 只適合短標題 |
| Lora | Roboto | 案例研究、白皮書、長內容 | 給 Lora 足夠行高 |
| Poppins | Source Sans 3 | App、創業公司 deck、友好型 B2B 頁面 | 需要字重對比，否則容易平 |
重點不是永遠複製這些組合，而是看懂模式：一種字體負責聲音，另一種負責清晰。
先建立 Typography Scale，再開始設計
Typography scale 是一小組文字角色。它能防止每次做新素材時都重新爭論字體。
| 文字角色 | 典型任務 | 起步建議 |
|---|---|---|
| Hero headline | 主承諾或 campaign hook | 最大字號、最強字重、最短行長 |
| Section title | 組織頁面或投影片結構 | 約為主標題的 40-60% |
| Body copy | 解釋賣點 | 行高舒適，行動端可讀 |
| Label | 標籤、說明、eyebrow text | 小但不能淡，必要時用 medium 字重 |
| CTA | 行動文字 | 動詞清楚，對比足夠，不用裝飾字體 |
在大多數行銷設計裡，行高和字體選擇一樣重要。正文需要呼吸感。標題可以緊一點，但不能擠到碰撞。標籤需要足夠對比，因為小字很快會消失。
如何在 Lovart 裡減少手動試錯
Lovart 最適合把 typography 當作 brief 的一部分，而不是最後補救。
先在 ChatCanvas 上把設計目標和文字角色放在同一個上下文裡。你可以參考 ChatCanvas Complete Operation Guide，因為標題、圖片、版式和渠道備註在同一畫布上時，排版判斷會更穩定。
然後使用 Text Tool 工作流：
- 選擇 Text tool，把關鍵文字放到畫布上。
- 選擇 headline、subhead 或 body 等文字樣式。
- 按角色調整字體、字號、字重和對齊方式。
- 把文字與形狀、圖片、網格結合，確保版面能快速讀懂。
- 使用 AI typography enhancement 測試字體搭配、間距、行高和容器適配。
- 使用 Text Edit 做自然語言修改，例如「把標題放大一點」「置中標籤」「換成現代無襯線風格」。
如果是品牌工作，把 typography 規則寫進 Brand Kit 或專案第一條 brief：
標題：自信的幾何無襯線。正文：中性、可讀的無襯線。標籤：空間緊張時使用 medium weight uppercase。除 campaign 點綴外，避免手寫體。
這條短規則會給 Lovart 一個可執行的設計邊界，也讓團隊評審 typography 時不再只憑感覺爭論。
Typography QA Checklist
匯出前檢查：
- 標題能否在三秒內被理解？
- 正文在行動端是否仍然清楚？
- 是否不超過兩個字體家族？
- 是否有一個字體明確承擔主聲部？
- CTA 是否是頁面裡最清楚的文字之一？
- 行長是否舒適，而不是橫跨整個畫布？
- 標籤和說明文字壓縮後是否還能讀？
- 去掉圖片後，字體氣質是否仍符合品牌？
如果失敗，不要重做整張圖。一次只修一個變數：字號、字重、字體家族、間距、對比或斷行。
常見 Typography 錯誤
錯誤 1：還沒確定資訊，就先選字體
字體不是 mood board，它是溝通工具。先判斷資訊需要信任、速度、溫暖、精確還是戲劇感，再選字體。
錯誤 2：用裝飾字體承載真實閱讀
Script 和 display 可以很漂亮，也很累眼。把它們留給短而強的瞬間，不要用在段落或產品細節上。
錯誤 3：讓所有資訊都很重要
如果標題、副標題、優惠、價格、免責聲明和 CTA 都在搶注意力，最後沒有任何資訊真正突出。Typography 應該給資訊排序。
錯誤 4：忘記本地化之後的版式
英文排版常依賴短詞和緊湊斷行。中文、日文、繁體中文的節奏、標點密度和行長行為都不同。好的多語言設計應該在本地化後測試版式，而不是只測試英文。
在 Lovart 裡試一次
拿一張 typography 較弱的舊設計，只重做文字系統：一個標題字體、一個正文字體、一套 scale、一個 CTA 樣式。然後在 ChatCanvas 用同一條 brief try Lovart，對比哪個版本在行動端更容易閱讀。
FAQ
設計裡的 typography 是什麼？
Typography 是選擇、調整和組織文字的系統，讓讀者能快速理解資訊。它包括字體選擇、層級、行高、字距、對齊和可讀性。
新手最安全的字體搭配是什麼？
使用一個無襯線字體家族，透過不同字重建立層級；或用 serif 標題搭配中性 sans-serif 正文。前者最穩，後者更有個性。
一張設計裡應該用幾種字體？
一到兩個字體家族最安全。第三種字體只應該作為很小的點綴，例如 Logo 字標或短裝飾詞。
Lovart 可以幫助選擇字體搭配嗎？
可以。Lovart 的 Text Tool 和 AI typography enhancement 可以根據設計風格建議字體搭配、間距、行高和字號調整，你仍然可以手動覆蓋結果。
在 Lovart 裡放置文字後還能編輯嗎？
可以。Lovart Text Tool 支援編輯已放置的文字，Text Edit 也可以在保留周圍設計意圖的基礎上做 AI 輔助修改。
發布含文字的設計前應該檢查什麼？
檢查行動端可讀性、對比度、斷行、CTA 清晰度、品牌匹配，以及小標籤在匯出或壓縮後是否仍然可讀。
如何搭配 serif 和 sans-serif，才不會讓設計顯得隨機？
給每種字體明確分工。serif 用作標題或編輯感點綴，sans-serif 用作正文和介面文字，同時保持間距、顏色和對齊一致。
標題和正文應該使用多大的字號？
先建立明顯層級：大標題、小一號副標題、可讀正文和緊湊標籤。一定要在真實尺寸裡測試，而不是只看桌面 mockup。
什麼是字體層級？
字體層級是透過字號、字重、間距、顏色和位置建立的視覺順序。它告訴讀者先讀什麼、接著掃哪裡，以及最後採取什麼行動。
行銷設計裡應該使用 script 或 display 字體嗎？
可以，但要克制。Script 和 display 字體適合短點綴、活動名稱或裝飾性瞬間，不適合承載長正文或重要說明。
如何檢查一個 typography 系統在行動端是否有效？
用行動端尺寸預覽，在正常觀看距離閱讀，檢查斷行，並確認按鈕、標籤和法律說明在匯出後仍然清晰。
把設計翻譯成其他語言時應該怎樣處理 typography？
預期行長、節奏和字體支援都會變化。每個語言版本都要重新檢查層級、間距、換行和字形覆蓋，而不是強行套入英文版版面。
