前端設計實驗室 01｜換一套英文字型，畫面個性差多少？
前端設計實驗室 · 技巧篇 01
同一段文案，換一套字型就像換了一種說話方式。襯線體比較優雅，圓體甜美，手寫體自然，粗黑窄體則顯得帥氣。與其逐一看靜態範例，不如直接在同一張卡片上比較。
下面的版型、顏色和內容都不會改變。先切換「字型風格」觀察畫面，再切換 Vanilla、Vue 3、React，看看三種寫法如何控制同一個結果。右側程式碼會跟著選項同步更新。
頁面本身由 Vanilla JavaScript 執行；Vue 3 與 React 頁籤顯示的是相同互動的核心寫法。
PREVIEW
Little
Happy Things
一起做甜點、畫小卡，收集週末裡讓人開心的小事。
08.23 SAT
14:00–16:30
JOIN THE DAY
font-demo.js
我從切換中看到什麼？
甜美風不只是換成圓體，還要讓標題有足夠的字重，輪廓才會像圖形一樣飽滿。優雅風反而需要降低字重，保留襯線體的粗細變化。自然風依靠手寫字的不規則感；帥氣風則利用窄字、大寫和字距建立節奏。
四種版本都只替換 CSS 變數，卡片本身不需要複製。Vanilla、Vue 3 和 React 的差別，也只是如何保存 mood 這個狀態；真正決定視覺性格的仍然是 CSS。
三種程式碼有什麼差別？
| 寫法 | 保存狀態 | 更新畫面 |
|---|---|---|
| Vanilla | 一般變數 | 監聽按鈕並更新 dataset |
| Vue 3 | ref |
透過資料綁定自動更新 |
| React | useState |
更新 state 後重新渲染元件 |
三種寫法都只保存目前的 mood，視覺樣式仍由同一組 CSS 變數控制。
結語
這次最值得記住的不是某一套字型名稱，而是：先決定文字要用什麼語氣說話，再選擇字型、字重與字距。標題負責表現性格，長篇內文則繼續以清楚好讀為優先。
參考資料
本文概念整理自 ingectar-e《最強排版設計：32個版面關鍵技巧，社群小編、斜槓設計，自學者神速升級！》P110，黃薇嬪譯，積木文化，2023。城邦讀書花園書籍資料
系列導覽：前端設計實驗室 · 下一篇：如何把不同顏色統一成柔和色調？