如果 San Francisco 字體作為 iOS 和 OS X 的系統默認顯示字體，會比 Helvetica Neue 表現得更出色嗎？

01-04

Apple plans to refresh iOS 9, OS X 10.11 using new Apple Watch font

我拿到 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關於字體的Session1才發現其實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的說法是在小屏幕上前者會得到更好的表現，具體的示意圖和比較圖可以參考PDF2的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稍稍大一點，讀起來沒那麼有壓迫感。

更多詳細的比較還是請參考PDF2檔上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版本：
http://devstreaming.apple.com/videos/wwdc/2015/804eub264zh3x4j9yb/804/804_introducing_the_new_system_fonts.pdf?dl=1

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 的觀察並不足以解釋一切，因為用途、屏幕大小、功能也完全不同喔。

如果論字形設計的話，個人不覺得這種新式 Roboto 會有多麼優秀的外觀。

但是論實際應用的話，又是另外一回事了。

San Francisco 是對屏幕顯示全面優化的一套字體。
單靠為不同背光設計的字重，就已經完爆 Helvetica。
Apple Watch 的 San Francisco Text 字體包含 G1/G2/G3 鎊重的意圖是什麼？ - Linkzero Tsang 的回答

OS X Yosemite 用戶可以自行更改體驗。

在此下載字體文件，解壓後拷貝到 ~/Library/Fonts 文件夾即可：

https://github.com/supermarin/YosemiteSanFranciscoFont/raw/master/SystemSanFrancisco.zip

重啟後生效。將文件刪除即可恢復原樣。

來源：

supermarin/YosemiteSanFranciscoFont · GitHub

註：某些地方的顯示不完美。如 Chrome 的標籤字會下沉。

San Francisco 如果在 OS X Gala 中使用的話，同時（如果）思源黑體作為中文，那麼搭配還是不錯的。

當然，我不相信 Apple 會直接搬過去，畢竟原來是個小屏設備的專用屏顯字體，直接搬肯定是不妥的，我估計（如果）要搬也會改成 San Francisco Interface 版本。

不過在看到真機之前，一切都是猜測。

實際上次像素抗鋸齒是一種比灰度抗鋸齒更優秀的方法，至少San Francisco 思路方向是正確的，但是實際效果還是有待觀察的，比如次像素抗鋸齒對次像素排列有要求，比如windows下橫豎顯示器抗鋸齒效果差距很大需要重新調整。

但不得不說微軟雅黑的抗鋸齒效果讓一眾100PPI以下甚至80PPI以下的顯示器能看了不再滿屏的大果粒

直接上圖，可能是字體渲染的原因，個人感覺看起來還是非常丑的。希望後續可以優化一些，不然買下一代 iPhone 和升級新 OS X 的想法就要動搖了。