英文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 Sans與Lucida Sans Unicode所製作的，但Lucida Grande在小字與螢幕顯示方面經過特別優化。有趣的是，Lucida Grande沒有做斜體版。

Linux: Ubuntu

這套字體是知名字體設計公司Dalton Maag為Linux特別設計的，在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 Grande 與 Helvetica 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 Grande與Ubuntu比較有人文手寫感，所以在小字時閱讀起來比較順暢，特別是Ubuntu在小寫 g 上設計的 descender 角度，留下比較大的字腔，比較容易與其它形近字產生區別，如下圖所示。至於Droid Sans則利用了雙層的g，造型比起其它偏圓形字母更加突出，讓視認性提高，創造更乾淨的閱讀體驗。