主題

聊一點 iOS 和 Android 的預設字體

樹上的Apple不能吃 | 2021-04-16 17:57:23 | 巴幣 1116 | 人氣 420

「世界上只有兩種行動作業系統:一種叫 iOS;一種叫 Android. Others 早在幾年前全死光了。」

不聊別的,就單單想講系統預設字體。

如果你只是一個很普通的用戶,你基本上很難察覺出 iOS 和 Android 系統的字體有什麼差異,就算是 UI 設計和開發團隊也不容易察覺到。但如果你花一些時間研究一下,你就會頓悟到這兩種字體的差異。

今天就是教你如何從預設字體下手來辨別 iOS 與 Android 作業系統。

這裡只講英文字體。CJK 字體不包括在內。


iOS 和 Android 字體歷史

iOS 從 iPhone OS 1 到目前的 iOS 14 (以及即將發布的 iOS 15) 經歷了 3.5 次的字體更換。
第一次為 iPhone OS 1 至 iOS 6 時期,採用的是 Helvetica Neue Bold 字體;
第二次為 iOS 7 至 iOS 8 時期,為了應對重新設計的扁平化風格,從 Helvetica Neue Bold 字體改為 Helvetica Neue Roman 字體及 Helvetica Neue Ultralight 字體,從而達到輕薄的效果;
第三次為從 iOS 9 開始,全面使用 Apple 自己設計的 San Francisco 字體來取代 Helvetica Neue 字體。
第 3.5 次則是 iOS 10 開始棄用非常輕薄的字重,比如 Ultralight 和 Thin,改成目前的 Regular 和 Semibold 字重。

Android 則經歷了 2.5 次的字體變換。
第一次為 Android 1.0 到 Android 3.2 Honeycomb 時期使用了 Droid Sans 字體;
第二次為 Android 4.0 Ice Cream Sandwich 開始改用 Google 自己設計的 Roboto 字體來取代 Droid Sans 字體;
第 2.5 次則是在 Android 5.0 Lollipop, Google 修改了 Roboto 字體,將字體的小點 (tittle, 比如 i 和 j) 從方形改為圓形。


iOS 預設字體 - San Francisco, 以下以縮寫 "SF" 標識。

SF 是 Apple 在 2014 年設計的字體,屬於新無襯線體 (Neo-grotesque) 分類的字體,其靈感源自於最知名的 Helvetica 字體與 FF DIN 字體。
起初只應用在 Apple Watch 與 watchOS,後來在 WWDC 2015 正式公佈用於 watchOS 的 SF Compact 字體,以及用於 iOS 與 OS X (如今的 macOS) 的 SF UI 字體。從 iOS 9 與 OS X 10.11 El Capital 開始代替 Helvetica Neue 作為系統的預設字體。從 iOS 11 與 macOS 10.13 High Sierra 開始,SF UI 字體改名為 SF Pro 字體。

SF Pro 的特點在於:
1. 擁有兩種子字體 - SF Pro Display 和 SF Pro Text. Apple 要求 20 點 (pt) 或以上的字號一律使用 SF Pro Display; 而 19 點或一下的字號一律使用 SF Pro Text. 好處在於 SF Pro Text 的字元間距 (letter spacing) 比 SF Pro Display 寬,小字號下不會感到很緊湊,更容易閱讀。
2. 涵蓋所有的字重 - SF Pro 涵蓋了從 100 到 900 的所有字重,包括斜體 (Italic)。相比之下 Helvetica Neue 只涵蓋了 8 重字重,而 Roboto 只涵蓋了 6 種字重。

SF 使用字重名字來對應字重數字:
字重數字 字重名字
100 Ultralight
200 Thin
300 Light
400 Regular (標準)
500 Medium
600 Semibold
700 Bold
800 Heavy
900 Black

3. Apple 對於 SF 字體的使用非常嚴格:只能用於 Apple 平台相關的設計、開發與展示用途,比如 iOS 與 macOS app. 除此之外一律視為侵權。


