英文UI字型大評比:視認性測試

LOOKING FOR GREAT UI FONTS?

如果我們說字體視覺設計給人的第一印象,也不是過於誇張的說法。文字不只直接告訴讀者意義,字體的形象會給讀者視覺聯想,告訴使用者這個設計品的性格是什麼樣子的。

但是,說到 UI 設計,要取捨的事情就更多了,不只是有沒有個性而已。

螢幕是使用者與軟硬體互動的介面。在這個時候,使用者仰賴清楚的訊息指引來完成他們想做的事;如果沒有清楚的指引,只會讓他們洩氣。Typography最重要的天職之一,就是提供清楚的資訊給讀者。這不管在螢幕上或紙本上,都是一樣的。

但因為螢幕顯示方式的不同,typography必須要適應媒介上的差異,來達到清楚的資訊傳達。在這個時候,衡量 UI 字體的好壞就必須從字體的「性能」著手。

那麼,性能是什麼意思呢?

字體的性能:視認性legibility)與易讀性readability

老朋友都會知道justfont blog一直在講這兩個詞彙,但都說得比較複雜,所以這次我們決定要用非常簡單的方式來講:

視認性legibility)-- 能不能區分清楚長得很像的字

有些字看起來真像,例如數字1,小寫i、大寫i、小寫L,要怎麼樣設計才能凸顯它們的區別,讓使用者不致於誤判?

左邊是信黑體的英數,1, 小寫i, 大寫i與小寫L外型設計都有差別。但右邊Helvetica的大寫i與小寫L長得差不多,視認性就不怎麼好了。

易讀性readability -- 讀起來有沒有舒服

從人體工學來看,眼睛讀到好讀的字體時,視覺方向非常一致、平順,在英文來說,還會要衡量有沒有舒適的「韻律感」,讓眼睛舒服得忘記字體的存在,讓閱讀時的干擾降到最低。

英文:x-height 高一點比較適合小螢幕

這張是字戀粉絲團曾經展示過的英文字母部件名稱。我們可以看到x-height取的就是該字體小寫X的高度。我們知道英文字母的垂直長度越長,對眼睛是越顯眼的,Condensed字體就是一個極端的例子。而在小螢幕上,雖然閱讀距離相對近,但每個字又相對更小。這個時候,將每個字母的x-height調高,能有效幫助眼睛認為這個字是比較明顯的。在各大UI字體中,Droid家族有相當出名的高x-height

各系統大廠UI使用什麼字體

目前各系統的的英文UI字體表列如下:

Windows: Segoe UI

Segoe字體家族第一次亮相是在Windows vista,然後更進一步被用在Windows 7,也沿用到現在的Windows 8。Segoe UI有些小爭議是它跟Frutiger太像了,也有人認為Segoe長得跟蘋果標準字Myriad pro太像了,不會是在抄蘋果吧?

Mac OS X : Lucida Grande

OS X使用的UI英文字體Lucida Grande。這套字體是基於Lucida SansLucida Sans Unicode所製作的,但Lucida Grande小字螢幕顯示方面經過特別優化。有趣的是,Lucida Grande沒有做斜體版。

Linux: Ubuntu

這套字體是知名字體設計公司Dalton MaagLinux特別設計的,在2010年公開亮相後得到了非常大的關注,不僅是因為Linux,也是因為這個字體可以在Google Web fonts上面免費使用。

iOS: Helvetica Neue

雖然 Helvetica Neue在1980年代就有了,但卻到2007年第一代iphone之後才被正式採用成為UI字型

Android: Droid Sans

Droid sans 使用在Android平台上。這是一款專門為小螢幕設計的英文字體。而Droid是一個字體家族,有serif,也有mono space,外貌有了區別,但又風格相近,都很適合螢幕,在相互搭配上非常方便。

UI用字大評比--項目A:長得很像的字母能立刻區別嗎

以上的UI用字到底有什麼優缺點呢?

老實說,當字大到一種程度,例如標題用字,這個問題就還沒有那麼急迫。

手機螢幕上按鈕、說明,用字偏小,通常只有12pt左右,算是相當小的字。另外,螢幕解析度也是很大的問題。雖然iPhone 4S 螢幕解析度高達326 ppi,字體渲染效果很優良,跟印的幾乎一樣,但是目前視網膜螢幕畢竟還是少數裝置才有,在這種時候我們就只能要求文字本身的設計了--個別字母的形狀必須清晰,而且易於區別。

