【好有格亂稿】Apple最新字體- San Francisco

距離上一次Apple release自製的系統字型,是在80年代時請設計師Susan Kare為他們設計的字體。有興趣的朋友可以看看 Susan Kare的 Portfolio,不只是字體,還有icon以及老玩家會懷念的Macpaint

如果沒特別深究,或許大家不會知道在近年幾年來,Apple所採用的字體都是現成的。包括 1999 至 2014 年所使用的 Lucida Grande 。 iOS 7 使用的Helvetica Neue Light 一直到最後取而代之的 Helvetica Neue。

 

而這件事對曾經在80年代以設計UI字體為先鋒/發家的蘋果來說,是不得不盡快必須要有所表現的,因為全球設計師一直譙不然就是一直笑XD


於是在上週Apple的WWDC 2015,San Francisco來了。

在這款新的系統字型上,蘋果花了很多心思在螢幕上的辨讀性。首先是比例問題,上圖為 San Francisco 較簡易的比例顯示,圖中被藍綠色塊覆蓋住的部分在字學上稱為 x-height。San Francisco 在整體比例上有較高的 x-height,而字體若是在比例上擁有較高的 x-height 會增加它的辨讀性。一般來說擁有較高 x-height的字體也適合套用極小的 font size。當然並不是說 small x-height 就一定不好讀,如果說 x-height “過高”,相對也會減少ascenders and descenders的空間,這些東西牽涉到更多字型規則,在此就不贅述。

San Francisco Family 樹狀圖如上,分別有將會在 iOS and OSX 上使用的 San Francisco Normal 以及會用在 Watch OS 介面的 San Francisco Compact,那麼這兩位家族成員有哪些不同的地方呢?

上圖可以很清楚地看到,相較於San Francisco Normal(紫色),San Francisco Compact(綠色)的弧狀結構被拉直了。舉凡擁有弧狀結構的字母如c,d,p,q 等等都是如此設計,如此一來所有的字距間隔在Apple Watch那小到不行的介面都被拉開了,這樣會大大對辯讀性有所幫助。下面兩張圖可以更清楚看到兩者若套用在一樣的段落會有怎樣的差異。


而這兩個隸屬於同一個家族用於不同介面的字型又分別被分成Display和Text。Display通常是被用在類似介面上的大標題,而Text則會被用在字體需要較小的內文。除了用途外,Display和Text之間的letter spacing是他們之間主要的差異之一,我們來看看下面三張圖。

1. 有兩行字,都是Display,上下兩行的size分別是120pt和15pt。

2. 第二章圖跟上一張圖唯一的不同是,15pt的那一行被置換成了Text。什麼?你看不出來跟上一張有啥不同?好,那再看下一張。

3. 我們把第二行Text的size放大到跟Display一樣大,也就是120pt,你看出不同了嗎?Text本身的letter space較Display大,為何?因為在介面上它必須縮小至內文需要的size啊!如果在縮小的狀況下,字母間的距離沒有被調整,那麼所有的內文看起來一定會擠在一團,難讀+失敗。下面四張圖可以更清楚地看出Display和Text的negative space差異。






如果看得夠細,其實可以發現字型架構也是造成這些negative space差異的原因。

 

所有的細微差異都是為了在介面上擁有更好的辯讀性而設計,以上大致就是San Francisco的設計重點。San Francisco的完整PDF guide可以從這裡下載,然後Developer可以在這裡下載字型歐~練蕭威結束,感謝收看!

Comments(0)

Leave a Comment