Android 預設字體 - Roboto

Roboto 是 Google 在 2012 年設計的字體,同樣屬於新無襯線體 (Neo-grotesque) 分類的字體。Google 把 Roboto 描述為「現代的、但平易近人」和「有感情」的字體。但被一些評論員批評像「大雜燴,是 Google 版的 Arial」。
從 Android 4.0 Ice Cream Sandwich 開始代替 Droid Sans 作為系統的預設字體,後來在 Android 5.0 Lollipop 被 Google 重新設計 (差別不大)。

Roboto 的特點在於:
1. 免費供所有用戶使用。只要遵守 Apache 授權條款就可以在任何一個地方使用,比如網頁、行動 app 等。部分第三方 iOS app 也是使用 Roboto 字體。
2. 不分子字形,任意大小都能使用,方便開發。
3. 字重有六種,包括斜體 (Italic)。

Roboto 使用字重名字來對應字重數字:
字重名字 字重數字
100 Thin
300 Light
400 Regular (標準)
500 Medium
700 Bold
900 Black

順帶一提,YouTube 在任意平台 (Web, iOS, Android) 都是使用 Roboto 字體。


SF Pro 與 Roboto 的字體差異
從第一條到第三條的字體為 SF Pro Display, SF Pro Text 與 Roboto

相同字號下的大字體:
SF Pro Display 與 Roboto 寬度幾乎一樣,後者只是比前者寬一點點。但是 SF Pro Text 因為字元間距比較寬的緣故,總體來說就非常長。

相同字號下的小字體:
SF Pro Display 的寬度是最小的,其次是 Roboto,而 SF Pro Text 最長。

從以上的圖片來看,差異最明顯的莫過於這些字體:
1. 小字體:a, e, g, b, d, p, q, t
2. 大字體:C, G, O, Q
3. 數字:1, 6, 9
4. 符號: @, $, 逗號, 分號,()
雖然不多,但也足夠做區分了。

你覺得哪一個比較好看?


藍色是 SF Pro Display, 紅色是 Roboto
小字體:a, e, g, b, d, p, q, t

先看 a 好了。

幹,不是這個。

小 b 最顯眼的地方在於橢圓形。SF Pro 的橢圓形是非常漂亮的;而 Roboto 的橢圓形像是被切掉一截。同樣適用於小 d, 小 q 和小 p.

大字體:C, G, O, Q

只要是橢圓相關的大字體都有很明顯的差異。SF Pro 的橢圓都是矮而圓潤;Roboto 的橢圓都是高而僵直。



數字:1, 6, 9

6 同樣適用於 9。

符號: @, $, 逗號, 分號,()





總結一下 SF Pro 字體和 Roboto 字體的特徵:
1. SF Pro 字體的尾巴和柱子尾端多數是直的或者橫的,甚至是 90 度垂直;而 Roboto 字體的尾巴和柱子尾端都是斜的或彎的;
2. SF Pro 字體比較矮,但圓潤,而且無論是橢圓還是圓都很完美;而 Roboto 字體比較高,但僵直,而且橢圓不是被切掉一截,就是莫名有凸起來的尖角;
3. SF Pro 字體不會彎到一半突然轉直,但 Roboto 會。

整體美觀來講 SF Pro 肯定優於 Roboto,畢竟 Roboto 的「改良版的大雜燴」、「Google 版 Arial」不是叫假的。而且 Google 已經開始把自家產品的字體從 Roboto 改成幾何无衬线體的 Product Sans 字體。

但就像我之前講的,SF 字體不能隨便用。因此喜歡 SF 字體的用戶都會選擇山寨版的 SF 字體 - Inter 字體。差不多就是 Helvetica 和 Arial 的因果關係吧。

下次有空就聊聊 SF Pro 和 Inter 的差異,以及 Helvetica Neue 和 Arial 的差異吧。

好的,下課。

創作回應

更多創作