最好的情況是,使用者眼睛一掃就能知道指示或說明的內容。如果還要看半天才能懂,那麼就會讓使用者產生挫折了。

以下這張圖就說明了字級大小對文字視認性的影響:

Illiterate這個字包含一個常見的問題:怎麼區別大寫 i 與小寫 L --尤其是在字級非常小的時候,如果不特別注意,會造成閱讀上的困難。

其實觀察以上各廠字體如何解決問題還滿有趣的。 Segoe UI Droid Sans 的解決方案是把大寫 i 加上了「襯線」。而 Ubuntu 則是將小寫 L 加上了「尾巴」。

但是 Lucida GrandeHelvetica Neue 在視認性表現並不好,尤其是後者。

(天啊,居然都是最講究使用者經驗的水果牌的用字!)

Lucida Grande至少小寫 i 比大寫 i 還高,但這在小字級時就看不太出來了;而表現最慘的Helvetica Neue,在這兩個字的寫法上則是一點區隔也沒有。

或許研究這種微小的區隔看起來非常偏執,但是當人眼掃過介面時(如下拉式選單的小字),這些相近字母的區別就變得非常的重要。好的區別讓使用者可以很輕易的掃過介面。Illiterate這個字在小字級的Helvetica Neue顯示時,會讓使用者的思考稍微停頓一下,因為這個字的印象並不是腦海中所認知的那樣。如果只是一個單字這樣也就算了,但要是長篇文章內多出現幾個類似的單字,就會讓閱讀非常困難,也容易讓人洩氣。

只測一個字太片面,那我們再多測試一個:anagogy

這裡我們看的就是a跟o這種形狀相近字母的區別,還有與g,y並置時的區別

還好,以上五款字母都通過了a/o區別的考驗。其實許多人愛用的century gothic在這個測試中是肯定失敗的,因為兩個字幾乎長得一模一樣。這也就是為何這種幾何感很重的字體會好看而不好讀的原因。

另外一個需要考量的點就是,有「長尾巴」的字母,與其他形似字母並置時能否輕易區隔,例如 g, y, j這些字母。

可以注意到Lucida Grande把y的尾巴切得很乾淨,幾乎是垂直的,這是為了避免y下面彎曲的descender與前方字母相碰,導致分辨不出誰是誰的情況;而Driod Sans將g寫成雙層的,也有效避免了上半部圓形的g在小字時與其它圓形字母搞混,例如分不出g與o的差別。

看看Helvetica Neue,每個字母的特色都是偏圓的。形狀固然是這個字體最受歡迎的所在之一,但是在螢幕上字體較小的時候,要分辨每個小字的差異本來就比較難,這個時候,小寫的o與小寫的g就不容易分辨了,尤其Helvetica採用的寫法又是單層的,形狀又圓,在小字時容易與o搞混。

這永遠都是Helvetica家族的問題。作為幾何感比較重的無襯線體,它原本的設計目的就是比較大的展示用途,例如用於看板或海報的主題字,這一點Helvetica非常成功;但在手機螢幕上的小字,就有點像是硬把方塊塞進水管那樣,用錯了地方。

Segoe UI面臨的問題也差不多。Lucida GrandeUbuntu比較有人文手寫感,所以在小字時閱讀起來比較順暢,特別是Ubuntu在小寫 g 上設計的 descender 角度,留下比較大的字腔,比較容易與其它形近字產生區別,如下圖所示。至於Droid Sans則利用了雙層的g,造型比起其它偏圓形字母更加突出,讓視認性提高,創造更乾淨的閱讀體驗。

延伸閱讀:

發表您的想法

comments

  • 樵_

    您好,title好漂亮,是否能請教您標題的”英文UI字型大評比”是什麼中文字型呢??謝謝您

    • 樵_

      是”浙江民間書刻體”嗎?

  • Aelous

    作者自己的猜測認為Segoe UI該不會是超蘋果的? 這樣不確定、帶有猜測的敘述,貴站作為專業的字體設計公司/供應商,似乎有欠妥當,而且也離題。

    • Aelous

      錯字更正:*抄

    • 原文為「Segoe UI有些小爭議是它跟Frutiger太像了,也有人認為Segoe長得跟蘋果標準字 Myriad pro 太像了,不會是在抄蘋果吧?」僅是引述他人觀點,並非作者自行猜測。

  • 好強的解析,真的很謝謝你的這篇文

  • 不過現在Android的預設字體在ICS後已經改成Roboto了,跟Helvetica一樣有著Il不分的問題
    http://en.wikipedia.org/wiki/Roboto

  • 訪客

    readability