═══ 有氣質的字距 ═══

2026年4月4日 · 閱讀時間約 2 分鐘 ┊ 純文字版

突然意識到，字距和行距好影響網頁的氣質喔。

我前幾天在更新 NiceChord.com 的時候，總覺得那邊的文字跟 Wiwi.Blog 讀起來感覺不
太一樣。不是字型的問題喔，就是有一種說不上來的微妙差異。Wiwi.Blog 這邊讀起來就
是舒服那麼一點點。

後來去把 CSS 設定拉出來對照，才發現是行距差了 0.05 倍。NiceChord.com 那邊設定得
緊繃了一點點。

我橋來橋去，發現差一點點就差很多耶！行高只要差個 0.1 感覺就完全不同；字距更微妙
，調個 0.01em（大概是一根頭髮的寬度）氣質就會完全不一樣。最後，我把兩個網站的行
距和字距都調鬆了。

原本 Wiwi.Blog 這邊用的是 Docusaurus 的預設值：1.65 倍行高、0 字距。我現在調到
了 1.73 倍行高、0.018em 字距。

就這樣小小的改動，我覺得看起來差好多。原本比較擠的 Docusaurus 預設值有點工程宅
男味；現在改成比較鬆的設定，就有點中文散文書的文藝氣質（至少我自己感覺啦）。

你可以利用以下的互動小玩具，比較一下原廠預設值和現在的新設定，然後再自己拉拉看
行距和字距，找找你覺得最舒服的組合。

行高 line-height1.73[1.73                ]
字距 letter-spacing0.018em[0.018               ]
Docusaurus 原廠設定（1.65 / 0em）新設定（1.73 / 0.018em）
台灣的早餐店蛋餅是一種很微妙的食物。你沒辦法跟外國人解釋它到底是 crêpe、
omelette 還是 burrito，因為它都不是，它就是蛋餅（Danbing）。懂得吃蛋餅的人，絕
對不會加醬油膏。

不過要小心，字距、行距這種事情，一旦開始注意就再也回不去了。以後看到每個網站都
會想按 F12 打開開發者工具偷看別人把 line-height 和 letter-spacing 設成多少──然
後覺得別人調得不好。

當然，你得要有自己的網站，才能有調整字距行距的自由啦！