如果 San Francisco 字体作为 iOS 和 OS X 的系统默认显示字体,会比 Helvetica Neue 表现得更出色吗?

关注者
140
被浏览
8053

7 个回答

我拿到 Mac OS X El Captain 開發者預覽版已經快兩個禮拜了,這上面已經把系統字體換成San Francisco了。我一直系統語言設定的是英文所以我以前也是看著Helvetica Neue過來的。

總的來說,不是很感覺得出來差別。基本上英文單字看起來感覺差別都不大。唯一要說是等寬數字的顯示上有點不太自然(下文會提)。所以假如你要問有沒有更出色的話,我只能告訴你沒退步。

畢竟兩者都只是為了實用而設計的字體,難免會有很多地方很接近。對閱讀不進行干擾的字體才是好字體,而Helvetica Neue在這上面已經做得很好了。San Francisco也只能向Helvetica Neue靠攏,比較難超越。

然而作為一個系統字體,San Francisco是有這它獨特的優勢的。Helvetica被設計時是作為一個所有字體大小上都要表現ok的字體被創造出來的。但San Francisco因為是和系統綁在一起,系統可以針對字體大小、屏幕亮度、屏幕冷暖、屏幕PPI等選擇San Francisco針對不同情況所單獨設計的變體,這點就已經完爆其他字體了。下文會具體提到不同的變體。

不過大部分人從Helvetica Neue轉移到San Francisco應該也是感覺不出來兩者的差別的,畢竟人類對於細小差異的適應力很強。

感興趣的話可以去 Helvetica Neue vs. San Francisco: Can You Tell The Difference? ~ Creative Market Blog 做個測試,看你能不能正確的選擇哪個是Helvetica Neue,哪個是San Francisco。反正我只對了53%。。。

要注意San Francisco不少優化都是針對大段文字的,所以那個測試把一個字單獨挑出來比較其實是有點不公平的。。。。

San Francisco 和 Helvetica Neue 對比:



---------- § ----------
註:因為書寫順序和文字順序不符合的關係,下面的文字可能讀起來有點重複,請不要在意。。。

嗯,聽了樓下評論兩位去看了WWDC關於字體的Session¹才發現其實San Francisco從考慮的東西覆蓋面來說真的是完爆Helvetica Neue啊。。。

為什麼這麼說呢,首先,San Francisco的變體就比Helvetica Neue多。平常版本的Helvetica Neue只有8種字重,6個帶斜體,如下圖
共14種。

而再來看看San Francisco字體家族的結構:
首先為了手錶上的WatchOS和iOS/OS X就分別設計了兩種,SF(又稱SF UI)和SF Compact,
下面又各自分為Text和Display(之間的差別下文會說)。Text有6種字重,各自有對應的斜體,而Display有9種字重但沒斜體。

這樣下來共有(6×2+9)×2=42種變體。。。就算不算不同設備也有21種完爆Helvetica Neue。。
雖說字體變形多不一定就代表這個字體好,但是與其說字體變形多倒不如說因為是作為系統字體,Apple自己可以讓系統在不同情況下自動使用不同變體,等於說這是一種動態的、可以自行適應環境而變形的一種智能字體。San Francisco從這點來說,是Helvetica Neue完全無法比擬的。


## 變體差別
### SF UI 和 SF Compact
SF 或叫 SF UI 是為了 iOS/Mac OS 所重新設計的另一套San Francisco。一開始為watchOS所製作的San Francisco字體被重新命名為SF Compact,而SF UI則被命名為San Francisco。
細節差別為對於曲線的處理,Compact形狀比較飛機窗戶一點,UI就圓不少,比較接近Helvetica Neue
Apple的說法是在小屏幕上前者會得到更好的表現,具體的示意圖和比較圖可以參考PDF²的36-40頁。前者因為比較瘦的關係字與字之間空間會比較大,且因較多垂直水平線條在非Retina小屏幕上顯示會比較銳利易讀。

### Text和Display
Display適合大字號(大於20pt)使用,而Text適合內文使用。Text和Display比起來字距加寬且開口更開了,還針對一些小字號時容易搞混的字元進行了調整。比如說6有彎的和直的兩個版本可以選,因為彎的6小字號很容易和8搞混。還有字母i的圓點怕小字號時消失掉在text中是加大了的。

