台灣有越來越多的新媒體網站,熱中把內文用字改為細黑體。這跟傳統的媒體網站一向偏好細明體非常不同。

理論上黑體內文字應該比細明體顯得更深、更重、更黑,但實際上不然,例如底下這個來自 UDN 鳴人堂的網頁截圖,黑體字比起一般細明體,顯得更灰、更淡、筆畫更難辨別(例如相對於本文使用的細明體而言):

這很奇怪對吧?難道他們的內文 CSS 特意調淡嗎?當然不是,我試著用高解析相機的近拍模式,放大螢幕像素實際的筆畫顯示情形,就發現了原因。

原因是黑體字在螢幕的顯示演算法,採用的是「反鋸齒」(anti-aliasing)技術,反鋸齒技術理論上可以消除字體邊緣的鋸齒,讓字體顯得清晰。這在蘋果手機使用的黑體上已經證明,也普遍受到歡迎。可是在桌機上,這個技術帶來的卻是反效果。上圖這個實際畫素的八倍放大圖就是證明。

由於桌機螢幕解析度普遍欠佳,黑體內文通常跟「單線體」字體沒甚麼差別,如果筆畫剛好在畫素格位上,那確實可以得到清晰的線條,如上圖台字下半的「口」,和灣字下半的「弓」。但如果筆畫不剛好在畫素格位上,那反鋸齒演算法發揮作用的結果,是把一個畫素的黑,拆開給兩個畫素變成灰。

延伸閱讀:<速成!一個月學會設計師的基礎技能:字型設計>

於是在放大圖上看,筆畫其實是模糊的。兩個畫素的灰,無論如何無法等同一個畫素的黑,這就是我們看使用黑體的網頁,為什麼筆畫顯得更灰、更淡、更難辨別的原因。

試比較一下同樣解析度下細明字體的放大圖,更可以看出差別。下圖是對 15pt 細明的八倍放大。在內文字的級數下,瀏覽器對細明體使用點陣化的顯示模式,因此我們會看到明確佔據畫素格位、非常難看的鋸齒。

但如果我們回到肉眼尺度,就會發現在 15pt 等級的大小之下,點陣字的鋸齒根本看不見,眼睛能看見的反而是邊緣銳利的筆畫:

事實上各家瀏覽器對細明體有特殊的優化,在某些常用的顯示級數上,會使用點陣字體顯示。筆畫反而比採用反鋸齒技術的字體更清晰。

所以如果你是因為蘋果系統使用黑體而趕潮流,讓你的網站內文採用黑體,要小心,你正在付出不利讀者閱讀的代價。

補充:如果用瀏覽器放大字體四倍以後翻拍畫素,黑體字筆畫才變得比較「像」印刷黑體該有的樣子:

所以差不多在 retina 螢幕上,黑體看起來才會夠黑。(不過在 retina 上細明表現也一樣黑。)

9/13 TO x Justfont 字型設計工作坊,邀請到台灣最頂尖的字型設計 Justfont 團隊來 TO 開設一天 6 小時的 Workshop,從理論出發,再到親自動手設計,你會發現原來字型設計一點也不難!小班制實作教學,名額有限,額滿即止哦!

tp_600x100

  • 延伸閱讀

BMW 設計師的第一堂課:請先學會設計完美的字型!

速成!一個月學會設計師的基礎技能:字型設計

Logo 設計的殺手級絕招:國際知名品牌商標的設計學

魔鬼藏在細節的細節裡!逼死果粉的 15 個蘋果設計巧思

成為設計大師的第一堂課:20 個你不該打破的設計法則

(本文經內容推進實驗室授權刊登,不得轉載;首圖來源: tenz1225, CC Licensed)