亞馬遜上沒有的 CSS 文字排版技巧-1:提高網頁易讀性

亞馬遜上沒有的 CSS 文字排版技巧-1:提高網頁易讀性

「Good legibility and readability of texts ensure that information is transmitted to users efficiently and quickly.」—— (Kuzu & Ceylan, 2010)

良好的易辨、易讀性,能有效且迅速地將資訊傳遞給使用者。在現在 Web 設盛行的時代,只要是網頁前端(還有像是 Electron...等框架產生的應用)幾乎都仰賴 CSS 進行樣式設定。今天介紹幾個 CSS 語法來提升網頁文字排版的易讀與易辨性。

CSS

CSS(Cascading Style Sheets,層疊樣式表)是用來描述 HTML 或 XML 文件的視覺樣式,包括字體、顏色、排版與動畫等。

CSS 標準由 W3C 維護。每一版的 CSS 都會定義新功能,並逐步被瀏覽器實作。這些要感謝熱心的開發者以及中文排版需求小組的積極提出不足之處,才能一步步邁向更棒的標準、技術。

行高:line-height

最後的疼愛是手放開;優秀的排版是適當的空間。有時預設字體的行高在密集文本顯示的情況下,略顯壅擠,長篇閱讀容易造成視覺疲勞。適當增高行高可減緩此狀況。

設定方式 說明
數字(無單位) 比例,會乘上字體大小。推薦 1.4 ~ 1.8
長度單位 像素、em,例如 24px1.5em
百分比 150%,代表字體大小的 1.5 倍
預設與增加行高後對比圖

微調字距就是在講究:letter-spacing

有些字型預設字距太緊湊,會影響閱讀舒適度,尤其是中文。這時候,letter-spacing 是你的好朋友。可有效改善中英文混排時過於擁擠的問題,還能營造一點「呼吸感」,反之,想要營造「緊湊感」也能將間距收緊。

預設間距與增加後對比圖

文字對切齊:text-align

text-align 是用來設定行內元素的水平對齊方式,常用於段落文字、標題等區塊的排版。當設定為 justify 時,會讓每一行文字兩端對齊,藉由調整字距讓左右邊緣對齊,看起來更整齊。

預設靠左,右側可能出現許多空白
透過設定 text-align:justify;即可做到保持左側對齊,但右側切齊
參數值 說明
left 靠左對齊(預設值,文字從左邊開始)
right 靠右對齊,適用於 RTL 語言或特殊排版需求
center 置中對齊
justify **左右對齊**,會調整字距讓段落左右邊緣齊平
start 根據語言方向決定起始對齊(左或右)
end 根據語言方向決定結尾對齊

強迫症救星:text-autospace

專業排版中,在中西文之間,大多都會加上空格,而該屬性能夠自動在不同文種空格,過往需要手動加入空格,但未來可以直接透過 CSS 設定。為甚麼說未來呢?截至 2025.07 該屬性尚未正式支援各大瀏覽器。

中西文之間空格範例

不過目前已經確定在 8 月,Chrome 將支援,屆時再向大家更新(挖坑),敬啟期待。

族繁不及備載

有時寫在寫前端時,愈發覺得 CSS 是個玄學。實在太多屬性可以玩了。如果大家想了解更多相關知識,建議可以到 W3schools了解完整資訊。

另外推薦 CanIUse,可以查看瀏覽器是否支援該語法,避免自己寫得很開心,到用戶手中一團糟,特別式鑲嵌式瀏覽器、框架...等。

相關連結

W3schools
CanIUse