為什麼看起來很擠？字體、字級與留白

先從一個生活例子開始

同一段話，為什麼看起來不一樣？

想像你要把便條貼在冰箱上。如果每張紙擠在一起、每句都一樣大，你需要更久才能找到重點。網頁也是：內容沒變，字和空間的安排會影響閱讀。

這篇使用虛構的「小島設計」作品卡。先保持內容相同，一次改一個設定，再固定一版比較。

01 · 先動手看看

先試著改「行高」，看每一行之間如何改變。按下「固定目前作對照」後再調整，兩邊就能比較。選「顯示空間色帶」，觀察卡片內外的距離。

先改一項，觀察同一份內容的差別。

這些數值是練習起點，不是所有網站的標準答案。字體依裝置提供的字型而異；可能因缺字而使用備援字型。固定對照僅留在本頁，重整後還原。

02 · 字體與層級

字體是字的外形；無襯線常見於清楚俐落的介面，襯線字筆畫有較明顯的粗細與收筆變化。感覺仍取決於實際字型、語言和使用方式，並非一種一定比較好。

字級是字的大小。標題、內文、註解有不同任務，像展覽裡的展名、說明與作品標籤：不必每句都一樣大，也不必把每句都放大。

字重是字的粗細。加粗可以幫忙標記重點，但整頁都很粗時，就不容易看出哪句最重要。中文與英文要一起檢查，不能只看英文字範例就推斷中文效果。

字級小不一定精緻。先確認實際讀者能看清，再決定視覺氣質；縮小文字不是解決擁擠的唯一方法。

03 · 文字也需要呼吸

行高像筆記本每條橫線之間的距離。太緊容易找不到下一行；太鬆時，同一段文字可能看起來像分開的句子。

閱讀寬度像一排座位有多長。太寬時，眼睛換到下一行可能比較費力；太窄則會頻繁換行。實際要看字級、語言和內容，不存在一個適用所有情況的寬度。

內距（padding）是卡片內容到邊框的空間，像相框與照片之間的卡紙。間距（gap）是卡片與卡片之間的空間，像兩個相框之間的距離。切換面板色帶即可區分：紫色在卡片裡，黃色在卡片外。

留白不一定是白色，也不是空著浪費；它讓相關的東西靠近、不相關的東西分開。手機上也要讓文字自然換行，不能只把整張卡縮小。

04 · 帶回自己的網站

我的文字與留白規格（可自行修改）

這是可編輯的需求草稿，不會送給 AI 或永久儲存；重新整理後恢復原文。

找一位沒看過你作品的人，問他第一眼看到什麼、是否容易讀完。比起追求某個固定數字，更有助於你判斷。