早在2004年，我剛剛開始職業生涯的時候，sIFR 還是一個特別火的概念。Shaun Inman 所創造出來的這項技術，通過Flash + JS + CSS聯合實現在不替換頁面中文字元素的情況下，對文字進行更為細膩準確的效果渲染。（ 使用sIFR你可以任意定義WEB中的文字字型，即便是客戶端瀏覽器未安裝的字型。sIFR使用Flash渲染字型效果，可以平滑消除文字鋸齒，你可以像使用用CSS控制文字一樣輕鬆得到各種文字效果）而在當時，這項技術是在Firefox和Safari 這樣的瀏覽器當中使用自定義字型的唯一途徑。不過由於這項技術極為吃記憶體，讓它在幾年內很快過時了。而2007年所問世的iPhone 甚至直接同Flash 技術劃清界限。說迴文字和字型本身，作為介面中最重要也是最常見的元素，它本身也承載著樣式、傳遞不同的資訊，可以說是介面設計中的一個核心分支也不為過。
2008年，主流的瀏覽器最終還是選擇了支援CSS3的@font-face 規則，這一規則在早期的CSS中也存在，但是在1998年的時候被剔除掉了。CSS3的這一改變令人振奮，我正好將這一技術運用到一個客戶所託付的專案上來，使得網站的瀏覽體驗得到了明顯的增強。
也正是因為我入行初期對於字型和排版的熱愛，使得我樂於鑽研這些東西，願意為了一丁點的強化和改變而進行深入的摸索。在今天的這篇文章當中，我希望將我所學到的這些基本的知識同大家分享一下，希望大家對於介面有著更加深入的認識。
最初的圖形介面
文字和排版可以追溯到五千年前，而圖形化介面僅僅只有40年的歷史。最關鍵的轉折點出現在1973年的施樂，最早的圖形化介面出現在了他們的Alto電腦上，而這個設計就是現如今圖形化介面設計的基礎。在Alto 的介面誕生後的10年裡，幾乎是它一家獨大，並且它也被大家視作為數字技術的未來。
早期的Alto 在80年代進化為著名的施樂之星，而施樂的這個設計方案也成為了第一個商用的作業系統圖形化介面。
不過不論是Alto 還是施樂之星，都沒能真正意義上崛起。不過施樂的圖形化介面最終深深的影響了蘋果和微軟的道路，比爾蓋茲和賈伯斯先後在施樂的研發中心觀摩了施樂之星的運作，而賈伯斯更是在1984年先人一步釋出了著名的Macintosh 系統，也就是後來我們所熟知的Mac OS。
Macintosh 的釋出不僅僅意味著相對成熟的GUI的出現，而且它為大眾帶來了真正意義上的自定義字型的功能。這款系統內建了許多以著名城市命名的字型，也正是在此之後才有越來越多的著名字型的數字版本在數字平臺上釋出並應用。
仔細觀察這些早期的字型，我們能夠發現，雖然已經是圖形化的介面，但是其中絕大多數的介面元素都還是以純文字的形式而存在，它們以一種奇妙的方式被整合到一個介面當中。循著介面的發展歷程沿路看過來，不難發現，文字和排版幾乎是貫穿始終的主線，它是一個不容忽視的核心類別。
文字即介面
介面中的每一個文字、每一個字元都很重要。好的文字是好的設計。文字是最根本的介面，是我們設計師來塑造和打磨這些資訊。
看看下面的天氣介面的設計，想象一下將所有介面元素都擺在桌上會是什麼樣的效果：無非就是兩張圖，幾個圖示和一大堆文字。
作為設計師，工作並不是將一堆隨機的內容和元素排布在螢幕上，讓它們看起來夠漂亮就行了。真實的情況是，我們要從最核心的內容和文字開始著手，然後從這裡著手細化，並完善出其他的部分。這就是我們工作的核心。
文字的清晰度同樣扮演著關鍵性的角色。如果我們的大腦花費一兩秒鐘單純只是分辨一個字形，那麼清晰度上的微小差異是無傷大雅的。可是當它們組合成為大段的文字，不同的字母組合構成不同的詞彙、段落的時候，清晰度的影響就更大了，排版的重要性也顯得更加明顯了。
當然，影響介面設計的文字屬性還有很多，比如平衡性，定位和層次結構，但是好的文案和排版的影響至少佔據整體影響的95%。
在偉大的設計師眼裡，文字不僅承載內容，而且可以構成介面。
– Oliver Reichenstein
我們如何閱讀
既然螢幕上的文字顯示是如此的重要，那麼我們應當先了解人們是如何閱讀的，而文字顯示又是如何影響我們設計決策的。
讀過Billy Whited 的文章《Setting Type for User Interface》之後，讓我對於文字閱讀的效率有了更深的認知。一個少於20個字母的獨立單詞放在句子中會更快被理解，而單獨放置的時候我們需要耗費更長的時間來識別。
其實這個研究結果也表明我們閱讀較長句子的時候，並非是逐個單詞地閱讀，而是跳躍著閱讀功能性的詞彙，我們將這種閱讀方式稱為離散跳躍式閱讀，俗稱掃視。
掃視讓我們的閱讀能力更強，我們甚至會跳過短的功能性詞彙。
我們應當記住這一關鍵特徵，因為我們的介面中所承載的詞彙大多是孤立的單詞。簡單說來，介面是無法利用掃視這種方式來獲取資訊的。
總的來說，單詞在閱讀中發揮著無比重要的作用，無論是作為內容還是作為介面元素，均是如此。無疑，選擇合適的字型就相當重要了。
過去，人們常常認為眼睛和大腦是通過單詞的外輪廓（Bouma Shape）來識別單詞，當然，後來的研究證明這個想法是錯的，單詞的可讀性和易讀性的影響因素不止是外輪廓，字母本身的形態、細節和清晰度同樣深入的影響著它的識別度。
是什麼讓字母清晰可讀？
其實這個問題一開始並不是那麼好回答。閱讀很大程度上依賴於我們的習慣，越常見的內容對我們而言越容易識別。這樣一來，我們就不那麼容易判斷讓字母清晰易讀的影響因素了。為了瞭解這一點，我們需要將句子分割為單詞，分解單詞為字母，在字母中檢視細節。
早在2008年，維多利亞大學心理學系根據測試結果得出結論，大寫和小寫的拉丁文字母是最容易識別的，也最易於閱讀。
這項研究有趣的地方在於，它揭示了一個事實：每個字母延伸出來的線性端點是最易於識別的地方，也是每個字母的特點所在。
上面的圖片標識出了這些最易於識別的部分。每一款字型在這些部分應當設計為最通用、最為人所熟悉的樣式，同樣的，它們也應該強調每個字母的差異。
在2010年的時候，另一項由 Sofie Beier 和 Kevin Larson 開啟了一個新的研究專案，這項研究專注於測試經常被誤讀的字母和字元的識別度。
這項研究表明，在相同的字型和相同的尺寸、相同字重的情況下，有些字型或者變體的細節確實比其他的更加清晰、更易於識別。這項研究的結果說明，纖細的字型加粗之後識別度效果會明顯會增強，而字母的X高度如果能夠佔據上伸區或者下探區的空間，識別度會更好。
為了更好的理解字型的清晰度的概念，你可以下載我所開發的這款工具 Legibility APP 來測試不同字型在模糊、炫光等多種不同情況下的清晰度和辨識度。這是一款處於測試階段的工具，可以在Chrmoe、Opera和Safari 中執行。
UI中的字型使用
理解了使用者閱讀的方式和字型可讀性的影響因素之後，我們應當開始瞭解UI中的字型的幾個關鍵因素。下面是UI中字型使用的10個關鍵因素。
1、可讀性
可讀性是UI中字型所需考慮的首要因素。字母字形必須清晰可辨，作為UI元素，其中不同的字母必須可以被使用者輕鬆辨別出差異。許多經典的字型，甚至包括 Helvetica ，都沒辦法清晰分辨 字母 i 的大寫形態 I，和大寫字母 L的小寫形態 l，這在介面設計中無疑是有影響的。
上圖中，左邊的字型為 Source Sans Pro , 右邊為 Helvetica，無疑對於 Illiterate 這個詞Helvetica 字型下前三個字母完全無法分辨。有部分使用者也同意Helvetica 並不適合作為UI介面的顯示字型而存在，因為這款字型終究是為平面印刷顯示而設計的，並非為螢幕而生。
在iOS 7 時代，蘋果短暫地將 Helvetica 作為系統的主要顯示字型的時候，曾對特定的使用者群體造成過資訊識別的困擾。這也最終催生了我們現在所看到的蘋果官方字型 San Francisco。舊金山是為UI介面而生的字型，它的x高度比Helvetica 更高，字母間距更寬，字母間的識別度更高。
2、適度
一款理想的UI介面所用的字型，不應當過於“顯眼”，而該是悄無聲息，“隱型”的。當使用者在試圖完成某項任務的時候，字型不應當給使用者以“齣戲”或者“顯眼”的感覺，也就是說，字型不應當超出使用者的認知負荷，而內容和資訊才應該成為真正的關注點。
3、靈活
給UI介面使用的字型應當具有靈活性。我們曾經為 Medium 做過使用者體驗設計，作為一個網頁部落格平臺，我們很難去控制使用者的能力、內容、瀏覽器、螢幕尺寸、網路頻寬和連線速度，包括輸入法。
所以我們最終為它所選取的字型應當支援大量不同的內容，在不同的尺寸下擁有良好的識別度，能夠相容不同的裝置，尤其是在小螢幕上。Sans serifs 字型就是專門為小尺寸低解析度螢幕而定製的。
4、x高度的上限
x高度的參考標準是小寫字母x的高度，同等尺寸下，x高度更大的字型更易於識別。不過x高度也不是越大越好，當x高度超過一定限度的時候，小寫字母n和小寫字母h就很難分辨了，這一點應當注意。
5、更大寬高比
字母的寬度和高度的比例也是相當重要的一個屬性。寬度和高度比例越高，字母在小螢幕上的識別度就越高。
6、寬鬆的字間距
字母之間的間距和字母內部的空間同樣是影響字母可讀的因素。字母間距太小同樣會影響整體的可讀性，而好的顯示字型會更好的控制字母間距，確保單詞在視覺上的“透氣性”，甚至可以營造出一種韻律感。
不過字間距不是越寬鬆越好，太過寬鬆會讓整個單詞看起來過於鬆散。有一個值得參考的標準，就是字母之間的間距應當比字母內的開口縫隙略小一點。
7、低筆觸對比度
許多字型不同的筆畫粗細不同，而對於UI介面而言，筆觸間的對比度越小識別度越好。較大的筆觸對比度下，字型在小尺寸螢幕上，較細的筆畫會難於分辨。
8、OpenType 功能
OpenType 功能對於字型而言是相當重要的。支援OpenType的字型擁有更大的靈活性，對於不同的語言和特殊的字元有著更為優良的相容性。
9、備用字型
接下來要說的情況可能大家多少都碰到過。網頁在完全載入出來之前，部分內容因為字型沒有載入而無法顯示。
其實這可以通過先載入本地字型，顯示內容，等網頁字型載入好了之後再行替換，以達到無阻塞顯示。這種方法的缺陷是需要預先設定一個可呼叫的本地備用字型。
10、Hinting
Hinting 指的是為了字型為了保證最大的可讀性而針對顯示器狀況進行調整的過程。Hinting 可以通過匹配顯示器的畫素柵格讓字型顯示更加清晰，降低誤讀的可能性。
這項技術最初是由蘋果公司所提出的，不過因為TrueType 字型技術的出現，Hinting 正在消失。
未來
隨著新的UI標準、排版技術的提升，字型技術也在不斷的進步，在不遠的未來，字型會從感測器獲得資訊，更好的相容不同的環境、隨著亮度、裝置、距離而進行智慧化的調整，甚至複雜而龐大的中文字型，也可能作為靈活的網頁字型而存在。
字型會讓我們的工作更加便捷
讓介面互動更快，更加觸手可及
讓UI更加易用
更加便捷
也更加清晰而高效