有氣質的字距
· 閱讀時間約 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 預設值有點工程宅男味；現在改成比較鬆的設定，就有點中文散文書的文藝氣質（至少我自己感覺啦）。
你可以利用以下的互動小玩具，比較一下原廠預設值和現在的新設定，然後再自己拉拉看行距和字距，找找你覺得最舒服的組合。
台灣的早餐店蛋餅是一種很微妙的食物。你沒辦法跟外國人解釋它到底是 crêpe、omelette 還是 burrito，因為它都不是，它就是蛋餅（Danbing）。懂得吃蛋餅的人，絕對不會加醬油膏。
不過要小心，字距、行距這種事情，一旦開始注意就再也回不去了。以後看到每個網站都會想按 F12 打開開發者工具偷看別人把 line-height 和 letter-spacing 設成多少──然後覺得別人調得不好。
當然，你得要有自己的網站，才能有調整字距行距的自由啦！