實際應用時系統是會幫你自動轉換的,小於20pt用text,大於20pt用display。所以開發者不需要考慮字號大小轉換的問題。不過設計師在Photoshop裡設計時需要注意一下因為Photoshop不會幫你自動轉換。

假如你把下圖點開來放大看的話應該還是能看出來左邊SF UI Display + SF UI Text內文空隙比右邊的Helvetica稍稍大一點,讀起來沒那麼有壓迫感。
更多詳細的比較還是請參考PDF²檔上Apple官方做的比較圖。。


## 其他設計上SF相對於Helvetica Neue的優點
### 針對大寫字母i和小寫字母L的優化:
Helvetica Neue下的大寫i(I)還有小寫L(l)是完全長得一模一樣的。而SF使用了不同的高度來區分開來。

### SF的一些符號是有大小寫的,小寫底端貼著基線,大寫則是在數字高度的一半
左圖為Helvetica Neue的冒號,只有一種,是貼著基線的。而右圖SF可以通過大小寫選擇貼基線或在數字中間高度,這在顯示時間時會特別有用。加號(+)和一些其他符號也有這個功能。




# 個人使用時遇到的一些問題
## 數字1
自從拿到新系統,我一直覺得系統右上角的時間怪怪的。。。
那個“12:13:46”總覺得1和後面數字隔的有點太開了。。。。
尤其是有46作為對比的情況下

後來發現在San Francisco字體中,1和其他數字不是等寬的。電腦的通知中心天氣溫度可以看得出來

這不僅是字符寬度的問題,SF下的1假如放到和其他字符等寬的話就是會看起來很空虛

下圖中從上往下分別為
數字1手動調整到等寬,
比對本身就等寬的數字2,
不等寬時數字1本身字距。
模糊後:
可以看到等寬的17之間看起來特別空蕩蕩。
*話說我上面這個等寬是用Photoshop自己弄的,可能不是系統真正會處理的樣子

而在Helvetica Neue當中,1是和其他數字是等寬的。而且1在設計的時候就是考慮到等寬看起來的樣子。但San Francisco的1就不太適合等寬使用(因為是以不等寬設計的)。
這就導致像時間顯示這種一定要等寬的場合(不然整個表的總寬度一直變化會看起來很討厭)San Francisco的數字"1"看起來稍稍有點不自然。

對於這點其實Apple在開發者的Session也有提到說你的App是可以選擇1等寬或1偏窄的,不過除了會動得東西(計時器)以及純文字表格以外,偏窄的看起來都比較美觀所以他們就把系統預設調成偏窄的了。。

Calendar應用中,2015和21號的1都用了偏窄的,但狀態條上因為不希望總寬度產生變化日期就用了等寬。。

或許他們可以像加號或數字6一樣提供一個替代版本的數字1來給等寬時使用,不然強制把給不等寬設計的1用於等寬的場所看起來就是有點奇怪。


# 總結
總的來說,新字體在新系統上表現的還是很好的。感覺沒有Helvetica Neue那麼冷冰冰了但也不算是像Roboto/Avenir那麼現代。要問有沒有更出色的話,我只能告訴你理論上會但我看不出來。。。(大段內文除外)


---------- § ----------

1:Apple WWDC 2015 關於新字體的 Session:Introducing the New System Fonts
2:Session的PPT的PDF版本:
devstreaming.apple.com/

P.S. 我也很想截圖但問題是人家第一頁寫明白了沒有Apple的書面同意不讓轉載或公眾發佈。。。
其實最上面那張Family Tree的圖也是裡頭出來的只是我照著復刻了一遍並且把下面改掉了。。。感覺還是很危險呢 總而言之假如有人覺得不妥我馬上撤掉

附上San Francisco字體Beta版打包(包括UI和Compact,Mac安裝時建議直接拖進字體簿不要雙擊安裝)下載連結 http://manglekuo.com/else/file/files/SFFont.zip (來自Apple Developer Resources,原來要有開發者帳號才能下載,但我重新上傳到自己的服務器上了)

感謝閱讀,歡迎探討。

---------- § ----------

21 June 2015 更新:
感謝評論中@贾物体@Meow Meow 指出,其實San Francisco字體家族是有好多分支的。因此進行了額外的研究並把原文進行了修改和擴展。
我想提供实际意见之前,必须先要将换成 San Francisco 的 iPhone、iPad 实际上拿到手,在实际使用情况(context)测试才能够给意见--Apple Watch 的观察并不足以解释一切,因为用途、屏幕大小、功能也完全不同喔。