字體(tǐ)作爲界面設計的一(yī)個元素，對用戶的閱讀體(tǐ)驗起着至關重要的作用。本文是 UI 設計師 Viljami Salminen 分(fēn)享的用戶界面字體(tǐ)設計的基本規則和技巧。
早在 2004 年，我(wǒ)(wǒ)才剛開(kāi)始工(gōng)作的時候，sIFR 非常火(huǒ)。sIFR 是由 Shaun Inman 開(kāi)發、可以電(diàn)影短片中(zhōng)嵌入定制字體(tǐ)的一(yī)種技術，它能被 JavaScript 和 CSS 調用。當時，sIFR 基本上是唯一(yī)一(yī)種能在 Firefox 或 Safari 浏覽器中(zhōng)使用定制字體(tǐ)的技術。随着 2007 年 iPhone（不需要 flash）的推出，基于 Flash 格式的這種技術很快就過時了。
2008 年，浏覽器終于開(kāi)始支持新的 CSS3 字體(tǐ)設計規則了。早在 1998 年，這種字體(tǐ)設計規則就被寫入 CSS 标準中(zhōng)了，但後來被移除了。我(wǒ)(wǒ)還記得，當我(wǒ)(wǒ)說服我(wǒ)(wǒ)的一(yī)個客戶使用這種新的字型規則時候的興奮心情，當時，浏覽器已經開(kāi)始支持能夠提升用戶體(tǐ)驗的「漸進增強(Progressive Enhancement）」技術了。
自從涉足這個行業，我(wǒ)(wǒ)開(kāi)始越來越喜歡研究字體(tǐ)，以及與字體(tǐ)設置中(zhōng)相關的微小(xiǎo)細節。在這篇文章中(zhōng)，我(wǒ)(wǒ)打算分(fēn)享一(yī)些我(wǒ)(wǒ)了解到的基礎知(zhī)識，希望能爲用戶界面的字體(tǐ)設置提供幫助。
第一(yī)代GUI
雖然字體(tǐ)的曆史可以追溯到大(dà)約 5000 年前，但是圖形用戶界面的出現還不到 40 年。一(yī)個重要轉折點發生(shēng)在 1973 年，Xerox 推出了計算機 Alto，大(dà)體(tǐ)上奠定了今天圖形用戶界面的雛形。當時 Alto 被視作是計算機的未來，在 10 年之後，同類 GUI 産品才進入大(dà)衆市場。
80 年代，Xerox 推出了以 Alto 爲基礎的升級版 Xerox Star ，是世界上第一(yī)個商(shāng)用的 GUI 操作系統。
無論是 Alto 還是 Xerox Star 最終都沒有大(dà)肆流行，不過，二者對蘋果和微軟在鼠标驅動 GUI 的革命性創新産生(shēng)了極大(dà)地影響。幾十年之後，也就是 1984 年，喬布斯推出了第一(yī)代 Mac OS。
Macintosh 的推出意味着，大(dà)衆第一(yī)次可以使用定制字體(tǐ)了。第一(yī)代 Mac 預裝了多款經典字體(tǐ)，在接下(xià)來的幾年中(zhōng)，越來越多的字體(tǐ)廠商(shāng)除了發布傳統字體(tǐ)之外(wài)，還會推出相應的數字版本。
當我(wǒ)(wǒ)們檢視這些早期的圖像用戶界面的時候，我(wǒ)(wǒ)們發現，其中(zhōng)大(dà)部分(fēn)元素都是用手寫的。這些 GUI 都是純文本，即一(yī)個個字母的純文本集合體(tǐ)。
我(wǒ)(wǒ)們再以同樣的方式觀測現代的用戶界面。在現代的交互界面中(zhōng)，文本即界面，字體(tǐ)設計則成爲主要的設計規範。
字體(tǐ)即界面設計的基石
在用戶界面中(zhōng)，每一(yī)個單詞和字母都至關重要。好的字體(tǐ)等于好的設計。字體(tǐ)成了界面設計的基石，而我(wǒ)(wǒ)們設計師，則是這些這類「信息基石」的修造者。
觀察下(xià)面這個例子，想象一(yī)下(xià)，把以下(xià)圖片中(zhōng)的元素拆解開(kāi)來，看看會是什麽樣子——一(yī)個個單詞、兩張圖片、幾個圖标。
作爲設計師，我(wǒ)(wǒ)們的工(gōng)作并不是在屏幕上随機擺弄幾個元素，讓他們看起來美觀漂亮就行了，而應從最重要的部分(fēn)着手，即字體(tǐ)和内容，以及由此産生(shēng)的相關細節。這才是我(wǒ)(wǒ)們作爲設計師的核心技藝。
字體(tǐ)的可辨識性也十分(fēn)重要。關于這一(yī)點，一(yī)開(kāi)始看起來似乎不重要，特别當辨認單詞是如此容易的時候——人類大(dà)腦辨識出某一(yī)個單詞所需的時間還不到一(yī)秒鍾。但是，當需要辨認的單詞和字母組合變多，字體(tǐ)的重要性就顯而易見了。
雖然在界面設計上，有很有多微小(xiǎo)的細節需要考慮：比如平衡、定位、層級和結構，但是有了好的文案和字體(tǐ)，就成功了 95% 。
一(yī)個優秀的設計師懂得：網頁上的文字不僅僅作爲内容而存在，它還是用來交互的界面。
– Oliver Reichenstein
我(wǒ)(wǒ)們人類是如何閱讀的？
既然字體(tǐ)設計如此重要，那麽我(wǒ)(wǒ)們就應該花點時間學習「我(wǒ)(wǒ)們人類是如何閱讀的」，以及「字體(tǐ)設計是如何影響設計策略的」。
在閱讀 Billy Whited 的文章「Setting Type for User Interfaces」時， 我(wǒ)(wǒ)有一(yī)個重要發現，即閱讀效率和文本的數量有很大(dà)關系。這意味着，在閱讀少于 20 個字母的單詞時，單獨提出來閱讀相比于放(fàng)在長句中(zhōng)閱讀速度會更慢(màn)。這是因爲，當我(wǒ)(wǒ)們閱讀長句時，眼睛并不是順着句子中(zhōng)單詞一(yī)個一(yī)個看的，而是有選擇性跳讀的，這個動作被稱作「掃視」。
跳讀提升了閱讀效率，使閱讀時可以忽略掉一(yī)些功能性單詞成爲可能。這點要深記于心，因爲用戶界面上大(dà)都是一(yī)個個獨立的單詞，也就意味着「掃視」在 UI 設計中(zhōng)不起作用了。
因此，當我(wǒ)(wǒ)們明白(bái)細微到每一(yī)個字母都會對閱讀體(tǐ)驗産生(shēng)重要影響時，我(wǒ)(wǒ)們也就明白(bái)爲什麽字體(tǐ)的選擇那麽重要了。
過去(qù)，我(wǒ)(wǒ)們認爲我(wǒ)(wǒ)們是以單詞的外(wài)形輪廓來辨識單詞的，這個理論被稱爲「Bouma shape 伯馬形」，後來研究發現，這個觀點并非完全正确，字體(tǐ)的可讀性和辨識度并不單單由字體(tǐ)的整體(tǐ)輪廓決定。我(wǒ)(wǒ)們更應該重視字形本身。
決定字母可讀性的因素是什麽？
首先，回答這個問題似乎有點難。閱讀是一(yī)種習慣，有良好閱讀習慣的人肯定讀得越順暢。我(wǒ)(wǒ)們怎麽可能知(zhī)道影響字母可讀性的因素是什麽？爲了便于理解，我(wǒ)(wǒ)們需要首先把句子分(fēn)解成單詞，單詞分(fēn)解成字母，字母分(fēn)解成更小(xiǎo)的元素，然後解剖出更多細微層面的細節。
2008 年， 維多利亞大(dà)學心理學院進行了一(yī)次實證研究，顯示了大(dà)小(xiǎo)寫拉丁字母适合閱讀的最佳範圍。
從這個研究中(zhōng)，得出了一(yī)些有趣的結論。首先，線條終止的方式對于字母辨識起着至關重要的作用。
上圖顯示了辨識單詞時最受人眼關注的區域範圍。在設計字體(tǐ)的這個區域時，不僅應該考慮閱讀的一(yī)般性和習慣性，而且需要把每個字母的差異性也考慮進來。
2010 年， Sofie Beier 和 Kevin Larson 發起了另一(yī)個研究：對一(yī)些容易被誤讀的單詞變體(tǐ)進行了測試。
這個研究發現，雖然有些字母在尺寸、字重和特性上相同，但是他們在辨識度上卻各不相同。結果顯示，細長的字母拉寬一(yī)些，就會變得更具辨識度，而 X 字高的字符，如果增加升部和降部的長度則更具辨識度。
我(wǒ)(wǒ)爲最近一(yī)個項目開(kāi)發了一(yī)款名叫 Legibility 的 App ，這款工(gōng)具可以對字體(tǐ)設計進行辨識度的模拟測試。通過對文字加上不同的濾鏡效果（比如模糊、微亮和像素化效果），模拟出不同的閱讀環境。目前還是 beta 版，支持Chrome, Opera 和 Safari。
UI字體(tǐ)設計應該注意哪些方面？
在了解人類閱讀原理和字母可辨識度的概念之後，對于 UI 設計我(wǒ)(wǒ)們有了一(yī)個更好的全局觀。以下(xià)是我(wǒ)(wǒ)總結的幾點：
1. 辨識度
辨識度是需要考慮的首要因素。字母的格式要清晰、可辨認。在 UI 設計中(zhōng)，清晰可見的字母更具辨識度。很多無襯線字體(tǐ)(San Serif)，包括 Helvetica ，大(dà)寫的字母 I 和小(xiǎo)寫的 l 字母難以區分(fēn)，對于 UI 設計來說是非常不好的體(tǐ)驗。
比較左邊的 Source Sans Pro 字體(tǐ)和右邊的 Helvetica 字體(tǐ)。右邊的 Helvetica 字體(tǐ)中(zhōng)，前三個字母幾乎是一(yī)模一(yī)樣。而左邊的 Source Sans Pro 字體(tǐ)表現更佳。甚至有人認爲，Helvetica 不适用于任何 UI 設計，不過它本來就不是爲屏幕顯示而生(shēng)的。
Helvetica 真的弱爆了。它不是爲小(xiǎo)屏顯示而設計的。像「milliliter」這樣的單詞顯示效果就很差。
– Erik Spiekermann
當年蘋果曾經暫時使用過 Helvetica 作爲其主要的 UI 設計字體(tǐ)，不過這一(yī)舉動曾給一(yī)些用戶帶來了閱讀上的問題。不過，正是因爲這次事件才導緻了蘋果後來設計了 San Francisco 字體(tǐ)。 San Francisco 字體(tǐ)是爲屏幕而生(shēng)， [2] x-height 比 Helvetica 字體(tǐ)更高，有着更寬的字距，單個字母更容易辨認。
2. 低調
一(yī)個完美的 UI 字體(tǐ)讓人意識不到它的存在，絕不會喧賓奪主。字體(tǐ)應該是方便用戶完成任務的，而不應爲用戶添加認知(zhī)上的負擔。
3. 靈活度
UI 字體(tǐ)應該具有一(yī)定的靈活度。記住，我(wǒ)(wǒ)們是在爲各種不同的媒介設計用戶體(tǐ)驗，我(wǒ)(wǒ)們無法掌握的是——用戶的能力、應用場景、所用的浏覽器、屏幕大(dà)小(xiǎo)、連接速度，甚至使用的輸入方式。
我(wǒ)(wǒ)們選擇使用的設計字體(tǐ)應該支持盡可能多的使用場景，能在不同大(dà)小(xiǎo)、各種不同的設備、以及特定的小(xiǎo)屏設備上運行良好。比如 Sans serifs 字體(tǐ)能在低分(fēn)辨率的小(xiǎo)屏上運行良好。
4. 高的x-height
X 字高是指小(xiǎo)寫字母「x」的高度。x-height 越高，小(xiǎo)屏閱讀體(tǐ)驗就越好。但字高也不能過大(dà)，要不然 n 和 h 難以區分(fēn)。
5. 寬比例
比例是指一(yī)個字符的高和寬的比值。寬度的比值越大(dà)，字體(tǐ)辨識度越好，小(xiǎo)屏閱讀體(tǐ)驗也越好。
6. 寬松的字母間距
一(yī)個重要的原則是，字母之間的間距要比 [3]「字櫃」（counter）要小(xiǎo)。
字母周圍的空間和字母的内部空間同樣重要。字母如果相距太近讀起來很費(fèi)勁。一(yī)個好的 UI 字體(tǐ)應該要給字母之間留有充分(fēn)的呼吸空間，留有一(yī)些空間，建立起穩定的節奏。
另一(yī)方面，如果間距太大(dà)，則會打破單詞的整體(tǐ)性。一(yī)個重要的原則是，字母之間的間距要比「字櫃」（counter）小(xiǎo)。
7. 平順的筆畫
好的 UI 字體(tǐ)應該是筆畫平順。不夠平順的字體(tǐ)在大(dà)屏上看起來可能還好，一(yī)旦在小(xiǎo)屏上顯示，細長的筆畫就難以辨認。另一(yī)方面，像 Arial 和 Helvetica 這樣的字體(tǐ)，由于字母筆畫粗細幾乎一(yī)樣，因此讓閱讀變得尤其困難。
所以，需要在這兩者之間達到平衡。下(xià)面兩個案例，你覺得哪個更好？
8. 支持OpenType功能
确保你選擇的字體(tǐ)支持 OpenType 功能這一(yī)點很重要，因爲它能爲我(wǒ)(wǒ)們提供更多的自由度。支持 OpenType 功能也表明可以很好地支持不同的語言和特殊字符。
對于我(wǒ)(wǒ)來說， OpenType 功能最有用的一(yī)點是「表格數據」，它是指相同寬度的一(yī)連串數字。計時器、計算器或者 IP 數字的設計中(zhōng)，可以用到這個功能。
9. 字體(tǐ)回退機制（Fallback）
下(xià)面這個案例你可能非常熟悉。在加載未完成時，網頁字體(tǐ)不能完全顯示出來。
要解決這個問題，隻需要以非阻礙的方式來加載字體(tǐ)，這樣可以大(dà)大(dà)減少内容加載的時間。這樣做的缺點是，需要在默認系統字體(tǐ)中(zhōng)設置回退字體(tǐ)，默認系統字體(tǐ)是在頁面加載時屏幕顯示的字體(tǐ)。
10. 微調
微調是一(yī)個過程，是指字體(tǐ)的調整以獲得最佳閱讀體(tǐ)驗。微調能讓字體(tǐ)矢量線條更好适應像素網格的顯示。在低分(fēn)辨率屏幕上對字體(tǐ)進行微調對獲得清晰、可辨識的文本十分(fēn)重要。
微調最早是由蘋果發明的，但自從推出 TrueType 字體(tǐ)格式後，微調就逐漸消失了。現在，隻有在需要支持 IE8 或者基于 TTF or EOT 格式的浏覽器時才會考慮使用微調。
未來的發展
以上是我(wǒ)(wǒ)帶領大(dà)家展開(kāi)的一(yī)次短暫的字體(tǐ)漫遊之旅，未來，我(wǒ)(wǒ)期待看到更多關于網頁字體(tǐ)、字體(tǐ)設計工(gōng)具、字體(tǐ)格式的演化和進步，以及在（不遠）的将來，字體(tǐ)能更好地爲我(wǒ)(wǒ)們所用。
我(wǒ)(wǒ)認爲，未來我(wǒ)(wǒ)們将能看到越來越多的「漸進增長技術」體(tǐ)驗，文本内容比字體(tǐ)排版更加重要。雖然一(yī)直以來網頁字體(tǐ)設計就很重要，但是直到現在我(wǒ)(wǒ)們才開(kāi)始正視這個問題。
爲了設計出理想的字體(tǐ)，我(wǒ)(wǒ)們必須盡可能多地了解用戶閱讀環境狀況。雖然這點顯而易見，但是事實并非如此。但是在未來，我(wǒ)(wǒ)認爲，字體(tǐ)将對顯示環境變得更加「敏銳」，并能針對一(yī)系列元素（視點、分(fēn)辨率、字體(tǐ)渲染引擎、環境光線、屏幕亮度和閱讀距離(lí)）做出調整。
同時，我(wǒ)(wǒ)預測，蘋果IOS 系統中(zhōng)将會兼容字體(tǐ)微調功能，字體(tǐ)将能根據不同的用戶需求自動調整。
整體(tǐ)來說，我(wǒ)(wǒ)認爲，UI 字體(tǐ)的未來将與傳感器有關，以及字體(tǐ)将能根據傳感器搜集到的數據進行格式的調整。未來，新的字體(tǐ)設計工(gōng)具會在工(gōng)作流中(zhōng)整合智能算法，能對不同場景進行自動識别。
- 開(kāi)放(fàng)設備實驗室 (Open Device Lab)，旨在幫助網頁設計師在各種不同的移動設備上測試作品的效能和表現。
- x-height： 小(xiǎo)寫字母的高度（尤其是小(xiǎo)寫x），不包括升部和降部。
- 「字櫃」是指字符中(zhōng)的負空間。
